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
Related
I have a text field that I am trying to attach focus styling to and when focused, I want the box the expand and then include an "Add" button below the text area.
Both elements are on different levels (due to the existing structure of the code base). But I can't figure out how to hide/display the button when focusing on the text area. Here's an example of what I'm working with:
<form class='container'>
<div class='form-item'>
<div class='input-container>
<textarea id='addComment'></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'></button>
</span>
</form>
And here is the CSS/SCSS I've got
#addCommentBtn {
display: none;
}
#addComment {
transition: all 0.5s ease;
margin: 0.5em;
width: 95%;
}
#addComment:focus {
height: 10em;
margin-bottom: 2em;
}
#addComment:focus + #addCommentBtn {
display: block;
}
The expansion of the textarea on focus works as intended, but getting the button the change from display:none to display:block won't seem to work (I've tried a few different variations as well such as visibility).
If it comes down to it, I may have to adjust the Vue components, but this is last resort as it would require more tweaks/confirmation from project lead as the components are used in numerous areas and changes would affect those other areas as well.
ALSO: I would prefer not to use JQuery as well.
This should fix the problem. Flex will automatically adjust the height of container based on content.
function toggleButton(showFlag) {
document.getElementById('addCommentBtn').style.display = showFlag ? "inline" : "none";
}
.container {
display: flex;
flex-direction: column;
}
#addCommentBtn {
display: none;
}
<form class='container'>
<div class='form-item'>
<div class='input-container'>
<textarea id='addComment' onfocus="toggleButton(true)" onfocusout="toggleButton(false)"></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'>Add</button>
</span>
</form>
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>
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 have a problem, I have this input text fields in a html form, this are wrapped for this div css properties:
.formRight240 { float: left; width: 240px; margin: 5px 12px 5px 0px; }
when I try to this
.field_required{ display: inline; color: red; }
.field_required:after{ content: "*" }
the input text field stay the same and the asterisk jump to the next line, I know the reason, everything is aligned in order to the other elements around, but is there anything I can do to display the asterisk inline with the input text field by doing changes to the field_required class? if not, what I have to change to the .formRight240.
HTML
<div class="rowElem noborder">
<label>Customer ID:</label>
<div class="formRight240">
<span class="field_required"><input type="text" name="p_cust_id_c" id="req" class="validate[required,maxSize[30]]"/></span>
</div>
<div class="fix"></div>
</div>
Check this answer, you can't add :before or :after to an input.
A solution could be to wrap your input in a span:
HTML
<span class="field_required"><input type="text" /><span>
CSS
.field_required input {
display: inline;
color: red;
}
.field_required:after{
content: "*";
}
DEMO
I'm attempting to add a search field to a responsive sidebar, and want the field to responsively scale to the width of the sidebar, while keeping the 'submit' button at a set width, on the same line as the search field.
I've been able to mock up the effect with divs, but when applying the same styles to the form elements, the search field will always fill the full width of the form element:
http://dabblet.com/gist/5618200
I am aware that I can get this to work with percentages:
http://dabblet.com/gist/5618209
But I really would like the 'submit' button to have a set width.
What can I do to make the form behave -exactly- like the div mockup in my first example?
Not getting your question well, but do you want the text box to be width 100% and a fixed button like this?
Demo
<input type="submit" value="Search" />
<div>
<input type="text" />
</div>
input[type=submit] {
float: right;
}
input[type=text] {
width: 100%;
}
div {
overflow: hidden;
padding-right: .5em;
}
Here is a fully functional solution.
<form>
<div class="form-element textfield">
<input type="text">
</div>
<div class="form-element submit-btn">
<input type="submit" value="Search">
</div>
</form>
And the styles:
.form-element {
display: table-cell;
box-sizing: border-box;
}
.textfield {
width:100%
}
.textfield > input {
width:100%
}
Here is the example:
http://codepen.io/capynet/pen/vJBnL