CODEWITHSUNDEEP
htmlcss
Mahdi_Nine
Mahdi_Nine

Reputation: 14761

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?

Upvotes: 2

Views: 3919

Answers (3)

David Chelliah
David Chelliah

Reputation: 1349

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>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122125

First to center rows in body you can use Flexbox and align-items: center. Next to get horizontal scroll you can use overflow-x: auto and white-space: nowrap on row. And finally to make .cols perfect squares you can set both width and height in same vw size.

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  display: flex;
  align-items: center;
}
.rows {
  overflow-x: auto;
  white-space: nowrap;
}
.cols {
  width: 25vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  height: 25vw;
  background-color: red;
  border: 1px solid black;
  max-height: 100vh;
}
<div class="rows">
  <div class="cols">1</div><!--
  --><div class="cols">2</div><!--
  --><div class="cols">3</div><!--
  --><div class="cols">4</div><!--
  --><div class="cols">5</div><!--
  --><div class="cols">6</div>
</div>

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206618

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0; font:16px/20px sans-serif;}


.horizScroll{
  position: relative;
  overflow: auto;
  height: 33.333%;
  background: #444;
  white-space: nowrap; /* left align inner boxes */
  font-size: 0; /* remove gaps */
}

.horizScroll > div{
  width: 25%;
  height: 100%;
  background: red;
  display: inline-block;
  vertical-align: top; /* due to inline-block */
  white-space: normal; /* reset */
  font-size: 16px;      /* reset */
  text-align: center;
  border: 4px solid #000;
}
<div class="horizScroll">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

You can now place .horizScroll wherever you need (like i.e. inside .rows)

Upvotes: 0

Related Questions