NgTemplate Bootstrap is not recognizing my CSS class

I made a CSS adjustment to alter the modal width to 50% instead of 100% of the screen. However, the class modal-content is being duplicated after the modification.

https://i.sstatic.net/VZxM6.png

https://i.sstatic.net/ahLkn.png

CSS

  .modal-content{
    width: 50%;
  }

HTML

<ng-template #content>
  <div class="modal-content">
    <div class="modal-header">
      <i class="fa fa-heart"></i> A
    </div>
    <div class="modal-footer">
      <i class="fa fa-heart"></i> B
    </div>
  </div>
</ng-template>
cssangularbootstrap-4bootstrap-modal

Answer №1

I encountered a similar problem during my development process and was able to resolve it by utilizing the windowClass feature in ng-bootstrap

const modalRef = this.modalService.open(UserPasswordComponent, {
  windowClass: 'custom-modal-width' // insert a custom class here when opening the modal
});

To adjust the width, modify your style.css

.custom-modal-width .modal-content {
    width: 50%;
}

Ensure that you remove the model-content class from your template

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

I am currently facing an issue with positioning a logo and navigation links within a <header> element. When I apply the CSS property text-align:center;, the logo aligns to the center on one line while the navigation links appear on another line direc ...

htmlcssresponsive-design

Hovering over the top menu items in AngularJS will reveal dropdown submenus that will remain visible even when moving the cursor

I am facing an issue where my top menu has links that display a dropdown of additional menu items upon hovering. I have attempted to use onmouseover and onmouseleave events to control the visibility of the sub menu. However, I have encountered a problem ...

javascripthtmlcssangularjs

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

javascripthtmlcssarraysobject

Having trouble selecting all checkboxes in the tree using angular2-tree when it first initializes

My goal is to have all checkboxes auto-checked when clicking the "feed data" button, along with loading the data tree. I've attempted using the following code snippet: this.treeComp.treeModel.doForAll((node: TreeNode) => node.setIsSelected(true)); ...

javascriptangulartypescript

Guide on implementing image tag and source in Django template language system

I need to include a base64 encoded image in JSON format into a Django HTML template. What is the best way to do this? <img src="R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp(Some 64 bit image);base64 /> How can I properly translate this code snippet into my ...

htmlcssjsondjangoencode

Font Awesome icons may not display in HTML

Hey there, I'm struggling to get checkbox icons and a plus symbol to appear on my checkbox tags on my website. I added this CSS code to the main .css file of the page, but unfortunately the icons are not displaying. Here is the CSS snippet that includ ...

htmlcssfont-awesome

Tips for automatically disabling cloudzoom based on image width

I'm currently utilizing cloudzoom with the given markup: <div id="container"> <img id="main-image" class="cloudzoom" src="/img/image1.jpg" data-cloudzoom="variableMagnification: false, zoomOffsetX: 0, zoomPosition: 'inside', zoom ...

jqueryhtmlcss

What are some ways I can enhance the typography within Material UI?

Currently, I am in the process of developing a custom theme utilizing createMuiTheme. However, my application requires more typography variants than what Material UI provides out of the box. I need to extend the typography so that it aligns with my specifi ...

cssreactjstypescriptmaterial-uinext.js

Creating a carousel with three thumbnails arranged in two rows

Currently, I am using a slider for my thumbnails. If you want to check out the code for this thumbnail slider, click on this link: thumbnails slider code My goal is to display 6 thumbnails in total, with 3 thumbnails shown in each row (2 rows total). Add ...

javascriptjqueryhtmlcss

Emphasize the content within the table cell

Currently, I am working with an HTML table that is being generated by Java. My goal is to highlight the text within a table cell without changing the background color of the entire cell. I should mention that I am aware of the option to achieve this by ma ...

htmlcss

Arranging elements in a Material-UI card in a horizontal layout

I am currently working on designing a user profile display. I want to create a card layout that showcases the details listed below. My goal is to have these items displayed side by side instead of being divided as shown in the image. Despite trying to giv ...

cssflexboxmaterial-ui

Ways to allocate space evenly between components of the same size in React Native

As a beginner in Javascript and React-native, I have been experimenting with the technology to assess its viability for potential use in my current workplace. However, I have encountered some challenges with the user interface. To enhance my understanding ...

javascriptcssuser-interfacereact-nativeflexbox

The jQuery fade speed effect has a limitation where it can only be utilized

When a specific link is clicked, I want a div to display with a fadeIn effect and then fadeOut when the link is clicked again. However, after the first click following an HTTP request, the fadeIn works but the fadeOut does not (the div closes though). More ...

jquerycss

CSS - Text and dropdown misalignment due to spacing issue

I'm looking to decrease the spacing between the text "Allow type of Compartment Option" and the dropdown box. Here is the code snippet being used: .cl-checkbox { padding-left: 20px; padding-bottom: 10px; padding-top: 20px; ...

htmlcssangularformsflexbox

The Modal Textarea refreshes each time it is clicked

Whenever I try to type on the modal with 2 textareas, it stops and exits the textarea. The issue seems to be with onChange={event => setTitle(event.target.value)}, but I'm not sure how to fix it. <Modal.Body> <form onSub ...

javascripthtmlreactjsbootstrap-modal

What is the best way to reset the values in react-multiple-datepicker?

Having trouble clearing values assigned in react-multiple-datepicker library. import MultipleDatePicker from "react-multiple-datepicker"; import React from "react"; class Addjob extends React.Component { constructor(props) { super ...

javascriptnode.jshtmlreactjscss

Ensure that the footer remains at the bottom of the webpage, without being positioned as fixed

I am encountering an issue on my work2 Website where the footer is not staying at the bottom of the page when there is limited content. I have searched extensively on Google, YouTube, and CSS tricks for a solution, but have not found one that works for my ...

htmlcss

Positioning elements next to each other in jQuery on mouse over - while also addressing scrolling issues in a div

After tinkering with this interesting concept of mouseover combined with absolute positioning divs on a jsFiddle, I encountered some unexpected results. The code was inspired by a stackoverflow thread on positioning one element relative to another using j ...

javascriptjquerycssscrollbaronmouseover

Obtain the result and retrieve it using `window.angularComponentRef.zone.run`

In my work, I have been able to successfully call angular functions within a component through a static file. For reference, you can visit this link: How to expose angular 2 methods publicly?. The method suggested in the link involves using Zones in Angul ...

angular

Having issues resolving 'fs' or 'path' in Edge-js and Angular projects

I'm currently working on an Electron Angular application that utilizes electron-edge-js to seamlessly transition between Angular and C# code without the need for a separate server. Everything seems to be running smoothly until I actually try to call e ...

c#angularelectronedgejs