Using numbers from CSS class as CSS values - javascript

I'm trying to streamline CSS styling. Is it possible to use a number in the CSS class as a value to be applied? Like parameters in a PHP or JavaScript function
Ex.
<div class="pad-left-35">Div with 35px padding left </div>
<div class="pad-left-10">Div with 10px padding left </div>
.pad-left-[value] { padding-left: 'value'px; }
.color-[value] { color: 'value'; }

As of now, it's impossible, and it will probably always be. However, when the new CSS drafts will be approved, you will be able do to a similar thing with custom attributes. For example, if you have <div padding="35">...</div> you will be able to set its padding like this:
div /* or whatever selector you would like to use */ {
padding: attr(padding px);
}
You can read more about this here. Unfortunately, this draft has not been approved yet. So, until then, you will either set some standard paddings - like padding-4, padding-8, padding-12, ... - or use a SASS/SCSS foreach loop, like this:
#for $padding from 1 to 13 {
.padding-#{$padding} {
padding: $padding + px;
}
}

I'm not sure if this is what you're looking for, however, using :root, you can add parameters as shown in the code below, hope this helps.
:root {
--main-bg-color: coral;
--padding: 5px;
}
#div1 {
background-color: var(--main-bg-color);
padding: var(--padding);
}

Related

Change div height back to dynamic

