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>
Related
Please look at the following code:
<div class="form-group col-md-6">
<label class="col-md-4">Last Seen (Real Time)</label>
<input class="form-control col-md-8" type="text" ng-model="status.lastSeen" ng-readonly="true"/>
</div>
This code creates a label and an input box. How to make the input box occupy the entire grid?
How to make the input box occupy the entire grid?
Do you want a two-dimensional text input field?
If so, rather than
<input type="text" />
You might want to use:
<textarea></textarea>
instead.
See:
https://developer.mozilla.org/en/docs/Web/HTML/Element/textarea
http://www.w3schools.com/tags/tag_textarea.asp
Why would you want informational (?) content to be placed in an input field?
The width of the input is constrained to the parent .col-md-6, the class you assigned to the input (.col-md-8) is therefore 8/12 of the md-6 class. Try wrapping it in its own .form-control
Have you tried using CSS properties to set the height and width of the input to 100%?
In a style.css file or <style> element you could do the following
input {
height: 100%,
width: 100%
}
Is this the complete code? Is your code part of a row?
It's always good to put your rows and cols in a container or container-fluid like so:
<div class="container">
<div class="form-group col-md-6">
<label class="col-md-4">Last Seen (Real Time)</label>
<input class="form-control col-md-8" type="text" ng-model="status.lastSeen" ng-readonly="true"/>
</div>
</div>
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.
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;
}
My JSP code is
<h:field
path="configuredChannels"
required="true"
code="admin.menu.channels">
<div class="row-fluid"
data-channel-checkboxes="#">
<form:checkboxes
element="div class='span1 checkbox'"
items="${channels}"
path="configuredChannels" />
</div>
</h:field>
However the checkbox items works fine on all other resolutions but the item channel value facebook just overlaps with the next checkbox only on 1024 X 768.
here is the jpeg image.
Here is the resulting client code in HTML
<div class="controls">
<div class="row-fluid" data-channel-checkboxes="#">
<div class='span1 checkbox'>
<input id="configuredChannels1" name="configuredChannels" type="checkbox" value="SMS"/><label for="configuredChannels1">SMS</label>
</div class='span1 checkbox'>
<div class='span1 checkbox'>
<input id="configuredChannels2" name="configuredChannels" type="checkbox" value="Voice"/><label for="configuredChannels2">Voice</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels3" name="configuredChannels" type="checkbox" value="Facebook"/><label for="configuredChannels3">Facebook</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels4" name="configuredChannels" type="checkbox" value="Twitter"/><label for="configuredChannels4">Twitter</label>
</div class='span1 checkbox'><input type="hidden" name="_configuredChannels" value="on"/></div>
<span class="help-inline">
</span>
</div>
</div>
Latest Images
The problem is that you're using a fluid row grid and give the checkboxes a fluid span width:
<div class="row-fluid" data-channel-checkboxes="#">
<div class='span1 checkbox'>
This means that the row-fluid is always 100% of the width of it's container (whatever that may be in the context of your HTML, and the checkbox divs have the span1 class, which is always 6.382978723404255% of the row-fluid width. (This is defined in Twitter Bootstrap)
When you resize the window the 100% of the row-fluid becomes smaller, and at a certain point it hits the mark where ~6.38% of that is not enough to fit the entire contents of the checkbox.
There is no simple solution for this while maintaining this fluid grid, it's doing exactly what it's supposed to do but you probably didn't intend this. A better solution would probably be to not give the checkboxes a defined width just let them use all the width they need.
Try removing span1 from the checkbox divs, and add this CSS:
.checkbox {
float: left;
}
This means that they will not have the evenly distributed width they used to have, but instead once there is not enough room to show all of them on one line the checkboxes will continue on a new line.
addition
You're setting classes on the closing tag of a div. That is completely useless. Classes (and all other attributes) should only be set on the opening tag (<div>), never on </div>
I have the following HTML:
<div >
<div >
<div style="float: left;">
<input type="checkbox" value="False" />
</div>
<div style="float: left;" > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</div>
It displays the XXX to the right of the checkbox. However, if I reduce the screen width, the XXX goes under the checkbox.
Is there any way that I can "lock" the XXX text inside the DIV so the XXXX always appears to the right and on the same line?
(Note that I want to keep using DIV as later on I do some jQuery things with the DIVs.)
If you want them to always be on the same line, you can reasonably combine the two divs into one, still floated, and use the white-space property to keep it on one line:
<div>
<div>
<div style="float:left; white-space:nowrap;">
<input type="checkbox" value="false" /> XXXXXXXXXXXXXXXXXXXXXXX
</div>
</div>
</div>
Starx's answer explains very well why it's not really feasible to do this with two separate floated divs.
edit: http://jsfiddle.net/nkorth/qQSCV/
yep, you can do that by setting fixed width for the container, like so:
<div>
<div style="width:400px">
<div style="float: left;">
<input type="checkbox" value="False" />
</div>
<div style="float: left;" > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</div>
That is what float:left is supposed to do. It will remain in the left side as much as possible. If the element before is also floated to the left side, it will try to float to left, together with it, if the space is available. That's why when you resize your screen and there is not enought space for the div to float to the together with previous element, it will float to the left, down the previous element.