Add text to empty label in div without adding height to div - html

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;
}

Related

How can I set the width of a row of multiple inputs to a percentage of the browser window width when some inputs are of fixed size?

Title says it all. I have a row of inputs including text fields, selects, radio buttons and checkboxes, and I want the total width of the row to be a percentage of the screen but I also want some of the individual inputs to remain a constant width. I've tried putting all the row inputs inside <div> tags and setting the css of the div to width:100% but it doesn't do anything. I think that's because I've set the css of some of the inputs to a specific number of pixels.
<div style="width:90%">
<span style="width:100%; display:block">
<input type="text" style="width:50px">
<input type="text" style="width:33%">
<input type="text" style="width:33%">
</span>
</div>
Meler,
It seems you've not considered the basics like inputs usually behave as inline elements. Please make sure that you have made them block to occupy the width in %
eg:
<div style="width:90%">
<span style="width:100%">some text</span>
//this should not work until you make span as 'display:block'
</div>

Distribute Size of elements inside div

I want to display the unit of the input next to it.
I don't want the unit "g" to break into the next line when the size of the div changes.
The input should use all remaining space inside the div, as long as this does not cause a line break.
<div style="width:100px">
<input type="number" />
g
</div>
Just use display:flex and surround internal elements with a div tag. More on flex you can find on Mother Google.
Hope this helps.
<div style="width:100px;display:flex;">
<div><input type="number" /></div>
<div>g</div>
</div>
Easiest way and cross-browser supported way is using display - table and table-cell
You can wrap 'g' inside another <div>. Then you can get it in side-by-side irrespective of width by following CSS
body > div {
display: table;
}
body > div > * {
display: table-cell;
}
<div style="width:100px">
<input type="number" />
<div>g</div>
</div>
Try this.,
just give some room for the text to display
Change width of your div
<div style="width:200px;">
<input type="number" />
g
</div>

Width of text box jQuery mobile

I have label and text box in jQuery mobile and i am trying to change the width of the text box.
For some reason after i am changing the width, lets say for 60% i am still seeing the rest of the 40% almost transparent.
I am adding also a photo of it in order to be more clear.
This is the code:
Html:
<div role="main" class="ui-content">
<form>
<div class="ui-field-contain">
<label for="sales1">Sales:</label>
<input type="text" id="sales" value="">
</div>
</form>
</div>
Css:
#sales {
width: 60%;
}
How do i change the width without seeing the extra 40% of the text box?
When using jQuery mobile forms, the inputs are enclosed onto a div which holds the width as 100%. To change the width of your text field, you rather need to change its value of the parent, not from the input itself.
You can achieve this with jQuery:
$('#sales').parent().width($('#sales').parent().width() * .4);
The above code is setting the width of the parent div to 40% of its actual value. Here is an example fiddle: https://jsfiddle.net/qctddeza/
.width() function reference
.parent() function reference
Edit:
You would be able to do it with CSS only, but not selecting with an id, as you cannot get the parent of the input element. A general styling can be seen here.
Code taken from W3Schools.

Force line-height to equal height

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?

html display inline property and make two check box in the same row

I am a newbie to Html and currently I have some problem playing around with display style:
I would like to create two checkbox in the same line with one label in front of each, however, with the following syntax, my checkbox will always go vertical (one on top of the other).
<div>
<label></label>
<div><input type='checkbox'></div>
<label></label>
<div><input type='checkbox'></div>
</div>
I understand that there display:inline can solve this problem. But as you can see, in the following code, I have several <div> element, I tried to add display:inline into all the elements in the outer <div>, but it is not working. I am not entirely sure what is going wrong. Maybe I miss something ?
The other thing is that what if I want to make them both in the same line and also float to the left, should I just add a float:left to each elements in the outer <div>? It seems very inefficient since there maybe quite a lot elements in the outer <div>.
Any help or hint will be appreciated ~
If you wrap your inputs into div's, you will get line breaks. Get rid of them. Like this for example:
<div>
<label>First</label>
<input type='checkbox'>
<label>Second</label>
<input type='checkbox'>
</div>
Working demo
What you say you've tried should be working. Here is a basic demo:
div * {
display: inline;
}
<div>
<label></label>
<div><input type='checkbox'></div>
<label></label>
<div><input type='checkbox'></div>
</div>
I imagine what's happening is that your parent div style is also being applied to your inner div elements, overriding the inline style declaration. Ensure that your inner div element selectors have higher specificity than your parent one.
An easy solution is to simply give your parent div element a class attribute and style on that:
<div class="parent">
....
.parent {
/* Parent style. */
}
.parent div {
display: inline;
/* Child style. */
}
Depending on what you're trying to achieve though, a better solution may just be to place your input elements inside your label elements:
<label>
My label text
<input type="checkbox" />
</label>
Example
<label>
My first label text
<input type="checkbox" />
</label>
<label>
My second label text
<input type="checkbox" />
</label>
With this approach you can click on the label text to toggle the checkboxes.