I have the code below to change the height of a div to equal that of its parent.
$('#infodiv').css("height",$("#infocol").outerHeight());
The problem is that the height of the child element #infocol, is no longer dynamic if i load new content inside of it. Is there a way to make the child element dynamic again after i have set the height with the above code?
I have tried to reconfigure its height after the content is loaded with the same code, but so far that hasn't worked.
There is a way you can solve this issue using ResizeObserver
However, note that it's not supported in some browsers, check the page I've linked for further details.
Here is a working example:
$(function () {
$("#add-content").click(function () {
$(".first-col").append("<p>More dynamic content...</p>");
});
// keep the second-col same size as first
$(".second-col").css('height', $(".first-col").outerHeight());
const resizeObserver = new ResizeObserver(function (entries) {
for (let entry of entries) {
// once one of the entry changes we want to update the other size too!
$(".second-col").css('height', $(entry.target).outerHeight());
}
});
// We need to pass the actual DOM node, hence the [0]
resizeObserver.observe($(".first-col")[0]);
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 23.5rem;
margin: 1rem auto;
}
.first-col {
background: cornflowerblue;
}
.second-col {
background: crimson;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="first-col">
<p>Some content</p>
<p>Some content</p>
<button id="add-content">Add content</button>
</div>
<div class="second-col"></div>
</div>
Though, I suggest before implementing it like that, that you look into how flex works or simply even min-height might be the proper tool for the issue here. If you're out of options, feel free to use ResizeObserver, but it's considered an exotic solution!

How to move placeholder text few pixels to the right in select?

I've been stuck on this for couple of hours trying to:
Move placeholder text (Search) 10 pixels to the right in my select component and
decrease the height of the field (maybe 5px less) but no luck so far.
Can anyone point me in the right direction please? thanks a lot in advance! here's my code:
LIVE DEMO
<mat-form-field [floatLabel]="'never'">
<mat-label>Select</mat-label>
<mat-select disableOptionCentering
panelClass="my-mat-select-container">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
Actually, you need to overwrite angular material style classes to achieve custom styling.
I have done a bit here, please put below css classes in styles.scss and see if you get what you are expecting. Feel free to play with the pixels to adjust labels.
// dropdown label
.mat-form-field-label {
padding-left: 10px;
}
// dropdown label
.mat-form-field-flex {
padding-top: 6px!important;
}
// dropdown label
.mat-form-field-appearance-fill .mat-form-field-infix {
padding-bottom: 6px!important;
}
// dropdown options style
.mat-select-panel .mat-optgroup-label, .mat-select-panel .mat-option {
height: 38px!important;
}
// dropdown options style
.mat-select-panel .mat-option {
padding-left: 25px !important;
}
// selected value text style
.mat-select-value-text {
padding-left: 10px !important;
}
Note: To avoid using import you will have to give more explicit CSS handles.
e.g. For below code
<custom-directive>
<mat-label >Select</mat-label>
</custom-directive>
, you should write css directive as :
custom-directive mat-label {
// css here
}
You can use inspect element feature of chrome to know correct CSS handlers, below is the example image.
Stackblitz code : https://stackblitz.com/edit/angular-fjy4y5-r8urqh?file=src/styles.scss
You can move the placeholder text by adding padding like below
::ng-deep .mat-form-field-label-wrapper label mat-label {
padding-left: 10px;
}
and for the height try
::ng-deep mat-form-field .mat-form-field-wrapper .mat-form-field-flex {
height: 50px;
}

How to force :fullscreen pseudoclass to follow the same rules as :not(:fullscreen)?

I am changing the background-color dynamically, and I need the same thing to happen in fullscreen as well. Unfortunately pseudoclasses styles cannot be modified straight from javascript.
Is there any way in which I can say that the :fullscreen class should follow the same rules as :not(:fullscreen)
Any method to change :fullscreen styling from javascript dynamically (without having any css and changing the class of the element), would also be appreciated.
I would prefer a no-jquery solution, but if it has to be jquery, then it has to.
You can use CSS custom properties for this. (Not supported by MSIE).
document.body.addEventListener("click", event => {
const t = event.target;
if (t.dataset && t.dataset.color) {
document.body.style.setProperty("--my-color", t.dataset.color);
}
});
body {
--my-color: yellow;
}
div {
display: inline-block;
background: var(--my-color);
height: 2em;
width: 2em;
border: solid black 1px;
}
<div class="one"></div>
<div class="two"></div>
<button type="button" data-color="red">Red</button>
<button type="button" data-color="blue">Blue</button>
You could also directly modify the CSS rulesets.
However, if :fullscreen {} and :not(:fullscreen) {} have identical rules, then you might as well just use * {}

Merging values from 2 CSS classes into 1 and sum up the margins and paddings

This is in my client's project requirements. I am just giving example with margin only. if there are two CSS classes and have properties like.
CSS
.selector-1 {
margin-top: 20px;
}
.selector-2 {
margin-top: 30px;
}
HTML
<div class="selector-1 selector-2">content</div>
We all know it will overwrite the properties from one class to another, but in this case, a client wants to add both margin-top and apply. So he is expecting margin-top:50px.
I know there is no way to do it in CSS.
Can anyone suggest something? I want to avoid using JS/jQuery. However, at the end, I can use, if it is possible to do it.
you can not do it with pure css anyway, because for do it you must get margin-top of classes and sum them.the problem is right here you can't access to another class through pure css.
but you can do it with javascript.
Why don't you:
.selector-1.selector-2 { margin-top: 50px }
Will give you 50px margin-top as both .selector-1 and .selector-2 margin-top's are combined to one margin-top called .selector-1.selector-2.
You can't do it with pure CSS, so here is the solution with jQuery https://jsfiddle.net/z5pdt17j/1/
$('body').append('<div class="selector-1 hidden" id="div1"></div><div class="selector-2 hidden" id="div2"></div>');
var tmargin = parseInt($('#div1').css('margin-top')) + parseInt($('#div2').css('margin-top'));
$('div#divTest').css({
'margin-top': `${tmargin}px`
});
$('#div1 , #div2').remove();
.selector-1 {
margin-top: 20px;
}
.selector-2 {
margin-top: 30px;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector-1 selector-2" id="divTest">content</div>
Hope this will help you.
try this with jquery : easy solution
<div data-margin1="20" data-margin2="30" class="content">content</div>
(function(){
let content = $('.content');
let margin1 = content.data('margin1');
let margin2 = content.data('margin2');
content.css({'margin-top':margin1+margin2});
}())

Created div elements' random margins not working

Problem and source code
I'm trying to create <div>s within another <div> at the click of a button. When the button is clicked, a new inner <div> is created (within the outer <div>) with a unique id. I have this part working but here's where I'm running into an issue: I want each inner <div> to have a random margin-top.
Javascript
function pressButton() {
number += 1;
makeDiv(number);
};
function makeDiv(x) {
var innerDiv = document.createElement("innerDiv" + x);
outer.appendChild(innerDiv);
innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + ";display:inline-block;width:48px;height:48px;background-color:#000;");
};
CSS:
#outer {
position:absolute;
white-space:nowrap;
height:118px;
overflow:auto;
width:100%;
padding:2px;
}
Result (after button is clicked 4 times)
<div id="outer">
<innerDiv1 style="margin-top:15;display:inline-block;width:48px;height:48px;background-color:#000;"></innerDiv1>
<innerDiv2 style="margin-top:23;display:inline-block;width:48px;height:48px;background-color:#000;"></innerDiv2>
<innerDiv3 style="margin-top:37;display:inline-block;width:48px;height:48px;background-color:#000;"></innerDiv3>
<innerDiv4 style="margin-top:0;display:inline-block;width:48px;height:48px;background-color:#000;"></innerDiv4>
</div>
The result (which I got from inspecting the inner elements in my browser) looks like everything worked - all the margin-tops are random like I wanted. However, the visual result is this:
As you can see, the black inner <div>s all have the same margin-top. What am I doing wrong? How can I make the created <div>s all have random margin-tops?
The CSS spec requires that a length (other than zero) that is missing a unit be treated as an error (and thus ignored). Therefore, add px to the end of your generated margin number, and all should be well.
Live Demo
Description
This happens, because you set the display:inline-block; property. This makes them all to be in one line, so they will allign to the innerDivx that has the highest margin-top.
Delete the display:inline-block; property and give them float:left;. If you want to keep the gap between them, also add margin-left:5px;. And don't forget that margin-top's value needs a unit. I think you wanted to use px.
Also <innerDivx> is not a valid HTML tag. You should change them to a <div> and use innerDivx as an id attribute. Also your tags use almost the same CSS styles so you should put the same ones to a class and add the class instead.
Full solution code
HTML
<button id="button1">Add box</button>
<div id="outer"></div>
JavaScript
var number = 0;
document.getElementById("button1").addEventListener("click", pressButton, false);
function pressButton() {
++number;
makeDiv(number);
};
function makeDiv(x) {
var innerDiv = document.createElement("div");
outer.appendChild(innerDiv);
innerDiv.className += " box";
innerDiv.setAttribute("id", "innerDiv" + x);
innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + "px;");
};
CSS
#outer {
position: absolute;
white-space: nowrap;
height: 118px;
overflow: auto;
width: 100%;
padding: 2px;
}
.box {
float: left;
width: 48px;
height: 48px;
background-color: #000;
margin-left: 5px;
}
This is likely caused by the position model used for inline-block elements - they're all being vertically-aligned at their bottom line in a row.
I suggest that you simplify this and use position: block with float: left
http://jsfiddle.net/2y5bJ/4/
I also suggest that you stick to standard elements to ensure cross-browser compatibility - don't create your own elements called innerDiv1 etc, but use div elements with unique IDs.
function makeDiv(x) {
var innerDiv = document.createElement("div");
outer.appendChild(div);
innerDiv.setAttribute('id', 'innerDiv' + x);
innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + "px;");
};
I think there is no tag available with name
<innerDiv1>
This may be the cause.

Categories