For example:
<v:roundrect style="display:block;width:100px;height:100px;" fillcolor="#eee">
Hi
<v:roundrect style="display:block;width:50px;height:50px;" fillcolor="#c00">
Hey
</v:roundrect>
</v:roundrect>
I can't see the background of the inner roundrect when I use this markup.
Any ideas?
No VML shapes can be nested inside each other. You need to position them so they overlap correctly.
<div style="position:relative;">
<v:roundrect style="display:block;width:100px;height:100px;" fillcolor="#eee">
Hi
</v:roundrect>
<v:roundrect style="display:block;width:50px;height:50px; top: 25px; left:25px; position:absolute;" fillcolor="#c00">
Hey
</v:roundrect>
</div>
Related
I'm an accessibility expert, and my CSS has gotten quite rusty, but I need to quickly deliver an example for placing an element visually after the other, although in the DOM it is the other way round.
In the following code, the <time> element should visually appear before the heading, but for accessibility reasons, in the DOM it is placed after it.
<article>
<h2>Wahlresultate bekannt gegeben</h2>
<time datetime="2020-08-18">Dienstag, 18.8.2020</time>
<p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p>
</article>
In early days, we needed to use hacky absolute positioning to achieve something like that. What should I use for this today? Flexbox? Grid? And how would it be accomplished?
Thanks a lot.
You can achieve this with Flex Box, specifically the order property.
Be careful using this in every scenario though, having a visually different order to DOM order is normally an accessibility nono (although in this case it seems fine). Use it sparingly!
article {
display: flex;
flex-direction: column;
}
h2 {
order: 2;
margin-top: 0.5em;
}
time {
order: 1;
}
p{
order: 3;
}
<article>
<h2>Wahlresultate bekannt gegeben</h2>
<time datetime="2020-08-18">Dienstag, 18.8.2020</time>
<p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p>
</article>
To make it easier to control I would instead add a <div> around the elements you want to swap around and make that display: flex, this way you don't have to define the order of everything within the article.
I have included both versions incase you are unable to change the markup.
.container {
display: flex;
flex-direction: column;
}
h2 {
order: 2;
margin-top: 0.5em;
}
time {
order: 1;
}
<article>
<div class="container">
<h2>Wahlresultate bekannt gegeben</h2>
<time datetime="2020-08-18">Dienstag, 18.8.2020</time>
</div>
<p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p>
</article>
Maximum compatibility
As this is marked as accessibility I would caution you on the use of flexbox. Flexbox does not work in IE 8, 9 etc..
This is a problem because a lot of screen reader users still use IE8, IE9, IE10 etc.
For that reason you should either use a flexbox polyfill or instead revert to using absolute positioning as shown in this fiddle.
I need to create select field without float label but I want to have placeholder and default value.
I read docs https://material.angular.io/components/form-field/overview#floating-label and tried to do it by myself.
<mat-form-field [floatLabel]="never">
<mat-select placeholder="All categories" [formControl]="catForm" multiple> //First opportunity for use placeholder
<mat-option *ngFor="let category of categories" [value]="category.name">
{{ category.name }}
</mat-option>
</mat-select>
<!-- <mat-placeholder>All categories</mat-placeholder> -->//Second opportunity for use placeholder
</mat-form-field>
And anyway I get float label. That am I doing wrong?
The correct way is that:
<mat-form-field floatLabel="never">
Square brackets for variables.
Sergei R has the correct usage for basic inputs (input type=text) but for the dropdown (select), it simply doesn't work. Even the Angular Material docs (https://material.angular.io/components/form-field/overview#floating-label) have sample code that (when augmented for this specific scenario, floatLabel="never"), indicate that it doesn't work: https://angular-vij8al.stackblitz.io
I added the fourth example of how to get the placeholder effect without the label (but you lose the ability to use more complex text).
You can remove float label even on mat-select by putting the following into your global styles.scss:
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
display: none !important;
}
If you want to apply this to only one mat-select, you can just specify it further in the above code.
I had given up when I saw the previous answers that said it simply can't be done, until I saw this answer for a different question about floatLabel: https://stackoverflow.com/a/66531080/14100714
Just Use this in scss:-
::ng-deep .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
display: none !important;
}
I searched all around stackoverflow but I couldn't find an answer for it. Here is the problem:
I have two divs, one on top of the other. I want to have the top div to adapt the height depending on the height of the below div.
<div id="parent" style="height:300px">
<div id="div1" style="height:auto"></div>
<div id="div2" style="height:45px"></div>
</div>
This because I intend to show/hide the bottom div and the top div must resize to fill the parent div.
I forgot to mention that the first div (the one that needs to adapt) has long content with overflow:scroll
Can you help me please?
Thanks
For this you can display:table property. Write like this:
#parent{
display:table;
height:300px;
width:100%;
}
#parent > div{
display:table-row;
}
#div1{
background:red;
}
#div2{
background:green;
height:45px;
}
Check this http://jsfiddle.net/7NuFr/
In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.
The css i am using to configure this:
.v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
float: right;
display: inline;
margin-right:0px;
margin-left: 268px;
margin-top: -18px;
padding: 0 3px 2px 0;
line-height: 11px;
}
How can i change the spacing so that both tabs (vaadin components) move together?
You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.
There's no way of telling in the CSS that you posted which items are being manipulated. If both of these items, "help" and "Instructions", are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.
The general structure should look like this:
CSS:
#help, #instructions {
float: right;
}
div#wrapper {
margin-left: 268px;
] /* wrapper containing both items, "help" and "Instructions" */
HTML:
<div id="wrapper">
<div id="help"></div>
<div id="instructions"></div>
</div>
I think that you are having some inheritance problems.
I would suggest first checking what inheritance this property is following, and if you still have problems I would then create separate divs for Help and Instructions, where instructions has a different right margin. I hope this helps! This type of problems are stubborn.
I am trying to achieve a layout where items will float like newspaper/magazine article sections. It is something similar as what jQuery's Masonry does. But I was trying to achieve that only using CSS3. I thought perhaps the box display property could do it. Although after trying for few times, I wasn't able to make the items slide down after the parent column width as fulfilled.
Is there any way to achieve this layout only using CSS?
The markup would be something like this:
<article>
<section>...</section>
<section>...</section>
<section>...</section>
<section>...</section>
</article>
Here a section would float left and adjust itself on the columns queue where better fit (and not bellow the baseline of the previous one, as simple float does).
It's possible using CSS columns. Here is a good explanation.
CSS:
div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }
div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }
HTML:
<div>
Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!
...and so on and so forth ad nauseum.
</div>
Also, I found this site by searching "CSS Masonry" on Google. It was the second result.