CODEWITHSUNDEEP
htmlcss
idlehand
idlehand

Reputation: 421

Organizing search bar and buttons with CSS

I'm putting together a little web app using React and Firebase and I'm having trouble lining things up.

Ideally, I'd like the search bar and buttons to end up being centered on the screen in a straight line — search bar, then green button, then yellow, then red. All touching one another. If the page size is shrunken, the buttons ideally would shrink and stay in line with the search bar.

HTML 

<div class="searchArea">
<div class="formWrapper">
<input class="playerInput" placeholder="Search by player name" />
</div>
<div class="formButtons">
<button class="upvoteButton">&#9650;</button>
<button class="downvoteButton">&#9660;</button>
<button class="injuryButton">&times;</button>
</div>
</div>

Here's the pen — https://codepen.io/scottmiller2/pen/bYNPVm

Any direction is appreciated. I tried a lot of margin tweaking but set it back to default and put it in a pen. I've made things like this work before with trial and error, but I'm curious of how things should properly be lined up like this when preparing for resizing of a window. Thanks in advance

Here is the code which displays the search section:

<div className="playersFooter">
<PlayerForm addPlayer={this.addPlayer}/>
</div>

Corresponding CSS

.playersFooter {
display: flex;
flex: 1 1 5%;
background-color: rgba(0, 0, 0, 0, 0.5);
}

Upvotes: 0

Views: 899

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105893

you can also use table-layout for this :

/* updates/addition */

* {
  box-sizing: border-box;
}

.searchArea {
  display: table;
  margin: auto;
}

.formWrapper,
.formButtons {
  display: table-cell;
  vertical-align: middle;
}

.formButtons {
  white-space: nowrap;
  font-size: 0;
}

.formButtons button {
  font-size: 1rem;
  /* to hide swallow white-space and instead float:right initially used*/
}


/* end addition */


/*search box*/

.playerInput {
  width: 450px;
  min-width: 300px;
  font-size: 1.3em;
  padding-left: 20px;
  height: 55px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: rgba(34, 49, 63, 0.8);
  color: #fff;
  transition: 0.2s ease-out;
  vertical-align: top;
}

.playerInput:focus {
  background-color: rgba(255, 255, 255, 0.60);
  color: #111;
  transition: 0.2s ease-in;
}

.upvoteButton {
  border: none;
  height: 55px;
  padding: 8px 24px;
  font-size: 0.8em;
  font-family: "Droid Sans", sans-serif;
  background-color: #00ab9e;
  color: #fff;
  transition: 0.2s ease-out;
}

.downvoteButton {
  border: none;
  height: 55px;
  padding: 8px 24px;
  font-size: 0.8em;
  font-family: "Droid Sans", sans-serif;
  background-color: #fcce66;
  color: #fff;
  transition: 0.2s ease-out;
}

.injuryButton {
  border: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 55px;
  padding: 8px 24px;
  font-size: 0.8em;
  font-family: "Droid Sans", sans-serif;
  background-color: #fb655a;
  color: #fff;
  transition: 0.2s ease-out;
}

.upvoteButton:hover {
  background-color: #02ffb6;
  color: #fff;
  transition: 0.2s ease-out;
}

.downvoteButton:hover {
  background-color: #fbf03e;
  color: #fff;
  transition: 0.2s ease-out;
}

.injuryButton:hover {
  background-color: #fd483a;
  color: #fff;
  transition: 0.2s ease-out;
}
<div class="searchArea">
  <div class="formWrapper">
    <input class="playerInput" placeholder="Search by player name" />
  </div>
  <div class="formButtons">
    <button class="upvoteButton">&#9650;</button>
    <button class="downvoteButton">&#9660;</button>
    <button class="injuryButton">&times;</button>
  </div>
</div>

Upvotes: 1

nemanja
nemanja

Reputation: 694

No man, you don't need flexbox for this. It's really simple, but it depends on approach (which can make it unnecessary complicated).

