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>
Related
I have a row of 3 inputs. One of them has label text placed above its input. I do not want this label text to interfere with the alignment of the inputs. Right now I'm using flexbox in my example. My hack/approach is to use position: absolute; on my optional label text to remove it from the flex flow so the inputs stay align. However, this creates a bit of spacing inconsistency when wrapping on smaller viewports. I've tried CSS grid as well but had issues where I was stuck writing a media query for every time I needed to wrap, which seemed worse than this. I would also like the solution to have no fixed widths/heights. As the elements and text can be dynamic. What is the best way to achieve this functionality that allows for a cleaner wrapping?
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.optionalContainer {
position: relative;
/*hack to container optional text*/
padding: 20px 0;
}
.optional {
position: absolute;
top: 0;
margin: 0;
}
<form class="container">
<input required type="text"/>
<div class="optionalContainer">
<p class="optional">Optional:</p>
<input type="text"/>
</div>
<input required type="text"/>
</form>
Example of what I'm shooting for at different viewports:
Here is a solution avoid both positioning and the padding hack using flex with row-gap of the input-height:
:root {
--input-height: 21.2px;
}
.container {
display: flex;
align-items: end;
flex-wrap: wrap;
row-gap: var(--input-height);
}
<form class="container">
<input required type="text" />
<div>
<div>Optional:</div>
<input type="text" />
</div>
<input required type="text" />
</form>
Here is a another solution which avoid both positioning and the padding hack using grid and a grid-template-columns hack:
:root {
--input-width: 146.867px;
--input-height: 21.2px;
}
.container {
display: grid;
/* wrapping hack from https://stackoverflow.com/a/43664701/1248177 */
grid-template-columns: repeat(auto-fill, minmax(var(--input-width), 1fr));
row-gap: var(--input-height);
align-items: end;
}
.optionalContainer > input {
box-sizing: border-box;
width: 100%;
}
<form class="container">
<input required type="text" />
<div class="optionalContainer">
<div class="optional">Optional:</div>
<input type="text" />
</div>
<input required type="text" />
</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'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
I'm new to CSS and have a simple login form that I'm trying to align correctly. Basically two columns with the labels and the Login button in one column and the text boxes in another column. How do I do this in CSS?
The HTML code is:
<body>
<form action="" method="post">
<label> Username </label>
<input type="text"/>
<label> Password </label>
<input type="password"/>
<input type="submit" value="submit"/>
</form>
</body>
This is one approach that works:
form {
width: 80%;
margin: 0 auto;
}
label,
input {
/* In order to define widths */
display: inline-block;
}
label {
width: 30%;
/* Positions the label text beside the input */
text-align: right;
}
label+input {
width: 30%;
/* Large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* Only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input+input {
float: right;
}
<form action="#" method="post">
<!-- note that I've added a 'for' attribute to
both of the <label> elements, which is
equal to the 'id' attribute of the relevant
<input> element; this means that clicking
the <label> will focus the <input>: -->
<label for="username">Username</label>
<input id="username" type="text" />
<label for="password">Password</label>
<input id="password" type="password" />
<input type="submit" value="submit" />
</form>
JS Fiddle demo.
Adjust dimensions and margins to suit your use-case and aesthetic of course.
Of course, currently, there are other means by which this can work, such as CSS Grid:
*,
::before,
::after {
/* selecting all elements on the page, along with the ::before
and ::after pseudo-elements; resetting their margin and
padding to zero and forcing all elements to calculate their
box-sizing the same way, 'border-box' includes the border-widths,
and padding, in the stated width: */
box-sizing: border-box;
margin: 0;
padding: 0;
}
form {
/* Using CSS Grid to lay out the elements in two-dimensions: */
display: grid;
/* specifying a 0.5em gutter/gap between adjacent elements: */
gap: 0.5em;
/* declaring a number of named grid areas in order to lay out
the child elements; the areas identified with a period (.)
are 'empty' areas, whereas the areas named by strings are
used, later, to place elements according to those names: */
grid-template-areas:
"usernameLabel . usernameInput"
"passwordLabel . passwordInput"
". . submit";
/* declaring the size of each of the three columns; 1fr is
one fractional unit of the available space, and is the
size of the first and last of the columns. The central
column is declared as being 0.5em in width: */
grid-template-columns: 1fr 0.5em 1fr;
margin: 1em auto;
width: 80%;
}
label {
/* placing all <label> elements in the grid column 1 (the first): */
grid-column: 1;
/* aligning text-content to the right in order to position the label
text near to the relevant <input>: */
text-align: right;
}
label::after {
content: ':';
}
input {
grid-column: 3;
}
button {
/* positioning the <button> element in the grid-area identified
by the name of 'submit': */
grid-area: submit;
}
<form action="" method="post">
<label for="username">Username</label>
<input id="username" type="text" />
<label for="password">Password</label>
<input id="password" type="password" />
<input type="submit" value="submit" />
</form>
JS Fiddle demo.
References:
Adjacent-sibling (+) combinator.
box-sizing.
display.
float.
gap.
grid-area.
grid-template-areas.
grid-template-columns.
grid-template-rows.
margin.
width.
Bibliography:
"Basic Concepts of grid layout."
For what you are asking, I'd simply put them in a table.
<form action="" method="post">
<table>
<tr>
<td><label> Username </label></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><label> Password </label></td>
<td> <input type="password"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit"/></td>
</tr>
</table>
</form>
Here's what it will look like
http://jsfiddle.net/wCSAn/
You can also use the position property in CSS to align your label and input in certain specified way as you want. By this, they get arranged in accordance to the parent element.
form {
position: relative;
width: 70%;
text-align: right;
}
label {
width: 30%;
position: absolute;
left: 10%;
text-align: right;
margin-right: 30px;
}
input[type=submit] {
position: absolute;
left: 25%;
background-color: #9AE5F8;
}
Here is the link to its jsfiddle.