Question 44339 in Html Question posted in
Some basic documentation can be found here.

Prevent buttons from overflowing to a new line – Html

I am working on a website and I need a section where buttons are horizontally scrollable rather than vertically scrollable. The issue is that I can only get the buttons to overflow in the vertical direction so it looks like this.

Buttons are overflowing vertically..

I’d like to keep the buttons width at 25% because it would make it uniform with the rest of the site

I’ve tried floating the buttons, applying overflow-x values, shrinking the div/span (I’ve tried both) until the second line isn’t visible. Also, changing the button’s display from inline-block to inline does not fix it, and changing the div/spans display to inline is also not a solution.

* {
  box-sizing: border-box;
}

#button-contianer {
  position: fixed;
  padding: 8px;
  bottom: 0;
  left: 8px;
  width: calc(100% - 16px);
  height: 72px;
  background-color: rgb(125, 205, 231);
  border: 3px solid rgb(18, 171, 222);
  border-radius: 10px;
  font-size: 20pt;
}

button {
  width: calc(25% - 8px);
  height: 50px;
  padding: 0;
  background: none;
  border: 2px solid black;
  margin: 0 4px;
  float: left;
}
<div id="button-contianer">
  <button>2022.01.09</button>
  <button>2022.01.24</button>
  <button>2022.02.05</button>
  <button>2022.02.12</button>
  <button>Should overflow</button>
</div>
Tags:

3

Answers


  1. 0

    let’s say the parent class of the buttons are btn-container. So what you could do is, add the following CSS styles:

    .btn-container{
display: flex;
overflow-x: scroll;
overflow-y: hidden;
}
button{
flex-shrink: 0;
}
    Login or Signup to reply.
  2. 0

    Try display: inline-block and white-space: nowrap:

    * {
  box-sizing: border-box;
}

#button-contianer {
  position: fixed;
  padding: 8px;
  bottom: 0;
  left: 8px;
  right: 8px;
  background-color: rgb(125, 205, 231);
  border: 3px solid rgb(18, 171, 222);
  border-radius: 10px;
  font-size: 20pt;
  overflow-x: auto;
  white-space: nowrap;
}

#button-contianer button {
  display: inline-block;
  width: calc(25vw - 16px);
  margin-right: 8px;
}
    <div id="button-contianer">
  <button>2022.01.09</button>
  <button>2022.01.24</button>
  <button>2022.02.05</button>
  <button>2022.02.12</button>
  <button>Should overflow</button>
</div>
    Login or Signup to reply.
  3. 0

    Just to add to the accepted answer, you can use flex box to do this also (here’s a good video):

    * {
  box-sizing: border-box;
}

#button-contianer {
  position: fixed;
  display: flex;
  overflow-x: scroll;
  gap: 8px; /* rather than using margin-right in your button, gap just adds a gap between buttons */
  padding: 8px;
  bottom: 0;
  left: 8px;
  width: calc(100% - 16px);
  height: 92px;
  background-color: rgb(125, 205, 231);
  border: 3px solid rgb(18, 171, 222);
  border-radius: 10px;
  font-size: 20pt;
}

button {
  flex: 0 0 25%; /* don't grow, don't shrink, 25% width */
  height: 50px;
  padding: 0;
  background: none;
  border: 2px solid black;
}
    <div id="button-contianer">
  <button>2022.01.09</button>
  <button>2022.01.24</button>
  <button>2022.02.05</button>
  <button>2022.02.12</button>
  <button>Should overflow</button>
</div>

    You can also use grid (again, here’s a video to get you started):

    * {
  box-sizing: border-box;
}

#button-contianer {
  position: fixed;
  display: grid;
  grid-auto-columns:25%;
  grid-auto-flow: column;
  overflow-x: scroll;
  column-gap: 8px; /* rather than using margin-right in your button, gap just adds a gap between buttons */
  padding: 8px;
  bottom: 0;
  left: 8px;
  width: calc(100% - 16px);
  height: 92px;
  background-color: rgb(125, 205, 231);
  border: 3px solid rgb(18, 171, 222);
  border-radius: 10px;
  font-size: 20pt;
}

button {
  height: 50px;
  padding: 0;
  background: none;
  border: 2px solid black;
}
    <div id="button-contianer">
  <button>2022.01.09</button>
  <button>2022.01.24</button>
  <button>2022.02.05</button>
  <button>2022.02.12</button>
  <button>Should overflow</button>
</div>

    The advantages of flexbox and grid are that rather than using margin-right to put a space between elements (which invariably needs a :last-child pseudo class) you can use gap to put a space between each child element. Both are good for layouts.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search