This question already has answers here:
How to make Flexbox items the same size
(10 answers)
Closed 2 years ago.
I am very confused about the following problem. HTML:
<div className="SearchBar">
<div className="SearchBar-container">
<input />
<input />
</div>
</div>
CSS:
SearchBar {
background-color: #0055ff;
margin: 0 auto;
border-radius: 10px;
width: 80%;
border: 2px solid red;
}
.SearchBar-container {
display: flex;
}
.SearchBar-container input {
border: 1px solid #fff;
border-radius: 4px;
font-size: .77rem;
font-weight: 500;
height: 40px;
}
If I try ANY other HTML tag like span, div, a whatever it aligns them in the middle perfectly well. But elements go straight to the right... I tried display:inline-block earlier but the same problem. Any help is much appreciated!
For the record I want two input fields equally horizontally distributed within a div!
If you add flex:1 to the CSS for the inputs they will get evenly distributed in the flexed row.
I've added color background here so you can see clearly which is what element.
SearchBar {
background-color: #0055ff;
margin: 0 auto;
border-radius: 10px;
width: 80%;
border: 2px solid red;
}
.SearchBar-container {
background-color: magenta;
display: flex;
}
.SearchBar-container input {
background-color: cyan;
border: 1px solid #fff;
border-radius: 4px;
font-size: .77rem;
font-weight: 500;
height: 40px;
flex: 1;
}
<div class="SearchBar">
<div class="SearchBar-container">
<input />
<input />
</div>
</div>
Related
This question already has answers here:
CSS two divs next to each other
(13 answers)
Closed 1 year ago.
I tried to align 2 divs on the same line without using float and width. I am using below code.
.first{
color: #377fd9;
font-size: 1.375rem;
margin-bottom: 10px;
margin: 15px 0px 0px 20px;
padding-top: 35px;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
}
.second{
cursor: pointer;
text-align: end;
padding: 8px 0;
}
<div class="first">First</div>
<div class="second">Second</div>
Looking at the required layout, the borders and padding refer to the whole thing, not just the First div.
If you put both divs in a container and put that styling on the container, you could use flex to align the divs within container.
.container {
display: flex;
margin-bottom: 10px;
margin: 15px 0px 0px 20px;
padding-top: 35px;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
}
.first {
color: #377fd9;
font-size: 1.375rem;
}
.second {
cursor: pointer;
text-align: end;
padding: 8px 0;
}
.first,
.second {
flex: 1;
}
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
</div>
Div is a block element by default and cannot be place side by side with other elements but you can change that by adding display:inline-block to your CSS like so
.first{
color: #377fd9;
font-size: 1.375rem;
margin-bottom: 10px;
margin: 15px 0px 0px 20px;
padding-top: 35px;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
display:inline-block;
}
.second{
cursor: pointer;
text-align: end;
padding: 8px 0;
display:inline-block;
}
<div class="first">First</div>
<div class="second">Second</div>
Just wrap it inside a parent element, and use flexbox.
You can use your other styles with this if you want. If you don't need the space between the div's, you can remove the flex: 1 assigned to the div.
.first{
color: #377fd9;
}
.second{
cursor: pointer;
}
section {
display: flex;
}
div {
flex: 1;
}
<section>
<div class="first">First</div>
<div class="second">Second</div>
</section>
<style>
#main{display:grid;
grid-template-columns:1fr 1fr;
}
</style>
<div id="main">
<div class="first">First</div>
<div class="second">Second</div>
</div>
You can rely on flex box to perform that, For that you have to have a container which has display CSS property set to flex and all sub element will be align on the same line as the default Flex Direction is ROW
.container {
display: flex;
}
.container div {
flex-grow: 1;
}
.first {
background: #34D399;
}
.second {
background: #1E3A8A;
}
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
<div>
As you can see on the .container div selector I set all item to have equal width using flex-grow: 1;
You can use flex in your layout. Working eg. i hope this will work for you.
https://codesandbox.io/s/quizzical-banzai-dz5sm?file=/index.html
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I'm trying to create the following form with the input fields having a diagonal side so they fit nicely together, see image below for more accurate description.
However i'm unable to achieve this as i have no idea on how to do this. I tried with transparant borders but without succes.
Anyone an idea on how to do this?
I love Ilya's skew solution. Super creative.
Here's an option using some :after pseudo-elements and CSS triangles to create the skewed effect. To achieve the desired effect we add :after pseudo elements to the right-side of the left inputs, and to the left-side of the right input/button.
Here's the end effect:
.container {
display: flex;
flex-direction: column;
background-color: #565452;
padding: 20px;
}
.row {
display: flex;
}
.row:not(:last-child) {
margin-bottom: 60px;
}
.field {
width: calc(100% - 10px);
position: relative;
background-color: #565452;
}
.field:first-child {
margin-right: 30px;
}
.field:after {
content: "";
display: block;
position: absolute;
top: 0;
width: 0px;
height: 0px;
}
.field:first-child:after {
right: -15px;
border-top: 60px solid #ffffff;
border-right: 15px solid transparent;
}
.field:last-child:after {
left: -15px;
border-bottom: 60px solid #ffffff;
border-left: 15px solid transparent;
}
.field.field--button {
flex-basis: 25%;
}
.field.field--button:after {
border-bottom: 60px solid #F9D838;
}
.input {
border: none;
line-height: 60px;
outline: none;
padding: 0 15px;
width: 100%;
box-sizing: border-box;
background-color: #ffffff;
font-size: 18px;
}
.input::placeholder {
color: #cccccc;
}
.button {
background-color: #F9D838;
color: #ffffff;
border: none;
outline: none;
line-height: 60px;
font-size: 30px;
width: 100%;
padding: 0 30px 0 20px;
text-transform: uppercase;
}
<form>
<div class="container">
<div class="row">
<div class="field">
<input class="input" placeholder="Voornaa m" />
</div>
<div class="field">
<input class="input" placeholder="Achternaa m" />
</div>
</div>
<div class="row">
<div class="field">
<input class="input" placeholder="E-mail" />
</div>
<div class="field field--button">
<button class="button" type="submit">Go</button>
</div>
</div>
</div>
</form>
You can apply transform: skewX for the container, "undo" it (by applying the same transform, but with the opposite sign of the angle) for the items, and hide the outer corners with overflow:hidden of the outer container, like this:
form {
margin: 20px;
overflow: hidden;
width: 350px;
}
.row {
display: flex;
transform: skewX(-15deg);
margin: 0 -5px;
}
.cell {
display: flex;
margin: 0 3px;
overflow: hidden;
}
.wide {
flex: 1;
}
.cell > * {
transform: skewX(15deg);
margin: 0 -5px;
border: none;
flex: 1;
}
input {
padding: 4px 5px 4px 15px;
background: yellow;
}
button {
padding: 4px 25px 4px 20px;
background: pink;
}
<form class="outer-container">
<div class="row">
<div class="cell wide"><input placeholder="enter something"></div>
<div class="cell"><button>Press me</button></div>
</div>
</form>
I'd add a seperate span element to the end and then use border-bottom/top/left/right and set them to the color that you need.
Something like this: http://jsfiddle.net/delnolan/3jbtf9f1/
<style>
.angled-input{
border: none;
height: 50px;
float: left;
display:block;
}
input:focus{
outline: none;
}
.add-angle{
display: block;
float:left;
border-right:30px solid transparent;
border-bottom: 50px solid #ffffff;
}
</style>
<form>
<input class="angled-input"/><span class="add-angle"></span>
</form>
I have some struggle getting all button same size when there is placed different content inside the button. looking for some tips and trick that can help me understand this better.
here is a picture of the situasjon:
Here is the css code i have used for the button part:
.but {
background-color: white;
color: black;
border: 2px solid #C8C8C8;
height: 1.5em;
text-decoration: none;
display: inline-block;
font-size: 1.2em;
cursor: pointer;
margin: -2px;
}
.symbox {
width: 20em;
height: 5.2em;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
margin: 1px 0px;
}
.but is all buttons and .symbox is the border around the buttons
You can use flexbox, something like this:
.container {
width: 4em;
display:flex;
flex-wrap:wrap;
}
.but {
border: 2px solid #ccc;
padding: 2px;
text-align: center;
flex-grow: 1;
}
<div class="container">
<div class="but">a</div>
<div class="but">b</div>
<div class="but">c</div>
<div class="but">de</div>
<div class="but">f</div>
<div class="but">ghi</div>
<div class="but">j</div>
<div class="but">k</div>
<div class="but">l</div>
<div class="but">m</div>
</div>
Here's a really nice guide on how to use flexbox effectively: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I'm experiencing a strange behaviour with the HTML button tag. It seems that when I place two buttons side by side, they have a 4px gap between them appearing out of nowhere.
Here is a fiddle which shows the issue.
As you can see from the image below, FireBug shows that the gap is neither a margin or a padding (since a padding would be shown in purple).
As a note: I'm using the latest version of Firefox on Windows 8.1 and I tried also with the CSS Reset from Eric Mayer, but the gap is still there.
It's not a really important problem, but it would be nice to know if it's normal or not and what causes it.
The problem is that in inline-block elements the whitespace in HTML becomes visual space on screen. Some solutions to fix it:
Use font-size: 0 to parent container(you have to define font-size to child elements):
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
font-size: 0;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons">
<button>Button1</button>
<button>Button2</button>
</div>
Another one is to use negative margin-left: -4px
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
margin-left: -4px;
}
<div class="buttons">
<button>Button1</button>
<button>Button2</button>
</div>
Last but i don't like it at all is to use html comments as spacers
between gaps:
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons">
<button>Button1</button><!--
--><button>Button2</button>
</div>
All above will work. Good luck :)
It's because you have whitespace between button elements. Change your HTML to:
Fiddle
<div class="buttons">
<button>Button1</button><button>Button2</button>
</div>
If you just want to display one line between these buttons, add margin: -1px.
Fiddle
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
margin: -1px;
cursor: pointer;
}
Additional Tweaks:
In Firefox, when you click on a button, it displays a weird dotted border like below:
Fiddle
To get rid of this, add this to your CSS:
button::-moz-focus-inner {
border: 0;
}
One more thing(Firefox): when you click on the button, the text moves. To prevent this add this to your CSS:
Fiddle
button:active {
padding: 0;
}
It can be corrected by
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
float:left;
}
As others have said, it is the whitespace between your elements. If you're using PHP, you could do something like this:
<div class="buttons">
<button>Button1</button><?php
?><button>Button2</button>
</div>
Otherwise, you could do this:
<div class="buttons">
<button>Button1</button><
button>Button2</button>
</div>
Or this, as suggested from the comments:
<div class="buttons">
<button>Button1</button><!--
--><button>Button2</button>
</div>
if you float: right; or float: left; you will see no space.
jsfiddle
here's the code:
[...]
<style>
.hex {
float: left;
background-color: transparent;}
.top, .bottom {
width: 0;
border-left: 2.2em solid transparent;
border-right: 2.2em solid transparent;}
.bottom{border-top: 1.25em solid #6C6;}
.top{border-bottom: 1.25em solid #6C6;}
.middle{
width: 1.46em;
height: 0.8em;
background: #6C6;
text-align: center;
font-size: 3em;
line-height: 1em;
margin: 0 auto;
border: 1px solid red;}
.hex .middle input{
color: black;
text-align: center;
background: transparent;
border: 1px solid;
width:5em;}
</style>
[...]
<body>
<div class="hex">
<div class="top"></div>
<div class="middle">
<input type="text" class="playerName" id="name1" maxlength="7" value="what" disabled/>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
full example - http://jsbin.com/iqanoh/1
could someone please explain me, why can't I control position of textbox(black) inside the div(red). It does not react for any: margin or padding changes. Generally I'd like to center (horizontally and vertically), but it's always on bottom even a little bit under.
You need to set display: block to the input to make margin take effect. By default input has display: inline and it wont work with margin.
there is a problem in the .middle div
.middle {
background: none repeat scroll 0 0 #66CC66;
border: 1px solid red;
font-size: 3em;
height: 0.8em;
line-height: 1em;
margin: 0 auto;
text-align: center;
width: 1.46em;
}
remove font-size, line-height and width from it.
hope this will solve your issue.