I have a div element, the title element, with a variable height greater than its line-height due to sibling elements:
<div class="t-row t-flex t-divide">
<div class="um-title">Manage Users</div>
<div>
<select class="t-input></select>
<input type="text" class="t-input">
</div>
</div>
Is there a way to make the line-height automatically assume the value of height?
Also, the text inside the div is currently aligned with the top and changing the vertical-align style doesn't have any effect; is there a way to align the text to the bottom if it's a flex item?
Related
I'm trying to make some html form with help of bootstrap. Some of my inputs must have no gap from left or right side. But bootstrap .col-XX-Y blocks have gutter via paddings from left and right. So my idea was to use negative margin for my input elements, and display: block. And here I'm stuck.
Please refer to this codepen example. I was faced with several strange things for me:
Why input with display: block doesn't fill all it's parent
container, like div does? It fills the container only with: width:100%; (comment width for red-bordered input in codepen example)
Why if I'm apply negative margin-left to compensate parent container's
left padding, my input shifts to the left, but keeps it's original width (like if left css property was used). Doesn't it have to behave
like a block element (e.g. div): shifts to the left and keep
filling of all width of it's parent, excluding right padding?
When I'm apply negative right margin for my input to compensate parent's right padding, then nothing happens (look my example, compare orange div
with red input). Why? What about of a behavior like block element?
If this is normal behavior, can you give me some link to html standard docs with explanations of that.
If you don't want the padding on a grid parent element to effect its children, surround all its children elements in a block element with a class of row.
Bootstrap input elements are meant to span the whole width of there parent elements even without display block style attribute.
<div class="col-md-12">
<div class="row"> <!--this is what you need -->
</div>
</div>
full example code
<div class="col-md-12">
<div class="row">
<input type="text" placeholder='I\'m some damned input' />
</div>
<div class="row">
<div>I am some div</div>
</div>
</div>
Form elements do not behave the same way as regular block level elements. When you display an <input> field as block it will not fill the full width.
For this reason you need to make give the element width: 100%. This is how Bootstrap styles form elements.
Like any other block element, giving it a width of 100% will allow it to fill the width of its container. When you apply a negative margin-left, the width will still be the same (100% = containers width) which will cause the gap to appear.
I would suggest wrapping the <input> field in a <div> and apply the negative margin to that instead:
.wrap {
margin: 0 -20px;
}
.wrap input {
width: 100%;
display: block;
}
I have the following:
<div>
<div style="display:inline-block; ">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
Why does having a line-height property set for the second div also effects the first div? And how to correct for this i only need the second div to be effected by line-height because I need to specify a different line-height for the first div. Thanks in advance.
document.getElementById('go').onclick = function(e) {
document.getElementById('div_2').style.lineHeight = '30px';
};
<button id="go">Go</button>
<div>
<div style="display:inline-block;" id="div_1">div_1</div>
<div style="display:inline-block; line-height:24px;" id="div_2">div_2</div>
</div>
With the test case, it's now crystal clear.
Add vertical-align: top to the first div:
<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>
Fixed version: http://jsfiddle.net/my6Su/5/
Read this to understand the relationship between display: inline-block and vertical-align:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Also useful, for a visual demonstration:
http://www.brunildo.org/test/inline-block.html
Firstly, the effect of line-height is only on inline elements. When line-height is applied to block, inline-block or any other type of element that is not inline, the effects are on the inline descendant elements only.
Secondly, in a line-box (an abstract box enclosing inline elements in a line), all the inline elements are aligned along the baseline. When you change the line-height for the second div, it adds half-leading at the top (and bottom) of that inline-element. And top half-leading pushes the baseline lower, which in turn moves the first div lower.
I am not exactly sure what you are trying to achieve, but, I would recommend either using the vertical-align property or just use position relative.
<div>
<div style="display:inline-block; line-height:10px;">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
try this. this will work.
the problem is the following in have some inputs between css line separators, they are all alined vertically, and have labels beneath the inputs.
the problem is when there is a validation error , some text is put inside this labels, making them visible, this makes the div bigger and causes the container div to have bigger height therefore input is no longer aligned vertically.
is there a way so the label can already have height diferent from zero when there is no text?
Does this help?
jsfiddle : http://jsfiddle.net/thecbuilder/BKrHq/
Approach 1
in this solution, div containing label is given a fixed height according to font size.
html
<div>
<input type="text" id="txt" value="label content"/>
</div>
<div id="labDiv">
<label id="lab"></label>
</div>
<div>
<input type="button" value="Show Content in label" id="showLab" />
</div>
css
#labDiv{
height:18px;
}
Approach 2 in this approach, label is given text : a space character - to get it to the actual height , same as when it will contain the text.
js fiddle :
http://jsfiddle.net/thecbuilder/4Bazb/
html
<div>
<input type="text" id="txt" value="label content" />
</div>
<div>
<label id="lab"> </label>
</div>
<div>
<input type="button" value="Show Content in label" id="showLab" />
</div>
quick implementation of approach 2 :
if you have a common class for all such labels then you can use :before in css to add a space quickly.
if the class is : errorLabels
.errorLabels::before
{
content:"\00a0";
}
Just set a min-height for label div in css. It means that even if there is no tag the label is going to have some height but if text increases then label will adapt to the height of the text inside it.
#labelDiv{
min-height:14px;
}
I have this code: http://jsfiddle.net/LW9DJ/1/
I want the overlay text to appear centered (which is currently working), but I don't want the css class 'mycell' to have the width or height attributes set, I want them inherited from 'container' class.
This is because I am going to implement this in a responsive website in which the width and height of 'container' class are automatically changed.
<div class="container">
<img src="http://i.imgur.com/o7iAFMu.jpg" class="test" />
<div class="overlay">
<div class="mycell">Some Text</div>
</div>
</div>
You should make left-margin and right-margin properties of style, auto. When you assign auto values to these two properties, the div would be located at the center.
I have the following:
<div>
<div style="display:inline-block; ">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
Why does having a line-height property set for the second div also effects the first div? And how to correct for this i only need the second div to be effected by line-height because I need to specify a different line-height for the first div. Thanks in advance.
document.getElementById('go').onclick = function(e) {
document.getElementById('div_2').style.lineHeight = '30px';
};
<button id="go">Go</button>
<div>
<div style="display:inline-block;" id="div_1">div_1</div>
<div style="display:inline-block; line-height:24px;" id="div_2">div_2</div>
</div>
With the test case, it's now crystal clear.
Add vertical-align: top to the first div:
<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>
Fixed version: http://jsfiddle.net/my6Su/5/
Read this to understand the relationship between display: inline-block and vertical-align:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Also useful, for a visual demonstration:
http://www.brunildo.org/test/inline-block.html
Firstly, the effect of line-height is only on inline elements. When line-height is applied to block, inline-block or any other type of element that is not inline, the effects are on the inline descendant elements only.
Secondly, in a line-box (an abstract box enclosing inline elements in a line), all the inline elements are aligned along the baseline. When you change the line-height for the second div, it adds half-leading at the top (and bottom) of that inline-element. And top half-leading pushes the baseline lower, which in turn moves the first div lower.
I am not exactly sure what you are trying to achieve, but, I would recommend either using the vertical-align property or just use position relative.
<div>
<div style="display:inline-block; line-height:10px;">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
try this. this will work.