I need to fill a div element with a button and input. The button'll have the exact width and fthe rest will be filled with the input. In my code I can't even set the width of the button and the input is always wider than the parent.
Then I'll set overlay: hidden to the .bar so that the input with the button look like I want. But for that to behave like I want, I need to set the mentioned widths correctly. So what could I do to fill this parent div with this button of exact width and input for the rest of its width but no more than that? I tried lots of properties, nothing helped. Only condition is, that I want display: flex remain in the code, everything else can be changed. Thanks for suggestions.
.container {
width:205px;
}
.bar {
border-radius: 25px;
box-sizing: border-box;
display: flex;
//overflow: hidden;
}
.bar_input {
font-size: 15px;
height: 20px;
box-sizing: border-box;
width: 100%;
}
.bar_button {
padding: 8px 8px 14px 1px;
width: 37px;
height: 35px;
left: 3px;
right: auto;
}
<div class="container u-l-fr" style="background-color: darkred">
<div class="container-bar" style="background-color: darkblue">
<div class="bar" style="background-color: gold">
<button aria-label="Search" class="bar_button" role="button" type="button" style="background-color: black;"></button>
<input class="bar_input" id="search_input" placeholder="Search">
</div>
</div>
</div>
Its because your container width is less than the default width that is assigned to a <input> element. So you can either increase width of your container or use this code.
.bar_input {
font-size: 15px;
height: 20px;
box-sizing: border-box;
width: calc(100% - 37px);
}
Using bootstrap you can add class to the button .btn-block
Otherwise you can add style width: 100%; to the button
Related
I am trying to make a list of buttons in an absolute <div>. The buttons should span over the whole <div> container, without exceeding them. They do though I am wondering what I did wrong.
.container {
position: absolute;
background-color: yellow;
}
.btn {
padding: 8px;
margin: 8px;
width: 100%;
display: block;
background-color: blue;
}
<div class="container">
<button class="btn">Text</button>
<button class="btn">Text2</button>
</div>
Since you are using margin in your child element, the container will have the width of child only. But when using margin, it will overflow the element.
One way to workaround is to give a padding on left and right on the container, and a margin top and bottom on the child. Hope it makes sense.
.container {
position: absolute;
background-color: yellow;
padding: 0 8px;
}
.btn {
padding: 8px;
margin: 8px 0;
width: 100%;
display: block;
background-color: blue;
}
<div class="container">
<button class="btn">Text</button>
<button class="btn">Text2</button>
</div>
Regards
Margins that are hardcoded to a value will take precedence over relative sizing. As a result, it will push make space for the element on the DOM irrespective of the properties of its parent container.
A way to achieve what you want is to set the padding (to the same size as your required margin) on the parent container instead as I've done to achieve the border gap you're looking for rather than setting margin on the buttons themselves.
.container {
position: absolute;
background-color: yellow;
padding: 8px;
}
.btn {
padding: 8px;
width: 100%;
display: block;
background-color: blue;
}
<div class="container">
<button class="btn">Text</button>
<button class="btn">Text2</button>
</div>
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.
The text is deforming my box.
here is what I have:
<div class="BigOne" ></div>
<div class="leftOne" ></div>
<div class="rightOne">This text is deforming the "leftOne"</div>
</div>
And the CSS:
.leftOne {
float: left;
width: 100%;
height: 100%;
border: 3px dashed #444;
border-radius: 7px;
box-sizing: border-box;
}
.rightOne {
float: left;
width: 100%;
height: 100%;
border: 3px dashed #444;
border-radius: 7px;
box-sizing: border-box;
}
How can I precent the text of right div for example, from deforming left div?
Thank you
What I understand from your question and explanation, you want the width of leftOne and rightOne to always be the same size regardless of BigOne's width. Then you'd want to change the width to 50% instead of 100% like so:
.leftOne, .rightOne {
float: left;
width: 50%; /* Change this to 50% instead of 100% */
height: 100%;
border: 3px dashed #444;
border-radius: 7px;
box-sizing: border-box;
}
Take note that you can refactor the CSS because both classes have the same styling. If you want to apply different styling to each of them, you can separate them back.
I also noticed that you have set the height of both of them to 100%. If you want them to maintain the same height, you need to specify the height of BigOne class. Eg:
.bigOne {
width: 100%; /*or whatever width you want to set it to */
height: 100px; /*or whatever height you want to set it to */
}
Another thing, you have an extra </div> on the first line. Remove it and your code should work.
<div class="bigOne">
<div class="leftOne"></div>
<div class="rightOne">This text is deforming the "leftOne"</div>
</div>
Hope that helps.
i have a really annoying issue with sizing an input field and i don't understand how it works.
I got this code. HTML:
<div class="container">
<div class="receipt">
<p class="location"></p>
<input type="text" id="checkoutField">
<div class="checkoutButton">
<a href="#/checkout">
<p>some button</p>
</a>
</div>
</div>
</div>
The container got a max width of 480px. And i want both the checkoutButton div and the input field to stretch out to that width limit, while also having a 20px margin on both sides. The elements should also be responsive, which is why they doesnt have a fixed size.
This works fine on the div, but i cant get the input field to work the same..
I made a jsfiddle that includes the CSS code aswell: jsfiddle
Why is the input behaving like this and how do i fix it?
Instead of calling margin left & right to individual items, it's better call padding for parent container.
Chk the Modified code - http://jsfiddle.net/k7vzod4y/3/
.receipt {
padding: 0 20px 24px;
}
.receipt .checkoutButton {
margin: 0;
}
.receipt #checkoutField {
width: 100%;
margin: 0;
}
Hope that helps.
It is possible easily using CSS3 calc function.
You could set you width to 100% - 40px to take care of your margins.
Something like this:
.receipt #checkoutField {
width: calc(100% - 40px);
border: 0;
height: 40px;
background-color: #35aba2;
border-radius: 4px;
margin-top: -6px;
margin-left: 20px;
}
You can see this in action in you updated fiddle
So after looking at your code example I would use the following method. I used the following on the JSFiddle you linked and it worked as you mentioned you wanted it to.
Set the width of the input field to 100%:
.receipt #checkoutField {
border: 0;
width: 100%;
height: 40px;
background-color: #35aba2;
border-radius: 4px;
margin-top: -6px;
margin-left: 20px;
margin-right: 20px;
}
And then 100% width on the checkout button as well:
.receipt .checkoutButton {
width: 100%;
height: 50px;
background-color: #35aba2;
border-radius: 4px;
margin-left: 20px;
margin-right: 20px;
cursor: pointer;
margin-top: -6px;
}
This method is also responsive because I have used percentages which are related units so they inherit from there parent. So a width of 100% will always stay at the full width of it's parent regardless of the viewport size.