If your search area is ALWAYS going to be in the top left corner, you can use position: absolute and definitely REMOVE margin: auto. That by itself puts buttons on the same line as search box. when you resize, the buttons will go behind that search box (positioning removes the element from the normal flow so basically the buttons now don't even know the search box is there). You can fix this by setting the minimum width of the .searchArea or even of the body. I've found 670-680px to do the trick. I have removed 'margin-top' from button elements. It doesn't do any good. 

.searchArea {
  min-width: 675px;
}

.formWrapper {
  position: absolute; 
}

.formButtons {
  float:right;
}

/*search box*/
.playerInput{
    width: 450px;
    min-width: 300px;
    font-size: 1.3em;
    padding-left: 20px;
    height: 55px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: rgba(34,49,63,0.8);
    color: #fff;
    transition: 0.2s ease-out;
}

.playerInput:focus{
    background-color: rgba(255, 255, 255, 0.60);
    color: #111;
    transition: 0.2s ease-in;
}

.upvoteButton {
  border: none;
  /*removed individual floats */
  /*   I have removed the margin from here*/
  height: 55px;
  padding: 8px 24px;
  font-size: 0.8em;
  font-family: "Droid Sans", sans-serif;
  background-color: #00ab9e;
  color: #fff;
  transition: 0.2s ease-out;
}

.downvoteButton {
  border: none;
  /*removed individual floats */
  /*   I have removed the margin from here*/
  height: 55px;
  padding: 8px 24px;
  font-size: 0.8em;
  font-family: "Droid Sans", sans-serif;
  background-color: #fcce66;
  color: #fff;
  transition: 0.2s ease-out;
}

.injuryButton {
  border: none;
  /*removed individual floats */
  /*   I have removed the margin from here*/
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 55px;
  padding: 8px 24px;
  font-size: 0.8em;
  font-family: "Droid Sans", sans-serif;
  background-color: #fb655a;
  color: #fff;
  transition: 0.2s ease-out;
}

.upvoteButton:hover {
  background-color: #02ffb6;
  color: #fff;
  transition: 0.2s ease-out;
}

.downvoteButton:hover {
  background-color: #fbf03e;
  color: #fff;
  transition: 0.2s ease-out;
}

.injuryButton:hover {
  background-color: #fd483a;
  color: #fff;
  transition: 0.2s ease-out;
}
<div class="searchArea">
  <div class="formWrapper">
    <input class="playerInput" placeholder="Search by player name" />
  </div>
  <div class="formButtons">
    <button class="upvoteButton">&#9650;</button>
    <button class="downvoteButton">&#9660;</button>
    <button class="injuryButton">&times;</button>
  </div>
</div>

This code is still FAR from perfect and I could tweak it more, but I wanted to give you an easy and quick fix so you know where to start.

If you want me to tweak it even further, please do let me know.

And if this solution works for you, consider accepting and upvoting this answer.

Upvotes: 0

helb
helb

Reputation: 3234

Flexbox more-or-less saved web devs from the position/float/negative-margin mess few years ago. It's easy even without the wrappers:

.searchArea {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.playerInput {
  width: 450px;
  min-width: 300px;
  font-size: 1.3em;
  padding-left: 20px;
  height: 55px;
  border: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: rgba(34, 49, 63, 0.8);
  color: #fff;
  transition: 0.2s ease-out;
}

.playerInput:focus {
  background-color: rgba(255, 255, 255, 0.6);
  color: #111;
  transition: 0.2s ease-in;
}

button {
  border: 0;
  height: 55px;
  padding: 8px 24px;
  font-family: "Droid Sans", sans-serif;
  color: #fff;
  transition: 0.2s ease-out;
}

.upvoteButton {
  background-color: #00ab9e;
}

.downvoteButton {
  background-color: #fcce66;
}

.injuryButton {
  background-color: #fb655a;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.upvoteButton:hover {
  background-color: #02ffb6;
}

.downvoteButton:hover {
  background-color: #fbf03e;
}

.injuryButton:hover {
  background-color: #fd483a;
}
<div class="searchArea">
  <input class="playerInput" placeholder="Search by player name" />
  <button class="upvoteButton">&#9650;</button>
  <button class="downvoteButton">&#9660;</button>
  <button class="injuryButton">&times;</button>
</div>

Browser support: http://caniuse.com/#feat=flexbox

Codepen link: https://codepen.io/helb/pen/eemwGp

Upvotes: 1

DannyV
DannyV

Reputation: 220

FlexBox is useful for centering elements vertically and horizontally in a div -> buttons centered on a navbar. I believe this is what you're asking. The code pen you linked seems unrelated to your description. The pen seems to just use a position: absolute;

Intro to Flexbox Link

Upvotes: 1

Related Questions