How to make all inputs with the same width 100%?
if I set width 100% then input will be break on new line:
div > input {
width: 100%;
}
HTML:
<div class="wrapper">
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
</div>
CSS:
.wrapper label {
float: left;
margin-right: 10px;
}
.wrapper div {
margin-bottom: 15px;
}
The desired result (JSFiddle):
.wrapper input {
width: 90%;
}
You cannot make it 100% without a new line because the Label will take some space of the screen. Remaining portion you can allot for the text fields.
You can do something like this: DEMO
Just remove the float statement, and make both the label and input display: inline-block.
.wrapper div {
margin-bottom: 15px;
}
div > input, div > label {
display: inline-block;
}
div > input {
width: 77%;
}
div > label {
width: 20%;
}
You can change the width of the input fields and/or the labels, but I think width: 77% is the highest value possible for the input fields (with the width of the labels set to 20%) to still display inline.
EDIT:
Do note that using CSS selectors based on HTML tagnames is not the ideal way of doing this. A better way is to give all labels and inputs a class (f.e. class="lbl" and class="inp" respectively), and selecting those, like underneath:
...
.lbl, .inp {
display: inline-block;
}
...
<pre>
.wrapper{width:100%; display:block}
.wrapper lable{width:30%; display:inline-block; position:relative}
.wrapper input{width:70%; display:inline-block; position:relative}
</pre>
Related
I want the input to be 30vmin wide - that is, so that the container is as the largest element - (counter) and the input as a block, and this works until the scale is increased by more than 300%. Then everything breaks down. How can I fix this ... make sure that the input is never the largest element in the block
<div class="main">
<div class="counter"></div>
<input type="range" />
</div>
<style>
.main {
width: max-content;
}
.counter {
width: 30vmin;
}
input {
width: 100%;
}
</style>
just delete the css apllied to .main
.main { width: max-content; }
#searchBar {
display: inline-block;
}
#container {
width: 580px;
background-color: white;
}
#logo {
margin-left: 25%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" id="logo" height="40px">
<form>
<input type="text" id="searchBar">
<input type="submit" value="Search Google">
<input type="submit" value="Feeling Lucky">
</form>
</div>
I'm trying to replicate the Google home page(sort of),what I'm trying to achieve is that the search bar (where input type equals search)will be one line above the two buttons,i can achieve that by other ways for sure but wanted to check the inline-block property..the object should act like its "inline",captures only the width of the content and "block" too,but for some reason the "block" does not work and the buttons are just next to the right side of the search bar..
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
So you will have to use display: block to fit the width.
display : block will serve the purpose. As {display: inline-block} will not add the line break. So, you have to modify the CSS as:
#searchBar {
display: block;
}
#container {
width: 580px;
background-color: white;
}
#logo {
margin-left: 25%;
}
I have a very simple input form. I want to align the labels with the input controls so they are at the same level.
I've decided to use align-items: baseline because no matter what the padding, height, etc, it will always align correctly. But, for some reason, when using it with an input of type textarea it does NOT align to the baseline, it aligns at the bottom. Why?
Sure, I can fix it using self-align and padding-top for the textarea, but that defeats the purpose of having something flexible without the need of fixing the padding in some inputs.
I just need to understand to logic, or is this is a bug/known issue?
* {
margin: 0;
padding: 0;
}
form {
width: 500px;
margin: 0 auto;
background-color: #e4e4e4;
}
form .control ~ .control {
margin-top: 20px;
}
.control {
display: flex;
align-items: baseline;
}
.control>div:nth-child(1) {
flex: 0 1 150px;
text-align: right;
padding-right: 20px;
}
.control>div:nth-child(2) {
flex: 1;
}
.control input,
.control textarea {
width: 100%;
padding: 20px;
}
.control textarea {
height: 100px;
}
<form>
<div class="control">
<div>
<label>Label goes here</label>
</div>
<div>
<input type="text" name="pretitle" value="">
</div>
</div>
<div class="control">
<div>
<label>Article</label>
</div>
<div>
<textarea name="article"></textarea>
<p class="explain sub">HTML allowed</p>
</div>
</div>
<div class="control">
<div>
<label>Label</label>
</div>
<div>
<input type="text" name="pretitle" value="">
</div>
</div>
</form>
https://jsfiddle.net/bnaL94u6/13/
The problem is not the textarea but the padding you are adding to both input and textarea, in textarea, you won't notice the it grows because 20pxx2 (40px) is not higher than 100px, but the input itself without the padding has only 19px, and when you add 40px of padding it will have a total height of 59px. and the the label will align in the middle of those 59px
One is a header, another one is a textarea. If I don't use "display: inline-block" it puts them on 2 separate lines and the textarea properly fills to the width of the window and resizes if the window size changes. However, I want them to be inline but when I add the "display: inline-block", the textarea no longer fills to the width of the page.
Here is the code that I currently have.
<div style="display: inline-block" id="element1">
<h4>Description</h4>
</div>
<div style="display: inline-block; vertical-align: text-top;" id="element2">
<textarea rows="4" cols="50" readonly="readonly" style="width:100%">body</textarea>
</div>
This is a screenshot of what it produces.
Current Code Screenshot
Any help would be appreciated. Thanks.
Here I added a wrapper having display: flex and set the 2:nd child (last div) to flex: 1, which makes it fill the remaining space.
.wrapper {
display: flex;
}
.wrapper div:first-child {
font-weight: bold;
}
.wrapper div:last-child {
flex: 1;
padding-left: 5px;
}
.wrapper div:last-child textarea {
width: 100%;
}
<div class="wrapper">
<div id="element1">
Description
</div>
<div id="element2">
<textarea rows="4" readonly="readonly">body</textarea>
</div>
</div>
And if the div's were there only as an attempt to align them, you can drop them all together
.wrapper {
display: flex;
}
.wrapper span {
font-weight: bold;
}
.wrapper textarea {
flex: 1;
margin-left: 5px;
}
<div class="wrapper">
<span>Description</span>
<textarea rows="4" readonly="readonly">body</textarea>
</div>
Delete your header and div,
Then add external css to your textarea
div{
display:block;
margin:auto;
position:static;
}
textarea{
box-sizing:border-box;
display:block;
margin:auto;
width:100%;
}
textarea::before{
content:"Description";
vertical-align:top;
}
I'm working on a form with an horizontal layout:
<div id="container">
<label for="ta">description</label>
<textarea id="ta" name="ta" cols="50" rows="10"></textarea>
</div>
The problem is that what I want is the textarea take up all available space that the label leaves in the same line. If I try with width=100% it jumps to the next line:
div * {
vertical-align: middle;
}
textarea {
width: 100%;
height: 300px;
}
Any idea to implement it without assign a fixed space to each tag?
Like this? http://jsfiddle.net/4QbMr/
<div id="container">
<label for="ta">description</label>
<div class="twrap"><textarea id="ta" name="ta" cols="50" rows="10"></textarea></div>
</div>
label {
float: left
}
.twrap {
overflow: hidden;
padding: 0 4px 0 12px
}
textarea {
width: 100%;
height: 300px;
}
For table-like behaviour with CSS, display: table is your friend:
#container {
display: table;
width: 100%;
}
#container label, #container textarea {
display: table-cell;
vertical-align: top;
}
#container textarea {
width: 100%;
height: 300px;
}
Note that if you specify cols and rows attributes, they will override your CSS.
http://jsfiddle.net/N9hvU/27/
I think this is the behavior you're looking for. Even though I prefer to use divs/spans for element positioning; tables have the unique behavior (from my experience; don't know if this is in w3 specs or not) of not letting items go onto the next row; regardless of how big they become.
So, by setting the table row width to 100 percent, and the width of the cell w/the text area to 100%, the text area will consume any width available.
<div id="container">
<table>
<tr style="width:100%;">
<td>
<label for="ta">description</label>
</td>
<td style="width:100%;">
<textarea id="ta" name="ta"></textarea>
</td>
</tr>
</table>
</div>
You need to specify width for label.
like
label{ width: 20%; } textarea{ width:80%; }
I would instead put text for the label in the div and textarea in a different div and float both divs (and specify widths for both as well).
use a percentage less than 100% and leave out the cols in the textarea.try this http://jsfiddle.net/bingjie2680/Bw4MR/
update: try this: http://jsfiddle.net/bingjie2680/Bw4MR/3/ you need to use table to accomplish this job.