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
Related
<div className="formContainer">
<InputBox types={"Questions"} setText={setQuestion} submit={submit} />
<InputBox types={"Solutions"} setText={setAnswer} submit={submit} />
</div>
Above are my html code and InputBox is a component of react which has a textArea nested between fieldset
.formContainer {
display: flex;
}
.inputBox {
flex: 1;
resize: none;
line-height: 30px;
border-radius: 0px;
border-style: none;
width: 100%;
max-width: 100%;
}
The desired pattern is two textarea in the fieldset aligns side by side with 50% width. I don't understand why my code shrinked two textarea and float to the left, please refer to the attached screencap , of the textarea and how could i fix that . Please kindly advise.
and your code do something?
I don't know react but I see that you put <div className="formContainer">. In html corect is <div class="formContainer">. Also on the InputBox you need to set a class:
as I said, I don't know react, but if you want to arrange 2 objects in the same row with css you need to put to the main container
display: flex;
flex-direction:row;
Also you need to set a smaller width to the .inputBox, if you put 100% is impossible for them to be aligned next to each other
I'm not familiar with React InputBox per se, but it looks to me like you simply haven't assigned you .inputBox class, to the inputBox component.
Maybe it should be something like this:
<div className="formContainer">
<InputBox types={"Questions"} setText={setQuestion} submit={submit} className="inputBox" />
<InputBox types={"Solutions"} setText={setAnswer} submit={submit} className="inputBox" />
</div>
Outside of that I put together a quick plain HTML mockup of what you (I think) are trying to achieve:
.formContainer {
display: flex;
gap: 10px;
}
fieldset {
position: relative;
padding: 0;
margin: 0;
height: auto;
border: none;
}
fieldset label {
position: absolute;
top: -15px;
left: 7px;
background: white;
padding: 6px;
}
.inputBox {
flex: 1;
resize: none;
line-height: 30px;
border-radius: 10px;
padding: 5px 12px;
}
<div class="formContainer">
<fieldset>
<label for="questions">Questions</label>
<textarea name="questions" rows="3" cols="20" class="inputBox" placeholder="Questions"></textarea>
</fieldset>
<fieldset>
<label for="solutions">Solutions</label>
<textarea name="solutions" rows="3" cols="20" class="inputBox" placeholder="Solutions"></textarea>
</fieldset>
</div>
Hopefully that will be enough to help you out a bit there?
Also, here is a codepen to see the mockup working:
I try to setup a multi column contact form by wrapping the texarea into a "second column" using a wrapped flexbox. I expected the textarea to be the same width as the text input. Actually, the text input (first column) is wider than the textarea (second column). In the sample I created on codepen, the difference is e.g. 12px.
In the below example, the textarea is wider than the fieldset. In this example the texarea (and the submit button) is 10px wider than the text inputs, respective the fieldset. Why is one element wider than another when it's wrapped within a flexbox?
In the code a single element should not be higher than the max-height of the entire flexbox.
* {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: column wrap;
max-height: 116px;
}
input[type=text] {
min-width: 0;
padding: 0;
margin: 0;
min-width: 0;
margin-bottom: 1em;
display: block;
width: 100%
}
fieldset {
padding: 0;
margin: 0;
}
textarea {
min-height: 50px;
max-height: 84px;
min-width: 0;
resize: vertical;
}
textarea, input[type="submit"] {
padding: 0;
margin: 0;
}
<form action="/doit" method="post">
<fieldset>
<input type="text" value="Text">
<input type="text" value="Text">
<input type="text" value="Text">
<input type="text" value="Text">
</fieldset>
<textarea>I am wider than the fieldset.</textarea>
<input type="submit" />
</form>
I tried it in Safari (Mojave) and Chrome 85.
Could anyone tell me what causes this behaviour?
The problem still exists in your code. You have set the max-height of your form to 116px (this time). The sum of the heights of input elements and textarea will definitely grow more than 116px and since your flex-wrap is wrap it will turn to a row. So you should not expect them to be of equal width.
If you want your text inputs to be of equal size and be next to each other you must use flex-direction: row. Your code can be something like:
* {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: row wrap;
}
input[type=text] {
min-width: 0;
padding: 0;
margin: 0;
min-width: 0;
margin-bottom: 1em;
display: block;
width: 100%
}
fieldset {
flex:1;
padding: 0;
margin: 0;
}
.textarea {
min-height: 50px;
max-height: 84px;
min-width: 0;
resize: vertical;
}
.submit{
align-self:center;
}
textarea, input[type="submit"] {
padding: 0;
margin: 0;
}
div{
flex:1;
display:flex;
flex-direction:column;
}
<form action="/doit" method="post">
<fieldset>
<input type="text" value="Text">
<input type="text" value="Text">
<input type="text" value="Text">
<input type="text" value="Text">
</fieldset>
<div >
<textarea class="textarea">I am wider than the fieldset.</textarea>
<input class="submit" type="submit" />
</div>
</form>
Note that I have wrapped your textarea and button in a <div> to be child of form element and gave it a flex:1. Then made that <div> a vertical flexbox itself.
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.
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?