I have:
<div>
<input id="input" type="text" />
<button id="submit">submit</button>
</div>
which gives me this
If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:
I want that the <input type="text" /> fills the whole horizontal new space but that the submit button remains in the same row.
I tired to use <input style="width:100%" type="text"/> but then it fills the whole row and the submit button appears in the next row:
I also tried a table as mentioned in that thread:
Liquid textfield width
The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty:
Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.
Thanks!
The "table" method you linked to will work, but you're missing one crucial property on your input elements: box-sizing.
http://cssdeck.com/labs/sbffl3l2
<div class="foo">
<div class="bar"><input type="text"></div>
<div class="bar"><input type="submit"></div>
</div>
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 100%;
}
input {
box-sizing: border-box; /* this is the key */
}
Prefixes may be required: http://caniuse.com/#feat=css3-boxsizing
I believe you can do this:
<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />
It's not advisable to do inline styles though.
Edit: Make sure you also define a fixed width for the button
Why not give width of 70% to input and 20% to button?
Related
I've got this search form: http://jsfiddle.net/1emsaoq1/2/
<div class="search_language">
<div class="menu_search_container">
<form action="/search">
<input autocomplete="off" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" id="search_field" name="q" placeholder="Rechercher..." type="text">
</form>
</div>
</div>
The result I'm trying to get is having the input vertically aligned inside the red div. When I inspect the input and parents, I can clearly see that it's parent is well vertically aligned inside the red div but not the input. What is wrong here?
Add vertical-align: top to the #search_field element:
Updated Example
.menu_search_container form #search_field {
/* other styles.. */
vertical-align: top;
}
By default, the input element's display is inline-block. In addition, the default value of vertical-align is baseline. Changing the value to top essentially corrects this behavior you are seeing.
The problem comes from your line-height into your .search_langage, set it to zero or take it off, and your problem will be fix.
I have a web application in which i have these two submit button inside a table
<input type="submit" value="Modifier" name="btn" style="display:inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" />
I'd like that it be displayed in the same line but i have this result:
Why this happens? how can i fix my code to show the buttons in the same line?
I'd stay away from this method of css personally, just my preference this will mean that every submit button is exactly the same but what if you don't want this styling with every submit button. But then again that method is much better than doing css inside a HTML file
input[type=submit]{
}
You're better off giving the submit buttons a class called submit then you can pick and choose which submits you want to do you're styling for
<input type="submit" class="submit">
.submit{
float: left;
etc.
}
The main problem is your table column widths perhaps give them all a class and give them a width and/or height that meets your needs inside an external css file.
you may try this styling;
input[type="submit"] {
float: right
}
you may also try float left.
Though you could increase the width of the table column or use display: inline-block, maybe you want to do something else:
Increaseing table/column width seems natural, as the two buttons look too wide to fit into that.
Once you have it, you may prefer to use something like block display with a float component.
The inline-block performs poorly in Internet Explorer browsers, even in recent versions like IE9, and a lot of your visitors will be using it for a while.
input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}
You can try like this
Define a css rules for your submit buttons
input[type=submit] {
display: inline-block;
float: left; /* use this if you want them to be aligned other wise not */
width: as per needed
}
here is an example.. uses bootstrap though
http://jsfiddle.net/QYBHm/
<h3>
<input type="button" href="/users/sign_up">Sign up</input>
or
<input type="button" href="/users/sign_in">Sign in</input>
</h3>
Sign up
or
Sign in
Increase your column size if not auto and add float:left to "Exporter"
In your table row in column with the buttons try this code
<td nowrap="nowrap">
<input type="submit" value="Modifier" name="btn" style="display: inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left: 10px;" />
</td>
I would say that the container column isn't wide enough, so even too they are inline they appear like this. Try changing the width of that column to check if that's the problem.
Try this css
input[type=submit] {
display: inline-block;
float: left;
width: /*adjust as per your table */;
}
Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}
Im currently trying to fix a form that i have built to work on a responsive layout
Ive attached a jpeg of what the form should look like a on full version of the site with the comments field aligned to the right of the rest of fields but when viewed on a mobile i want the comments field to drop below the rest of the fields.
Because i was advised to wrap the comments field in a DIV and place it before the rest of the form fields then float it right, when i view the mobile version the comments field sits at the top of the form instead of the bottom
any suggestions to how i can fix this issue?
see the CSS & HTML below
<style type="text/css">
body {
background-color: #FFF;
}
#form {
width:960px;
background-color:#edf8ff;
height:650px;
}
.gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
}
.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
}
.gezza-comments{
width:437px;
height:300px;
}
-->
</style></head>
<body>
<div id="form">
<form action="" class="gezza-form" method="post" >
<div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" />
</form>
Should all fields have a fixed width? Wrap each column in a div, then float both divs left and give them an explicit width.
Put the div with the text area below the other fields in the HTML.
That should get you a lot closer.
Then, you will need to wrap each field / label pair in a div too.
On the mobile view it should all go into place more or less (bit of padding / margin needed maybe).
Then, on the wider view float the div for the text area right and the other fields' divs left. You'll need to set width for them .. say 49% each.
You'll need to use a clear fix on the element after this lot to clear the floats.
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}