How to scroll the buttons horizontally on small screen device-CodePudding

For the sample code below, can someone help to make the buttons scroll horizontally when rendered on small device?

I tried with below features but they dont work. Looks like tag need some special treatment. I am rather new to HTML appreciate any assistance.

overflow: auto;
white-space: nowrap

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: auto;
  white-space: nowrap;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

</style>
</head>
<body>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div >
  <button  onclick="openCity(event, 'London')">London</button>
  <button  onclick="openCity(event, 'Paris')">Paris</button>
  <button  onclick="openCity(event, 'Tokyo')">Tokyo</button>
  <button  onclick="openCity(event, 'Singapore')">Singapore</button>
  <button  onclick="openCity(event, 'Mumbai')">Mumbai</button>
  <button  onclick="openCity(event, 'Dubai')">Dubai</button>
</div>

   
</body>
</html>

CodePudding user response：

you need to set some widht of your main div and then you need to mention the axis in which you want to scollbar.

width:400px;

overflow-x: auto;

CodePudding user response：

You can use CSS Media Queries to determine what action to do based on the screen size. This is important if you only want to scroll for a particular screen size (small devices).

@media (max-width: 600px) { 

*This is for phones, for example (you might need to find more accurate pixel counts)*

}

You can scroll by adding "overflow-x: scroll;" to the element with the buttons.

CodePudding user response：

Here you can use display flex box to the tab like below code.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
   display: flex;
   overflow: auto;
   white-space: nowrap;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
}

@media (max-width: 520px) { 
    .tab { 
        display: flex;
        overflow: auto;
        white-space: nowrap;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

</style>
</head>
<body>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div >
  <button  onclick="openCity(event, 'London')">London</button>
  <button  onclick="openCity(event, 'Paris')">Paris</button>
  <button  onclick="openCity(event, 'Tokyo')">Tokyo</button>
  <button  onclick="openCity(event, 'Singapore')">Singapore</button>
  <button  onclick="openCity(event, 'Mumbai')">Mumbai</button>
  <button  onclick="openCity(event, 'Dubai')">Dubai</button>
</div>

   
</body>
</html>

You can add more media queries depending the size of your screen and styles you want to add. Refer this https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries