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>
Related
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>
Basically I have a bunch of rows with a check box and a label taking up 2 column spaces. Some of the labels are longer then others so when you resize the browser or are viewing on a mobile device the columns with longer labels will collapse to a second row and the shorter ones stay beside their check box. It looks like crap.
HTML:
<div class = "row">
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
Is there a way to make it so that if one of them collapses then the whole row does?
Even better would be to have a dynamic font that worked like an image and just grew and shrank taking up a maximum of 100% as necessary to not cause a collapse at all. I could just use images but I have a lot of these these labels and it will take forever to make an image for each.
Bootstrap provides four classes for different screen :
xs for extra small
sm for small
md for medium
lg for large screen
In your following code should work, you can customize as per your screen needs :
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
You can add a custom CSS to your bootstrap style and define some simple CSS rules as you would like to force the style to behave...
CSS Example:
.input-group {
display: inline;
}
I think the right HTML element for this is a list..
although, If you are going to edit the CSS... It's good to know that you can add a custom css file to your project and use a CSS class with your bootstrap style like this:
CSS:
.checkbox-inline {
display: inline;
}
HTML:
<div class="input-group checkbox-inline">
<input type="checkbox">
Small Label
</div>
There are many possible answers...
maybe, you will also find this question useful.
I just wanted to double check that what I was doing was ok. I am trying to do a layout like so
So its a horizontal form with a label and text area. However, I wanted to do a list of points under my label which is what I basically have. However, I do not think I have done it in the best way.
<div class="form-group">
<label for="whatDetails" class="col-sm-5 control-label">What
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
</label>
<div class="col-sm-7">
<textarea rows="5" class="form-control" id="whatDetails"></textarea>
</div>
</div>
Should I be putting my list within my label element, or is there a better way to achieve this?
Thanks
Should I be putting my list within my label element,...
No. You should not be putting your list within the label element.
As per the specs for label here: http://www.w3.org/TR/html-markup/label.html#label-constraints
Permitted contents: phrasing content
and
the label element may contain at most one descendant input element,
button element, select element, or textarea element.
Also, as per the specs for ul here:
Permitted parent elements: Any element that can contain flow elements
...or is there a better way to achieve this?
Just split your label and ul into a separate div of their own.
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-4">
<label for="whatDetails" class="control-label">What</label>
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
</div>
<div class="col-sm-8">
<textarea rows="5" class="form-control" id="whatDetails"></textarea>
</div>
</div>
I am using Twitter Bootstrap in the "default" form mode http://getbootstrap.com/css/#forms where the form labels are above the form controls.
However as advertised the form controls are 100% width. I want to be able to control that width occastionally.
So for example in the above I want to have the id text area say 50%. I would normally apply the style col-md-6 to the text box but obviously this will not work in this case due to CSS inheritence.
So is the best approach here for me to create a new class as:
.force-md-6 { width: 50% !important; }
Or is there a better way?
The recommended way to do this is to use Bootstrap's grid. Form controls are styled to be 100% width of their container, so use a wrapping grid cell to affect the layout. Your form markup would look something like the following (seeing as you haven't posted an example to work with):
<form>
<label>Full width field</label>
<input class="form-control" name="full-width">
<div class="row">
<div class="col-xs-6">
<label>Half width field</label>
<input class="form-control" name="half-width-1">
</div>
<div class="col-xs-6">
<label>Half width field</label>
<input class="form-control" name="half-width-2">
</div>
</div>
</form>
You can use any of the grid classes. In the example above I've used col-xs-6 to create a 50% width column on all screen sizes.
If you want to display the label next to the input, take a look at Bootstrap's horizontal forms.
I am using the grid system of bootstrap.
My HTML looks as follows (jade syntax)
form.form-horizontal(role='form', name='containerForm', id='containerForm', novalidate)
fieldset
.form-group
label.col-lg-2.control-label(for='ContType')
.col-lg-4
select.form-control(ng-model="data.ContainerType", id='ContType', name='ContType', ng-options='translate(s.name) for s in containerTypeList')
.form-group
(and so on)
The 'form-control' CSS class is taking 100% width of parent DIV (e.g. col-lg-4, these col-lg classes are effectively "table cells"):
.form-control {
display: block;
width: 100%;
}
I need however to display some HTML right before the SELECT above (or, alternatively, after). I need that HTML to be in the same line as the SELECT. If I simply enter something after the SELECT now, it goes to next line, due to width=100% of that SELECT.
How I can possibly achieve my goal while keeping bootstrap classes in place?
You could place both in a row, then put each item in it's own column. For example:
<div class="row col-sm-12">
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
<div class="col-sm-6">
<button class="btn btn-primary">Demo</button>
</div>
Alternatively, you could use an input-group, for example:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">Demo</button>
</span>
</div>