I have a little Bootstrap/Font-Awesome alert that looks like this:
The HTML for it looks like this (I inlined the custom CSS just to ask my question):
<div class="alert alert-success" role="alert">
<i class="fa fa-check" style="float: left; margin-right: 10px;"></i>
<p style="overflow: hidden;">{{ $discount }}</p>
</div>
This is the exact look that I want, with the checkmark in its own "column" so that the text does not wrap underneath.
This HTML/CSS works totally fine as is, but just to be curious, I tried to accomplish the same layout by changing the <i> tag CSS from float: left to display: inline-block. However, this caused the whole block of text to wrap underneath the checkmark. Is there another way to accomplish the layout in my screenshot without using floats?
Edit:
I just tried giving both the <p> and <i> tags display: inline-block, but that didn't work. It caused the <p> text to wrap underneath the <i> icon.
I put together a jsfiddle right here to play with it: https://jsfiddle.net/9c7ym3sk
You can do using display:table and display:table-cell. like following:
.alert{
display: table;
}
.fa{
display: table-cell;
vertical-align:top;
}
p{
display: table-cell;
padding-left:5px;
}
Fiddle
By default <i> is an inline element while <p> is a block level element which takes full width of the browser window. If you set <i> as inline-block then subsequent block level element i.e <p> will drop in next row so you need to set inline-block property on p too.
In another way you can use float: left on <i> and overflow: hidden on <p>. It will also work fine...
Add some max-width to <p> and vertical-align: top; to both elements like this.
http://prntscr.com/a6ten4
When content inside <p> becomes too much then it causes <p> to drop below.
So apply max-width to prevent this...
Related
Introduction
My question is quite specific and I tried a lot of solutions from SO, but they don't work, because my problem is related to accessing dynamically generated DOM.
I have the following generated HTML (can't change anything in it, except the CSS):
<div style="flex: 1; z-index: 2;">
<input type="text" />
</div>
<span style="display: none">X</span>
<span>A</span>
The 'A' in the span generates arrow icon for select/drop box. But the span goes below the div with the input.
The question:
I want to align the second span (the first has display: none, so probably not a problem) to stick to the div. I don't have access to the dynamically generated HTML, but I kinda have access to the CSS (using ::ng-deep to access the generated html with Angular 9).
How to align the span to stick with the div?
What I've already tried, but didn't work:
I added float: right to the span and it works, but it's on a new line.
I changed the div to be display: inline-block, but it doesn't work. I tried to make the div and the span overflow: hidden; white-space: nowrap, but still no success.
I would appreciate any tips to try to achieve this.
Wrap the whole tags with div, and give display: flex.
It will be like this.
<div class="wrapper">
<div style="flex: 1; z-index: 2;">
<input type="text" />
</div>
<span style="display: none">X</span>
<span>A</span>
</div>
In this code, wrapper class has display: flex.
This attribute set all inside tags in one line because flex-direction is row.(default)
I wrote simple CSS to align text using the w3schools example with:
text-align:center
When I add an underline in the same format, the underline works.
Here's the snippet:
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
Here's the w3schools page (the align text section):
https://www.w3schools.com/css/css_align.asp
In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.
.CenterIt {
text-align:center;
display:block;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
The display property of span by default is inline. i.e.,
display:inline;
Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.
To make the text-align work for <span>, you need to change it into a block element.
Set
display: block;
for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.
Try this. You need to wrap it with a container unit of <div>
<div class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</div>
Following will work as well
<span class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</span>
It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.
Because your html, is in wrong format. You cant have a span child of a span.
try like this:
<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>
to have the span centered , without a parent div you would need to put the display, as block.
so you could have on your html and css like this:
span{display:block;}
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
html:
<span class="UnderlineIt CenterIt">Registration Form</span>
I am trying to build a horizontal scrolling layout, composed of image blocks:
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
I used display:inline-block and white-space: nowrap; properties to achieve this, and it does work but browsers don't seem to recompute block widths on resize?
Check here: https://jsfiddle.net/g597w3Lr/2/ and try resizing the browser..
Here is a screen grab to better understand what is my problem:
https://youtu.be/VxKo4gysc1o
At first all images are well positioned and i can scroll horizontally: perfect.
I then resize the browser
images are resizing, not the .item wrappers. White gaps appear :(
Basically i was expecting same feature as with vertical scrolling, i.e. adapting width depending on content size.
I actually dont even understand the logic here..
Is there any way to get over this?
Thanks!
Original answer
EDIT 2: Looking at your video I think the new approach is what you are looking for.
You have to display your divs with .item class as inline and remove your white-space: normal property.
.item {
display: inline;
height:100%;
}
Updated JSFiddle.
Explanation:
I am not an expert of CSS so if someone see some mistake please correct me.
When you display an element as inline-block as the official documentation says:
inline-block
Causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
which means that the element that you display as inline-block acts like a block but you can set it inline (in the same line). This means that you can set a div (which is display: block as default) in a single line. You can also see it here:
The div element, short for division, is the block level generic container.
Also, inline elements cannot get height/width properties so this is the reason why when you display your divs with .item class as inline, they wrap the content but not get the height/width that they should correspond to take (from their parents in your case, as you put them with %).
If you display them as inline-block it does not changes anything about their default height/width properties. Just allows you to display them in a single line.
JSFiddle to see the three divs (inline/ inline-block / block, as default).
You will have to modify slightly your css
HTML
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
CSS
html,body {
height:auto;
}
.container {
display: inline-block;
white-space: nowrap;
height:auto;
}
.item {
display: inline-block;
white-space: normal;
}
.item img {
width:100%;
height:100%;
}
Fiddle
check it see that's what you want ?
I manage your classes with border:solid 1px red;
and use width:100% in some classes.
also in class item:
width:100%;
https://jsfiddle.net/g597w3Lr/6/
A straight forward question.. is it possible to set the width in percentage for a span tag in CSS? for example:
<span style="width: 50%">...</span>
etc..
In my project I'm currently using divs but ofcourse after each div tag a line break gets inserted (which I don't want). So the most obvious solution to that is then to use span tags instead of div. But then I'm not able to define the width for the span tags.. Atleast not in a percentage kind of way.
Thanks in advance for any help!
Define the element as an inline block and you can control the width and height like a block element while keeping it inline with surrounding content.
#element {
display: inline-block;
width: 50%;
}
inline elements cannot have dimensions. do them to do so, and still remain inline, add:
display: inline-block
Add display: flex; on parent div style.
<div style="display: flex;">
<span style="width:50%">...</span>
<span style="width:50%">...</span>
</div>
I'd like to use the inline labels of the bootstrap css framework:
<span class="label">Default</span>
Unfortunately these labels are not vertically centered when used together with other elements.
<p>
<span class="label">test</span>This is a test heading.
</p>
Please see the full code for a visual example: http://jsfiddle.net/kvPpm/
I am aware of the line-height and absolute/relative positioning workarounds but was not able to apply them correctly.
How can I vertically center these labels?
Since <span> is an inline element by default you can just do:
span { vertical-align: middle|top|bottom; }
And it should work. http://jsfiddle.net/kvPpm/1/
But then <a> inside <span> is not semantically correct. You can just use <a> and style it display: inline.
http://jsfiddle.net/kvPpm/3/
.label { vertical-align: top; }
This worked for me when I wanted it to be aligned properly in a ul