Mahdi_Nine Mahdi_Nine - 4 months ago 15
CSS Question

horizontal responsive scrollbar

i need a scrollbar(responsive) that has six rectangle like attachments. size of each rectlangle is 1/4 size of page.

enter image description here
enter image description here
enter image description here
enter image description here
i write this code:

<!DOCTYPE html>
<html>
<link href="Content/bootstrap.css" rel="stylesheet" />
<head>
<title></title>
<meta charset="utf-8" />
<style>
html, body { height: 100%; width: 100%; margin: 0; }
.rows{
height:33.333333333333333333%;
}
.cols{
width:25%;
float:right;
height:100%;
background-color:red;
border:solid;
font-size: 2.2vw;
text-align:center;
vertical-align:bottom;
border-color:black;
}
</style>
</head>
<body>
<div class="rows" >

sadfsadf
</div>
<div class="rows" style="width:150%;overflow-x:scroll;overflow-y:scroll;">
<div class="cols">salam</div>
<div class="cols">salam</div>
<div class="cols">salam</div>
<div class="cols">salam</div>
<div class="cols">salam</div>
<div class="cols">salam</div>


</div>
<div class="rows">

</div>
</body>
</html>


but my code has following output:

enter image description here

any idea?

Answer

I have modified following in your code snippet

  • Avoid writing your custom styles on bootstrap ".row" - Rather have a wrapper div around it
  • floats won't calculate the width as expected as those are flushed to the left or right. Try using "display:inline-block", which can give the expected result.

html,
body {
  height: 100%;
  min-height: 100%;
  width: 100%;
  margin: 0;
  width: 100%;
}
.rows {
  height: 33.333333333333333333%;
}
.cols {
  width: 25vw;
  height:25vw;
  /*float: right;*/
  /*height: 100%;*/
  background-color: red;
  border: solid;
  font-size: 2.2vw;
  text-align: center;
  vertical-align: middle;
  border-color: black;
  display: inline-block;
}
.mywrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

  <div class="rows">

    sadfsadf
  </div>
  <div class="mywrapper">
    <div class="rows">
      <div class="cols">salam</div>
      <div class="cols">salam</div>
      <div class="cols">salam</div>
      <div class="cols">salam</div>
      <div class="cols">salam</div>
      <div class="cols">salam</div>
    </div>
  </div>
  <div class="rows">

  </div>