I have a responsive layout. One block has a form input and button. How can I make the elements have a combined width of 100%?
Im using Twitter Bootstrap 3 but I cant see any classes they provide for this.
Ive tried using display table on the the container and display table-cell on the the children but it doenst work, im assuming text input doenst render the styles in the same way a div would.
I could use absolute positioning but then the CSS would break if the button's text was lengthened. So I would rather stay clear of this method.
I dont want to set a fixed % width eg 80% for the input and 20% for the button. I want the button to take up the space it requires, and for the input to take whatever is left.
http://codepen.io/anon/pen/jEPoRG
<div class="form-group">
<input type="text" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</div>
.form-group {
background: grey;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 30%;
}
If you put a div around the search bar, then you can use display: table/table-cell on .form-submit and its children. I assumed that .search_bar_div's width would have been auto, but that didn't quite stretch all the way. But then I tried 100% and this seems to be working as you want.
I tested Mozilla and Chrome only.
<style type="text/css">
.form-group {
background: grey;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 30%;
display: table;
}
.search_bar_div {
width: 100%;
display: table-cell;
}
.form-group .search_bar_div #search_bar {
width: 100%;
}
.form-group .btn {
display: table-cell;
}
</style>
<div class="form-group">
<div class="search_bar_div">
<input id="search_bar" type="text" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
Related
I have some text inputs (its count may be various), I need to place them in div, stretch on all width but in one line.
<div>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
div {
width: 300px;
white-space: nowrap;
}
input {
width: 100%;
display: inline-block;
}
JSFiddle
But it's not working I expected.
I don't want to set inputs' width manually (in px). Is it possible?
try this. input isnt like a div, you have to give it a display value.
input {
width: 100%;
display: inline-block; clear:both; display:block;
}
Assuming you are trying to have the inputs stretch equally in accordance with the page.
It's a matter of extending the fluid size of their container, the div, then applying the same fluid size to the inputs (assuming they are each equal) by setting their size to 33%. They will in turn stretch with the full width of the div, which will stretch with the full width of the container (or page) it's in.
div {
width: 100%;
white-space: nowrap;
}
input {
width: 33%;
display: inline-block;
}
<div>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
So, I'm trying to make a chatbox, with the following:
<div class="text-container">
<div class="text" id="textholder">
<p>message</p>
...
<p>message</p>
</div>
</div>
<div class="chatbox-container">
<div class="chatbox">
<input type="text" id="textinput" class="inputText" placeholder="Enter text" />
<input type="submit" class="send" onclick="addMessage()" value="Send" autofocus />
</div>
</div>
With the following css:
.text-container{
width: 100%;
height: 500px;
overflow: auto;
position: relative;
}
.text{
position: absolute;
bottom: 0px;
left: 25%;
width: 50%;
height: auto;
}
.chatbox-container{
width: 100%;
height: 30px;
overflow: auto;
}
Where I add some more p's to with the addMessage() function (just adds paragraph with text to innnerHTML of #textholder)
now the problem is that I can't get the text div to overflow(auto), which means the text just disappears.
I want the text to be in the center of the text-container, but I want the scroll to be on the container, so it looks like in skype.
How can I do this? Also, I've tried to basicly align the messages to the bottom of the textbox in a skypelike manner, but I've read that this can also be done by vertical-aligning. yet this didn't work how I wanted it.
Hopefully you get what I'm asking, English is not my native language, and I'm not sure if I'm asking it in the right way.
thanks in advance!
ps. please take into account that this is part of a bigger page, thus I left out some parts.
Ammend your text class to :
.text{
position: absolute;
bottom: 0px;
height: 500px; //fix the height
width :90%;
overflow: auto; //scroll the content
}
Fiddle : http://jsfiddle.net/logintomyk/pETfX/
You have made the container overflow, while the messages are in text, so you need to overflow that class mate!! :)
Probably this is what you are looking for
.text-container {
height:200px;
overflow: auto;
border:1px solid #ccc;
}
.chatbox-container {
height: 30px;
}
jsfiddle
I am trying to align the input boxes of a form so that they all line up under each other on the page. I was hoping to use #FullNameText{text-align:15%;color:c0c0c0;} in the CSS document for the following element
<p>
<span Id="FullNameText">Full Name:</span>
<input name="FullName" id="FullNameTab" autofocus="" onblur="fullNameCheck()" type="text">
</p>
The text-align:15% part has no effect on the page. Can % be used to align things?
Try this:
#FullNameText {
width: 15%;
color: #c0c0c0;
display: inline-block;
}
Not possible to text-align to %
text-align can only be left, right, center, justify, inherit
update:
you can give padding or margin to #FullNameText
To associate elements together in a form, use fieldset rather than paragraph, and to associate a label with an input, use a label (with for attribute), this allows clicking on the label text to focus the element to which that text applies:
<fieldset>
<label for="fullNameTab" id="FullNameText">Full Name:</label>
<input name="FullName" id="FullNameTab" autofocus="" onblur="fullNameCheck()" type="text">
</fieldset>
Then you can specify width or margin on the label (as you could with the span, but this is a little more semantic and meaningful):
label {
display: inline-block; /* to allow a specified width to be defined */
width: 15%; /* adjust to taste */
margin: 0 5% 0 10%; /* 0 margin-top, 5% margin-left, 0 margin-bottom,
10% margin-left */
}
JS Fiddle demo.
no you can't use text-align with a % value.
If you want to align your input boxes exactly (presumably with their labels next to them) you could consider using floating divs.
<div class="row">
<div class="left label">Full Name:</div>
<div class="left content"><input name="FullName" id="FullNameTab" autofocus="" onblur="fullNameCheck()" type="text"> </div>
<div style="clear: both"></div>
</div>
css:
.row {
width: 100%;
}
.left {
float: left;
}
.label{
width:30%;
}
.content{
width:70%
}
I'm trying to build a search form using Bootstrap. Here's the HTML:
<form class="form-search search-bar">
<div class="input-append">
<input type="text" class="search-query" placeholder="Enter your address here...">
<button type="submit" class="btn btn-primary">
Search <i class="icon-search icon-white"></i></button>
</div>
</form>
I'm new to CSS - how do I style this so that the search elements are horizontally centered across the block? Also, how do I increase the height of the search elements?
You should add an ID
.search-bar {
text-align: center; /* centers inline and inline-block children */
}
.search-bar .search-query,
.search-bar .btn-primary {
display: inline-block; /* allows for heights to be set */
}
.search-bar .search-query {
height: 30px;
}
.search-bar .btn-primary {
height: 40px;
}
to place them next to eachother you can use the float command
.search-query {
float:left;
}
.btn-primary {
float:left;
}
Make sure the width of input-append is large enough to place them next to eachother.
to increase there height just place height:[amount]; in the same block as float in the CSS
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form