I am working on an angular/bootstrap web app and need to set a left margin of 40px on md, xl, lg devices and 0px on sm device. I attempted to create a spacer in styles.scss like this:
$spacer: 1rem;
.ml-6{
margin-left:($spacer*2.5);
}
Then in my HTML, I used the classes like this:
<div class="ml-md-6 ml-sm-0 ml-xl-6 ml-lg-6">
//some code
</div>
However, the styling is not being applied correctly. Can anyone help me identify what I might be doing wrong?
If you want to customize the spacing options in your Sass file, you can add new sizes to the $spacers map.
The original $spacer variables/map can be found in _variables.scss...
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge(
(
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3)
),
$spacers
);
To add a new size (6th size) to this map, you would need to include...
$spacers: map-merge(
(
6: ($spacer * 2.5)
),
$spacers
);
Ensure that you import it after the _functions.scss, _variables.scss, and _mixins.scss files, but before other Bootstrap sass files.
Here is an example of how to include it:
// import bootstrap 4 src files
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
$spacers: map-merge(
(
6: ($spacer * 2.5)
),
$spacers
);
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
...
This hypothetical scenario suggests placing the new 40px (2.5) margin/padding utility class between the existing default 4 and 5 classes.
You may need to update any current uses of the 5 classes to 6, making the new 40px (2.5) class now become 5.
$spacers: map-merge(
(
5: ($spacer * 2.5),
6: ($spacer * 3)
),
$spacers
);
It's uncertain if this change will impact anything beyond margin and padding utility classes. It has not been thoroughly tested.
I am facing an issue where I have brought a span to display a loading image inside the v-Dialog of a vuejs screen. The problem is that the v-dialog has a z-index of 220 set as inline style, causing my new span (loading image) to appear below the v-dialog. ...
In my project using react, I've implemented styled-components for styling. One requirement is to have a shared loading background. Here is the code snippet of how I defined it: const loadingAnimation = keyframes` 0% { background-position: 95% 95%; } ...
Below is the code I am using to display an accordion in a Fancybox popup. However, I do not want the accordion to be visible on page load. If I hide it, the content inside also gets hidden when showing the accordion in the popup. When user clicks on Click ...
I am currently developing a basic jQuery script that will enable the background color of the clicked element to change. Below is the code I have so far: <dt> <input id="p_method_banktransfer" value="banktransfer" type="radio" name="payment[metho ...
I am striving to optimize this section for responsiveness. It looks fantastic on larger viewports, but as we start shrinking down, for instance, on a viewport around 930px, I'm facing difficulty in keeping the image perfectly aligned as shown in the i ...
Is there a way to create a custom class that extends the EventTarget DOM API class? Let's say we have the following class: class MyClass extends EventTarget { constructor() { super(); } private triggerEvent() { this.dispatchE ...
I'm trying to create a layout with 3 <div> elements in one horizontal line, each with a width of 33.33%. When hovering over one div, I want its width to expand to 50% while the other two shrink to 25%. <div id="A"></div> <div id= ...
Is there a way to break an item in a flexbox and display it at the beginning of the next column, based on the max height of the box? See the image below for reference. .flex{ display:flex; flex-direction:column; flex-wrap:wrap; max-height:200px ...
Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...
When I iterate through a list of objects using the variable setting, their names are accessible in this format: setting['_name'] The setting names follow this specific format: <name>(<parameters>) I also need to display data from ...
Having trouble with bullets displaying in IE9+? Check out this link for more information: I've attempted to fix the issue by creating an ie.css file using conditional comments, but it hasn't worked. Can anyone provide assistance? ...
Initially, the resolution perfectly matched the width of mobile devices. However, after changing the background image, for some reason, the width no longer fits the device length precisely. I've tried resetting to a point where the resolution was fine ...
<body ng-app="myAPP"> <div ng-controller="employeeCtrl"> <table style="border:1px solid gray"> <tr> <th>Employee Name</th> <th>Employee Address</th> <th> ...
I recently attempted to dockerize an Angular application and encountered some issues. I experimented with two different Dockerfiles in an attempt to resolve the problem but was unsuccessful. The first Dockerfile I tried is as follows: FROM node:latest as n ...
After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...
We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...
After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically. View My ...
Having trouble displaying a text message in the Bootstrap modal body when there is no data available in the model. I have multiple cards in the model, and if I click on the skip or done buttons, each card will close. However, if there is only one card in t ...
As a novice in the world of Angular 6, I am currently exploring the Angular CLI and trying to grasp the file structure. My goal is to utilize SCSS for creating a unified global stylesheet. However, during compilation, an error keeps popping up: ERROR in . ...
I've been exploring a solution to achieve a similar functionality where clicking or hovering on headings in a column brings up corresponding text in another column. My idea is to use list items with a carousel for this purpose, but I'm facing so ...