Task: Make text box 100% width but allow enough room for button.
Problem: Button appears on next line and text box exceeds width of its container.
<div class="field">
<input type="text" name="my-field" />
<input type="button" id="my-button" value="Add +" />
</div>
.field {
margin-right: -70px;
width: 100%;
}
.field input[type=text] {
display: block;
float: left;
margin-right: 70px;
}
.field input[type=button] {
display: block;
float: right;
}
My primary layout uses the following trick to achieve flexible width with fixed sidebar, but for some reason this is not working on the above.
<div class="outer-wrap">
<div class="content">
...
</div>
<div class="sidebar">
...
</div>
</div>
.outer-wrap {
margin-right: -300px;
width: 100%;
}
.content {
float: left;
margin-right: 300px;
}
.sidebar {
float: right;
}
What mistake am I making here?
You have to screw with the HTML a bit, but otherwise this works perfectly in IE7+ and all modern browsers.
See: http://jsfiddle.net/thirtydot/25bZC/
CSS:
.field > span {
display: block;
overflow: hidden;
padding-right: 10px
}
.field input[type=text] {
width: 100%
}
.field input[type=button] {
float: right
}
HTML:
<div class="field">
<input type="button" id="my-button" value="Add +" />
<span><input type="text" name="my-field" /></span>
</div>
To pull this off you must ensure that the element which you are floating right comes before the one floating left. Like this
<div class="field">
<input type="button" id="my-button" value="Add +" />
<input type="text" name="my-field" />
</div>
try giving fixed width to
field input[type=text]
and
.field input[type=button]
Related
I have a div with two inputs inside. One text box and one button. I would like to set the div to be a certain width (say 30em) and have the text box fill 80% of it and the button the other 20%. The inputs should be side by side. The div is centered in the page.
<div class="container">
<input class="input" type="text" placeholder="Some text">
<input class="button" type="submit">
</div>
I have this scss so far
.container {
margin-left: auto;
margin-right: auto;
width: 30em;
.input {
width: 80%;
}
.button {
width: 20%;
}
}
So far the text box takes up 80% but floats in the middle and the button under it. How can I line them up side by side to fill the div?
Those elements are inline by default, so the white space between them is preserved, which makes their overall width 20% + 80% + [a space], which is > 100%.
You can...
remove the white space between them
use display: flex on the parent
float the inputs.
* {margin:0;padding:0;box-sizing:border-box;}
.container {
margin-left: auto;
margin-right: auto;
width: 30em;
}
.flex {
display: flex;
}
.input {
width: 80%;
}
.button {
width: 20%;
}
.float {
overflow: auto;
}
.float input {
float: left;
}
<div class="container">
<input class="input" type="text" placeholder="Some text"><input class="button" type="submit">
</div>
<div class="container flex">
<input class="input" type="text" placeholder="Some text">
<input class="button" type="submit">
</div>
<div class="container float">
<input class="input" type="text" placeholder="Some text">
<input class="button" type="submit">
</div>
I'm building a website, but I have a problem.
I have one div that creates the content with a BG color!
The problem is, the text appears in line to the bottom but I want them next to each other!
Here is a link to a screenshot for an example:
http://www.mupload.nl/img/9x7jco1v45f.png
I've tried some code in my CSS but nothing worked.
This is what I have now:
CSS:
#rechts {
float: right;
margin-right: 10px;
}
#lings {
float: left;
margin-left: 10px;
}
.inhoud {
padding-bottom:100px; /* Height of the footer element */
padding-top:150px;
background-color: #f5f5f5;
z-index: 999;
margin-left: 10%;
margin-right: 10%;
}
HTML:
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
utilize display:inline-block; like below
.container {
background-color: lightgray;
}
.section {
display: inline-block;
vertical-align: top;
width: 49%;
}
<div class="container">
<div class="section">
Some random inforamtion here<br/>
more contact information
</div>
<div class="section right">
Name<br/>
<input type="text" /><br/>
Email<br/>
<input type="text" /><br/>
Phone<br/>
<input type="text" /><br/>
</div>
</div>
For the HTML you provided, simply change your css to
.contactInhoudLings{
float: left;
width: 50%;
}
.contactInhoudRechts{
float: left;
width: 50%;
}
Demo
You could use flex to split the container in two or any other number.
.container {
display: flex;
}
.col {
flex-basis: 0;
flex-grow: 1;
}
<div class="container">
<div class="col">
text
</div>
<div class="col">
your form
<form>
<label for=name>Name:<label/>
<input type=text name=name placeholder=name />
<input type=submit />
</form>
</div>
</div>
If you want margin-left and margin-right than try this:
HTML
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// Here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
CSS
.inhoud{
width: 100%;
}
.contactInhoudLings{
background-color: red;
float: right;
margin-right: 1%;
width:49%;
}
.contactInhoudRechts{
background-color: green;
float: left;
margin-left: 1%;
width:49%;
}
Look also the jsfiddle example
I'm trying to create a chat area. It'll display the messages on top and the input on the bottom. I want to keep the "esc" button and "send" button the same width, but increase the textarea to maximum width while keeping all three elements inline. This is what I've tried so far.
<div class="col-sm-8">
<div id="chatArea">
</div>
<form class="form-inline" role="form" id="userInput">
<button id="endChat" type="button" class="btn btn-danger">Esc</button>
<div class="form-group">
<textarea class="form-control" rows="5" id="messageArea"></textarea>
</div>
<button id="sendMessage" type="submit" class="btn btn-info">Send</button>
</form>
</div>
and the css
#chatArea {
height: 500px;
background-color: black;
}
#messageArea {
width: 322px;
}
#endChat, #sendMessage {
width: 70px;
height: 110px;
}
But this is the result (didn't show the full chatArea div, only the bottom).
So how can we make it so the textArea resizes itself to be of maximum width while the 3 elements (esc, textArea, and send) are inline.
HTML:
<form role="form" id="userInput">
<button id="endChat" type="button" class="btn btn-danger">Esc</button>
<button id="sendMessage" type="submit" class="btn btn-info">Send</button>
<div class="form-group">
<textarea class="form-control" rows="5" id="messageArea"></textarea>
</div>
</form>
Note the order of #endChat, #sendMessage and .form-group elements.
CSS:
#endChat {
float: left;
}
#sendMessage {
float: right;
}
.form-group {
overflow: hidden;
}
#messageArea {
width: 100%;
}
#endChat, #sendMessage {
height: 110px;
}
When using bootstrap I suggest to try formatting the bootstrap classes in css. Often the bootstrap formatting overrides your own css file unless you override them in your own css-file. Try this:
#endChat {
float: left;
}
#sendMessage {
float: right;
}
.form-group {
overflow: hidden;
display: block;
}
.form-control#messageArea{
width: 100%;
}
#endChat, #sendMessage {
height: 110px;
}
remove following code from your css:
#messageArea {
width: 322px;
}
form-control class of textarea will auto resize its width to 100% of the area.
Putting two divs on the same line is an old question. But I can't find a solution when working with simple_form in rails. What I want to do is to display content and its label on the same line. The width of the label is 125px (.left) and the content is on the right (.right). The text in the label is aligned to the right and the text in content is aligned to the left.
Here is the HTML:
<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8">
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
</div>
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div class="input string required">
Here is the CSS:
.simple_form div.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}
.simple_form div.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}
However, in the result, there is a linebreak, like so:
Proj Name：
must have a name
The erb code of the simple form is:
<div class="left">Proj Name：</div><div class="right"><%= #project.name %></div>
I don't want to use a table but CSS only to solve the issue.
Your css is fine, but I think it's not applying on divs. Just write simple class name and then try.
You can check it at Jsfiddle.
.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}
.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}
You can't float or set the width of an inline element. Remove display: inline; from both classes and your markup should present fine.
EDIT: You can set the width, but it will cause the element to be rendered as a block.
why not use flexbox ? so wrap them into another div like that
.flexContainer {
margin: 2px 10px;
display: flex;
}
.left {
flex-basis : 30%;
}
.right {
flex-basis : 30%;
}
<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8">
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
</div>
<div class="flexContainer">
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
</div>
<div class="input string required"> </div>
</form>
feel free to play with flex-basis percentage to get more customized space.
I have a form input with a label next to it, like this:
<div id="loginbox">
<form>
<div>
<span>Username</span>
<input type="text">
</div>
<div>
<span>Password</span>
<input type="password">
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
Then I have some CSS that sets up the width of the login box and the span fields, like so:
#loginbox {
border: 1px solid black;
width: 300px;
}
#loginbox span {
display: inline-block;
width: 80px;
text-align: right;
}
Here is the jsfiddle for this code:
http://jsfiddle.net/7TNNq/
Notice how the input boxes do not span the entire length of the div. How do I get it to expand fully?
You could put
#loginbox div input {
width: 70%;
}
it will expand to the edge of the div, but I'm sure there's a better way to go about it.
Hope this helps
See: http://jsfiddle.net/thirtydot/tgGLv/
CSS:
#loginbox {
border: 1px solid black;
width: 300px;
}
#loginbox label {
float: left;
width: 80px;
}
#loginbox span {
display: block;
overflow: hidden;
padding: 0 4px 0 0;
}
#loginbox span input {
width: 100%;
}
HTML:
<div id="loginbox">
<form>
<div>
<label>Username</label>
<span><input type="text"></span>
</div>
<div>
<label>Password</label>
<span><input type="password"></span>
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
Here it is.
http://jsfiddle.net/7TNNq/35/
Or you can set fixed width as #spike suggested.