How does one set a margin to siblings but not to the parent?
For example, I've got input fields, buttons and a text area. I do want margins between these elements but I do not want an (extra) margin to the parent element.
I know I can set separate values for top right bottom left but that's not applicable IMO.
body {
background-color: #717074;
font-family: sans-serif;
margin: 1em;
}
.d1 {
background-color: white;
margin: 0 auto;
padding: 1px 1em;
width: 960px;
}
.fw {
width: 100%
}
input {
margin: 5px
}
textarea {
width: 100%
}
<div class=d1>
<form method=post>
<input name=name type=text required placeholder="Naam">
<br>
<input name=email type=email required placeholder="Emailadres">
<textarea name=body rows=5></textarea>
<input type=submit>
</form>
</div>
So there should be margin between the name and email input elements but not between these two and the parent div (for example).
I can't cheat by setting left and right margin to 0 as that'd break things when the name and email elements would be on the same line.
Updated to work with inputs on a single line (no line break between).
Note that I've put all the inputs on to a single line in the HTML because the whitespace between the elements was being rendered! (See here for an explanation)
body {
background-color: #717074;
font-family: sans-serif;
margin: 1em;
}
.d1 {
background-color: white;
margin: 0 auto;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
width: 960px;
}
.fw {
width: 100%
}
input {
margin-top: 0px;
margin-left: 0px;
margin-right: 5px;
margin-bottom: 5px;
}
textarea {
width: 100%;
}
<div class=d1>
<form method=post>
<input name=name type=text required placeholder="Naam"><input name=email type=email required placeholder="Emailadres"><textarea name=body rows=5></textarea><input type=submit>
</form>
</div>
Howsat?
Related
I would like to create a dropdown that drops down a custom panel (div) instead of a list of options. That panel is irrelevant because it is not tied to the layout I am asking about. For the basic drop-down look I have the following:
<style>
.folder-selection {
width: 100%;
}
.dropdown-button {
float: right;
}
</style>
<div id=container>
<input type="text" class="folder-selection" />
<button type="button" class="dropdown-button">...</button>
</div>
Now I know the float and width 100% are not right, but I have a container div, with an input on the left and a button on the right. The button must remain fixed to the right of the input. If the container is narrow, the input must be narrow, and vice versa, but I want to achieve this without knowing at design time the width of the container.
The container should fit into any width and the input's width should adjust accordingly. Just like a normal select element, where the text portion always fills all the space not taken by the dropdown icon/button at its right.
Below example will help you. Let me know, if you don't want fixed width icon in right so I'll update this code accordingly.
#container {
position: relative;
border: 1px solid #ccc;
padding: 5px 40px 5px 5px;
margin: 0 0 10px;
}
.folder-selection {
width: 100%;
padding: 5px;
border: none;
box-sizing: border-box;
height: 30px;
}
.dropdown-button {
position: absolute;
top: 5px;
right: 5px;
height: 30px;
}
<div id=container>
<input type="text" class="folder-selection" />
<button type="button" class="dropdown-button">...</button>
</div>
<style>
.dropdown-button {
width: 16px; /*Set width of button*/
}
.folder-selection {
width: calc(100% - 16px); /*div's width minus button's width*/
}
</style>
<div id=container>
<input type="text" class="folder-selection" /><!-- this comment is to remove white space between the two elements
--><button type="button" class="dropdown-button">...</button>
</div>
You don't really have to set the width of the button as long as you know its width on runtime.
This code will help you to position your elements as you expected.
* {
box-sizing: border-box;
}
.dropdown-container {
width: 500px;
display: table;
background: orange;
}
.dropdown-container .input-container {
display: table-cell;
}
.dropdown-container .input-container input {
width: 100%;
padding-right: 10px;
}
.dropdown-container .button-container {
display: table-cell;
width: 150px;
}
.dropdown-container .button-container button {
width: 100%;
}
<div class="dropdown-container">
<div class="input-container">
<input type="text" class="folder-selection" />
</div>
<div class="button-container">
<button type="button" class="dropdown-button">Drop</button>
</div>
</div>
I have a form element which I want to take up the same width as its children, with no margin, but no matter what I do the browser makes its width + margin take up 100% of the width.
Here is the html:
<div class="container">
<form method="GET" action="http://localhost/search" accept-charset="UTF-8">
<div class="search centered">
<div class="input-container">
<input type="text" name="query" class="searchbar" placeholder="What do you want to search?" />
<button type="submit" class="search-button">Search</button>
</div>
</div>
</form>
</div>
and the css:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.search * {
height: 35px;
}
.searchbar {
width: 450px;
}
.brandname {
position: relative;
font-size: 500%;
font-family: 'Lato', sans-serif;
color: #1f0e3e;
text-align: center;
margin-bottom: 30px;
margin-top: 5%;
}
body {
margin: 10px;
}
.input-container{
float: left;
display: block;
outline-style: solid;
outline-color: #e3e3e3;
outline-width: 1px;
}
.searchbar{
margin-left: 5px;
}
.search button {
background-color: rgba(152,111,165,0.38);
background-repeat:no-repeat;
border: none;
cursor:pointer;
/*overflow: hidden;*/
outline-width: 1px;
outline-style: solid;
outline-color: #e3e3e3;
color: white;
}
.search input{
outline-width: 0px;
}
form{
height: 30px;
width: 100px;
margin-left: 0px;
}
and here is a fiddle where you can see that even if you force the form to have a small width, the browser forces a left-margin to take up the rest of the space.
How can i get rid of this margin and make the form automatically take up the space of its child?
Adding display table to the form element will make it auto size to it's children elements.
form {
display:table;
}
Here is a working fiddle: https://jsfiddle.net/bnah6jLe/
Why the form is 100% width by default
By default forms in most browsers have their display type set to block. In the specification for block context it is defined as follows.
In a block formatting context, each box's left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch)
Reference: https://www.w3.org/TR/CSS21/visuren.html#block-formatting
In short display:block is 100% width unless specified otherwise.
Side Note
Question: Why was table used for this example instead of something like inline-block.
Answer: I used table instead of inline-block because display context such as block and table are used as containing elements and do not group. Display context like inline-block and inline-table are used for child elements that are meant to be grouped together. It's a small difference but I thought considering form is usually meant as a container table would be more appropriate.
I've got approximately this layout code:
<form class="form">
<input type="text" placeholder="Enter something!" class="form-control" />
<input type="submit" class="btn btn-md btn-default" />
</div>
.form {
max-width: 500px;
margin: 0 auto;
}
.form input[type="text"] {
display: inline;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.form input[type="submit"] {
display: inline;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-top: -4px;
margin-left: -5px;
}
body {
padding: 20px;
}
.form {
max-width: 500px;
margin: 0 auto;
}
.form input[type="text"] {
display: inline;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.form input[type="submit"] {
display: inline;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-top: -4px;
margin-left: -5px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form class="form">
<input type="text" placeholder="Enter something!" class="form-control" />
<input type="submit" class="btn btn-md btn-default" />
</div>
I would like the button to be on the same line as the text box. But the default width of the text box is 100%, and that pushes the button to the next line. How can I get the text box to expand to be as big as possible without doing that?
Check out flexbox, you can specify the width of the button and let the text input grow and fill the space. The downside is it's a CSS3 feature and therefore not supported in older browsers.
There's no easy way to do this. Best is to give the text box and the button percentage widths. First get rid of the negative margin on the submit button. Then add these styles:
.form input[type="text"] {
width:80%;
}
.form input[type="submit"] {
width:17%;
}
The reason for the missing 3% is that buttons in particular in forms have a lot of extra style rules applied that add things like border and padding, and they differ depending on your browser.
jsFiddle
You can use max-width for text input
max-width: 430px; and button width width: 70px; to adjust with container form
You can also use percentage width;
jsfiddle link
I am wanting to make a form where all the fields, and the input buttons are perfectly horizontally aligned. I tried setting margin: 0 auto on all the items (after resetting the css) but it seems like the length of the text fields make it so the items do not look horizontally center (the input button takes up much less space). Is there an easy way to offset this difference in widths without using absolute positioning (I want this to be responsive).
Here is the html:
<h1>
Please upload your file
</h1>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="upload" multiple="multiple" ><br>
<input type="submit" value="Upload">
</form>
And the css:
h1, form {
display: block;
text-align: center;
color: red;
margin-top: 1.2em;
}
h1 {
font-size: 2em;
margin-top: 2em;
margin-bottom: 1em;
}
p {
margin-top: .2em;
margin-bottom: 1em;
}
input {
display: block;
margin:0 auto;
}
input[type=submit] {
font-size: 2em;
}
And here is the issue I am mentioning. (I would like the choose files button centered)
Just add a border to your input fields to make it clear that it's centre aligned:
JSFiddle
input {
display: block;
margin:0 auto;
border: 1px solid #cfcfcf;
}
You can try setting input to a relative position and reposition from there:
input {
display: block;
margin: 0 auto;
position: relative;
left: 25px;
}
For some reason it positions the button outside of the div, just above the top right corner. It's as if just above the top right corner of the div is acting just like the bottom right corner.
if i add bottom 10px, for example, it will start above the div and move it up 10px. The same thing happens with right
CSS:
#newSignupContent {
display: block;
position: relative;
width: 400px;
height: 250px;
margin: auto auto;
}
#newSignupContent label {
display: inline-block;
float: left;
clear: left;
width: 40%;
padding-right: 10px;
text-align: right;
color: white;
font-family:calibri, Times, serif;
font-size: 22px;
}
#newSignupContent input {
display: inline-block;
width: 50%;
float: left;
padding: 5px 10px 5px 0px;
}
#newSignupContent #newSignupSubmit {
position: absolute;
bottom: 0;
right: 0;
width: 80px;
height: 40px;
padding: 5px 10px 5px 10px;
}
Form:
<div id="newSignupContent">
<form action="/webroot/NewUserSignUpProcess" method="post">
<label>Account Name:</label>
<input type="text" name="txtAccountName">
<label>Email Address:</label>
<input type="text" name="txtEmailAddress">
<label>Password:</label>
<input type="text" name="txtPassword">
<input id="newSignupSubmit" type="submit" value="Submit">
</form>
</div>
Because of the * {position:relative;} you had there, your button position it self relatively to the 'form' element. The 'form' element, had no height, because all of its descendants had 'float:left;' and thus didn't "stretch" the form's height. The 'submit' button, positioned at 'bottom:0;right:0;' relative to the form, which had no height, resulted in what looked like the top right corner of the containing 'div'.
In the attached Fiddle Demo, notice that if you remove the 'position:relative;' form the 'form' element, everything sets up right.
I also added borders to the containing 'div' and to the 'form'.