as shown in the image and in the circled parts, i created a class called clsTest. in this class i would like to change the
position and some propertities of the circled element in red as shown in the image. the circled elements in red are composed of
input field and icon of the calendar.
when i activate the elements inspector in chrome, the class clsTest is never present or listed among other classes. in other words
,as shown in the image, the class .clr-control-container is shown but the class clsTestis not!!
please let me know how to correctly assign a class and be able to modify its attributes to change the position and properties of
the circled element in red.
html:
<clr-date-container class="clsDateContainer">
<label id="idDateOfSprayLabel">
<p>Date:</p>
</label>
<input id="idDateOfSprayValue" class="clsTest clr-control-container" clrDate type="date" placeholder="Specify date of spray" [(ngModel)]="iDatePasser.dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)" name="dateOfSpray"
value="2021-07-21" min="2021-01-01" max="2090-12-31" />
</clr-date-container>
css:
.clsTest{
bottom: 10;
right: 0px;
left: 430px;
top: 174px;
width: auto;
}
image:
I assume the default Angular style encapsulation is causing this behavior here.
Try adding the pseudo class :host to your css like this:
:host .clsTest{
bottom: 10;
right: 0px;
left: 430px;
top: 174px;
width: auto;
}
The :host tells Angular to apply the styles directly on DOM elements (not based on components/templates). Optionally, you could also add ::ng-deep to apply styles to all children of the selected element as well (where the CSS selector matches as well).
The input has the class at the moment
To see the classes of the input element just click on it(in the Element section of chrome developer tools), I specify it on the image.
Keep in mind the sequence of the classes you give to an element is important. The second class will override the first one.
Related
My element has the following CSS style:
#span {
position: absolute;
top: 100px;
left: 10px;
}
Is there a way to read the position type with JavaScript? I've tried these two approaches:
document.getElementById("span").getBoundingClientRect()
document.getElementById(id).style.position
Neither fetches the position. Is there a better way to go about doing it or an actual way to do it?
Yes, you can use Window.getComputedStyle() with a reference to your element to get the value of styles applied via CSS.
The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
The important part is that all stylesheets are factored in.
const foo = document.getElementById('foo');
console.log(`foo.style.position: ${foo.style.position}`);
console.log(`foo.style.top: ${foo.style.top}`);
console.log(`foo.style.left: ${foo.style.left}`);
console.log(`getComputedStyle(foo).position: ${getComputedStyle(foo).position}`);
console.log(`getComputedStyle(foo).top: ${getComputedStyle(foo).top}`);
console.log(`getComputedStyle(foo).left: ${getComputedStyle(foo).left}`);
#foo {
position: absolute;
top: 100px;
left: 10px;
}
<div id="foo">Hello, there!</div>
If you're after the actual location on the page instead of the value of the styles applied, you should check out Retrieve the position (X,Y) of an HTML element.
I want to be able to change my navbar position on the fly adjusting remaining content accordingly.
So, I have a functiona website. There is a menu navbar on top by default. What I did is added an 'edit' button to that menu so that when you click it, you get a list of 4 checkboxes with the ability to choose if you want that menu positioned on top (default), left, right or bottom with the other content moving accordingly (e.g menu on the left, content goes slightly right, etc). So basically, I have something like this:
// css for menu positioning to the left
.navbar-left {
width: 25%;
height: auto;
}
.content-right {
position: relative;
left: 200px;
}
// css for menu positioning to the bottom
.navbar-bottom {
position: relative;
bottom: 0;
left: 0;
height: 200px;
}
.content-up {
position: relative;
bottom: 200px;
}
And in JS I do something like this
if($("#left"):checked){
$("#menu-bar").addClass("navbar-left");
$("#content").addClass("content-right");
} else if ($("#bottom"):checked){
$("#menu-bar").addClass("navbar-bottom");
$("#content").addClass("content-up");
}
Now, I have much more styling than this, but it is irrelevant to the issue at hand. The problem is when I choose 'left' it styles properly but when I change it to 'bottom' after that it still uses the styles from 'left' positioning and adds the new ones to it.
Right now I solved the issue by removing the previous classes with .removeClass() method, like that:
if($("#left"):checked){
$("#menu-bar").removeClass("navbar-bottom navbar-right").addClass("navbar-left");
$("#content").removeClass("content-up content-down").addClass("content-right");
} else if ($("#bottom"):checked){
$("#menu-bar").removeClass("navbar-right").addClass("navbar-bottom");
$("#content").removeClass("content-down").addClass("content-up");
}
Basically, right now I have about a hundred lines of just adding classes of the chosen positioning while removing all the classes of 3 other choices that I added each time.
So, finally the question: Is there any other way to strip all the classes that were used before (just set everything to initial values like when the page was loaded) instead of deleting all these classes by hand?
I haven't ever tried resetting the classes to their initial state, but you can certainly clear them all off of a single element in one line of code:
To replace all existing classes with another class, we can use .attr( "class", "newClass" ) instead.
source: https://api.jquery.com/removeclass/
You could probably combine that with the .toggleClass or another method.
If I had to sit down and do it right now, based on my understanding of your question I'd just hide the original elements and add new elements with the classes that you'd like, then to revert delete the new elements and restore the original one.
I have a round < button > with a < div > inside that represents a Unicode image. Currently the button is set to border-radius: 12px; height: 24px; and width: 24px; and the < div > is to font-size: 17px. The < div > Unicode image sits inside but not centered and the button is slightly off to the side.
How can I get the < div > to center inside an oval button despite what font-size the < div > is?
EDIT
I want to create a circle/round button with an emoji center to the middle of the button despite the button's size or the emoji image's size.
CSS for the button and emoji image for div:
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
And round/circle button with emoji image inside:
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
But it is not centered.
And is there a way to just back the emoji image alone to be clickable for a method?
First off:
A <div> is a block element by nature. It will always become 100% wide. If you want it to not be 100% wide, give it a display:inline-block so it won't get bigger than it needs to be. Then give it a margin:0 auto; or a text-align:center on the parent to center it.
HOWEVER, You are not allowed to put <div>s inside of <buttons>. it is invalid HTML
See this answer for more information:
Why can't a <button> element contain a <div>?
Or, you could read here, from W3 that only phrasing content is expected to be used within a button:
https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
If you do not know what phrasing content is, See this page:
https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content
-- if you are looking into styling buttons specifically, maybe this very short tutorial would help:
http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Here is a fiddle of a working button like yours:
https://jsfiddle.net/68w6m7rr/
I honestly didn't have many problems with this. I only replaced your <div> with a span, that's it.
can you post your code?
You should NOT need a div inside the button. If you need the button to have a specific style give it a class. You could do something like this
CSS:
button.something {
padding: 25px;
border-radius: 100%;
font-size: 20px;
border: none;
}
HTML:
<button class="something">👌</button>
For clean and valid code, you'd better use a :before or :after pseudo-element. This would also take care of the centering by default.
It's even easy to set the content. Either in css only, like this:
1.
button:before {content:"\25b6";}
(put your unicode value there and classes/ids as needed, then specify them in turn in css)
2.
Or if you need to specify the value in mark-up, drop a custom data-* attribute like this:
<button data-myunicode="\25b6"></button>
with each button taking it's own value, then drop this single line in css:
button:before {content:attr(data-myunicode);}
Before answering, let's clear some things out.
div is a block level element, used in an inline element, which is the button element. Browsers will consider this invalid and will fix it by removing the block element from the inline element. For more about CSS concepts like box model, box generation please refer to these resources:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Also, if you are using an IDE, make sure you have installed linting/hinting tools to help you out. These tools can help you in code authoring so, make sure you have them. If you are using software like VSCode or Sublime Editor, there are many free code analysis tools out there.
Let's go back to the code now.
You said
I want to create a circle/round button with an emoji center to the
middle of the button despite the button's size or the emoji image's
size.
I went ahead and created a plunk here where I demonstrate this. Essentially, I wrapped the button around a div which serves as a container and through some CSS magic, I made it to have the same height as its width. More on that you can find at this SO answer.
The #emoji-button then has a border-radius: 100% in order to be round, width is inherited from the parent, meaning it has the same as the container and it position is absolute in order to fit in the container.
The #thumb-emoji has changed to a span element. By user agent styles it has text-align:center.
<div class="button-group">
<button type="submit" id="emoji-button">
<span id="thumb-emoji"></span>
</button>
</div>
CSS:
.button-group {
position: relative;
width: 100px;
}
.button-group:before {
content: "";
display: block;
padding-top: 100%;
}
#emoji-button {
width: inherit;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 200%;
}
You can change the .button-group width to whatever width you want, it will still keep its 1:1 ratio.
You can use then media queries on .button-group to adjust the font-size of your #thumb-emoji, by setting your desired breakpoints.
so I've been toying with this calendar-ish thingy for a bit:
Grid of divs (mimicking a table)
Hovering over a table cell displays a tooltip with 2 icons each consisting of a div with :before and :after elements
Icons change colour depending on colour of cell hovered and that of its previous sibling (cell's colour class is applied to the icon).
Stripped down fiddle: http://jsfiddle.net/e9PkA/1/
This works fine in every browser but IE8 and below (IE lte 7 and I will never friends, but IE8 would be nice to have).
IE8 notices the change of classNames and updates the divs' colour accordingly but completely ignores the colour changes implied by the :before and :after declarations, e.g.:
.wbscal_icon_arrival:before {
width: 12px;
height: 4px;
left: -8px;
top: 6px;
background-color: silver;
}
.wbscal_icon_arrival.wbscal_full:before {
background-color: #ff0000 !important;
}
In the fiddle above, the :before/:after elements are coloured exactly once: the first time the tooltip is shown.
In another version it would update everytime I'd move the mouse out of the "table" div, but not if the tooltip is hidden when hovering a "cell" div border.
I've tried force-triggering repaints by adding/removing other classes to/from the element/its parents/the body, editing/accessing style attributes and whatnot so I guess it's not your average repaint problem.
Is there a JS hack that fixes this and forces :before/:after to update?
Been trying to figure out the same thing. Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content. So I've modified your example here (just CSS): http://jsfiddle.net/lnrb0b/VWhv9/. I've added width:0 and overflow:hidden to the pseudo elements and then added content:"x" to each colour option where x is an incrementing number of spaces.
It works for me; hope it helps you!
Adding content:"x" to each declaration of the psuedo-elements and incrementing the number of spaces for each different state of the element DEFINITELY FIX the issue.
Basically, the idea is to tell IE8 that the content is slightly different in each state, so redraw the content for each state. So, if the content is the same, we 'fake' it with empty spaces. BRILLIANT!!
#lnrbob really nice answer!!
i had the problem that i used the before and after pseudos of a checkbox input, which are using some parent attributes for displaying their content (due to being easily able to implement translation there).
so they look like:
input:before {
content: "" attr(data-on) "";
}
input:after {
content: "" attr(data-off) "";
}
and the markup looks like this:
<div class="switch off" data-on="It is ON" data-off="It is OFF">
<input id="switch" name="switch" type="checkbox" class="off">
</div>
and the modification i do in jquery looks like this:
var mSwitch = $('div.switch'),
on = $.trim(mSwitch.attr('data-on')),
off = $.trim(mSwitch.attr('data-off'));
// remove any spaces due to trim
mSwitch .attr('data-on', on);
// add a space
mSwitch .attr('data-on', on + ' ');
mSwitch .attr('data-off', off);
mSwitch .attr('data-off', off + ' ');
and i call this modification after setting/removing classes to change the style of the "checkbox" which is rather a switch button in this case :D
so this way you do not get a stackoverflow from too much space characters if some hardcore testers auto click the input for an infinite time ;)
like that:
<div class="switch on" data-on="ON" data-off="OFF ">
Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content, so you can modify like below:
.wbscal_icon_arrival:before {
width: 12px;
height: 4px;
left: -8px;
top: 6px;
background-color: silver;
content: '';
}
.active .wbscal_icon_arrival:before {
background-color: gold;
content: ' ';
}
I am having a similar issue in IE11 and Edge right now.
on hover, I try to change Content from 'v' to 'V'.
=> Doesnt work on any microsoft browser.
However, if I change the letter to something else ('w'/'W') or two letters('vV'), the icon changes. Yay Microsoft.
When a button is clicked i create a DIV and make it like a pop-up window, but i want the background around this box to be 'shadowed' and that it's not possible to click on the links and inputfields there.
How can you make this with javascript?
Directly inside the <body> create a <div> and give it an id. In your <style> tag, give it the following style attributes (you can add more if you want):
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
background-color: rgba(0,0,0.5);
Raise its z-index as you see fit (make sure the pop-up has a higher z-index, though). You can also adjust the opacity of its color by changing the 4th value of the rgba() object, ranging from 1 (opaque) to 0 (transparent). If it doesn't occupy the entire page, make sure the <body> and <html> tags don't have style attributes giving them margins, padding, or borders.