CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Smithy
Smithy

Reputation: 847

Swipe buttons/menu with CSS

Here are six buttons in the container of 300px width. As you can see the buttons are jumping into new row upon the lack of space which is expected. I'm wondering if there's a way to keep the buttons in one line, but with the possibility of swiping them to the right on mobile device? Box shadow would indicate that there are more buttons to the right.

.wrap {
  width: 300px;
  box-shadow: 8px -5px 20px 0px lightgrey;
}

button {
  display: inline-block;
}
<div class="wrap">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>
</div>

Upvotes: 1

Views: 2301

Answers (2)

Cris Soares
Cris Soares

Reputation: 627

This is partially going to do what you want, but you need external libraries for swiping on mobile devices (this one allows you to detect touch events on touch screen devices).

.wrap {
  display: flex;
  width: 300px;
  box-shadow: 8px -5px 20px 0px lightgrey;
  overflow-x: scroll;
}

button {
  margin-right: 4px;
  flex: 1 0 25%;
}

.wrap::-webkit-scrollbar {
    opacity: 0;
}
 
.wrap::-webkit-scrollbar-track {
    opacity: 0;
}
 
.wrap::-webkit-scrollbar-thumb {
  opacity: 0;
}
<div class="wrap">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>
</div>

Upvotes: 1

JasonR
JasonR

Reputation: 401

Try this:

.wrap { 
     display: flex;
     overflow-x: scroll; 
}

Upvotes: 5

Related Questions