center input in bootstrap with input-prepend - html

<body>
<div class="container">
<div class="row">
<div class="offset4 span4">
<h1 class="text-center">Days</h1>
<form method="post" action="proc/days.php" id="jobs">
<div class="input-prepend">
<span class="add-on">Job Count</span>
<input type="text" class="day1">
</div>
<div class="input-prepend">
<span class="add-on">Day Name</span>
<input type="text" class="day2">
</div>
</form>
</div>
</div>
</div>
</body>
is my primary block of code (with all the other stuff striped out). I want to get the input-prepend to take up all the width available in the span4.
Right now, the only tricks I can find end up not working, or being way to large.
Also, I am using the Cosmo Bootswatch theme.

Setting .day1 to 76% width (after padding and borders are considered etc) will fill up your space. Problem would then be that you have another element depending on the .day1 class. So add an id, or example like:
<input type="text" class="day1" id="day1">
and then use #day1 {width:76%;} in your css. You'd most likely need to adjust the width size as your screen width changes though (through media queries).

Related

Reduce default input box size in bulma

How can I shrink the size of input box ? By default, it's covering all available area which is really not looking good. I need to keep it of medium size and in the center.
Code :
<div class="field is-horizontal">
<label>Saving Account:</label>
<input class ="input is-primary">
</div>
Mixed it with column classes.
<div class="columns">
<div class="column is-half is-offset-one-quarter">
<div class="field is-horizontal">
<label>Saving Account:</label>
<input class="input is-primary">
</div>
</div>
</div>
Bulma document.
See it in action.

Bootstrap input group line break formatting

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.

checkbox label overlaps in 1024 x 768 resolution

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>

When the width is changing with regards to window size, how do I align elements that in separate divs?

I have a search input and a result element. Both are in separate divs/containers but I need them to align when the window size changes. I'm pretty sure there's a better way to do it than with Javascript.
One window size: http://i.imgur.com/KSmKsFL.png
A smaller window: http://i.imgur.com/tSMQvdD.png
I'm using this: http://getuikit.com/docs/utility.html and I'm liking it but with regards to responsive design I'm clearly doing something wrong. Shouldn't be this hard to get two elements to align regardless of screen width. Any suggestions?
My HTML
<div class="header-section">
<div class="uk-container uk-container-center uk-text-center">
<h1 class="uk-h1" id="head1">Search</h1>
<h1 class="uk-h1" id="head2">Lab</h1>
</div>
</div>
<div class="input-section">
<div class ="uk-container uk-container-center uk-text-center">
<form id="search-form" class="uk-form">
<input id="search-input" type="text" placeholder="Bing Engine ">
<button id="search-btn" class="uk-button uk-button-primary" type="button">Search</button>
</form>
</div>
</div>
<div class="results-section">
<div id="results-container" class="uk-container uk-container-center uk-width-1-2">
<div class="result">
<a class="result-title" href="#">Bhutan travel advice</a>
<div class="result-url">https://www.gov.uk/foreign-travel-advice/bhutan</div>
<p class="result-summary">Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.</p>
</div>
</div>
</div>
It felt quite clean to me.
My CSS: http://pastebin.com/4kkpe8cq
Using CSS:
#media(min-width:800px) {
// your CSS for a small width
}

Responsive input size grows when inside input-prepend with Bootstrap

When I resize this fiddle, the input box gets larger when I shrink the screen. Unfortunately on the iPhone, it's going off the screen in my app.
Here is the fiddle: http://jsfiddle.net/v6Bhx/5/embedded/result/ and here is the code:
<div class="row-fluid">
<div class="span6">
<table width="500">
<tr>
<td>
<div class="input-prepend">
<span class="add-on">$</span>
<input type="text" name="fee" value="" class="span6" />
</div>
</td>
</tr>
</table>
</div>
<div class="span6">Test</div>
</div>
Also yes, I realize I am using tables. I am not doing this to format data, it is actually being used for tabular data which happens to have input boxes in it.
Either set a width on slider :
<input style="width:125px;" type="text" name="fee" value="" class="span6" />
or use css
.span6 { width: 125px; }
The reason is the table is changing row widths on page resize
My suggestion is to use table width="100%" .
<div class="row-fluid">
<div class="span6">
<table width="100%">
<tr>
<td>
<div class="input-prepend"> <span class="add-on">$</span>
<input type="text" name="fee" value="" class="span6"
/>
</div>
</td>
</tr>
</table>
</div>
<div span="6">Test</div>
</div>
Setting the table width # 500px will likely cause a problem as the viewpoint shrinks to mobile size. Try removing the table width and see what happens.
Update
I can't picture exactly how you want the final page and table to look, but here are a few additional points you could check.
Regarding the iPhone display issue, make sure that in the head of your page you have:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I think that specifying a table width of 100% will be invalid HTML5. I doubt that this is the source of your problem, but try something like this in your CSS:
.span6 table{
width:100%;
}
I can see that having the form with an input prepend inside a table is going to be a challenge. If there is no way around this, you have a nesting problem at the moment -- the input.span6 is actually nested inside the another span6 column.
In general, the HTML for a nested grid with fluid rows is:
<div class="row-fluid">
<div class="span6">
<div class="row-fluid"> <!-- start nested grid -->
<div class="span12">
<!-- Form and table details here -->
</div> <!-- end nested span -->
</div> <!-- end nested row -->
</div> <!-- end span6 -->
<div class="span6">
test
</div>
</div>
See the fluid nesting section on http://twitter.github.com/bootstrap/scaffolding.html#gridSystem for full details.
Good luck!