Home Make a div non-scroll able
Reply: 2

Make a div non-scroll able

Shoaib Iqbal
1#
Shoaib Iqbal Published in 2017-08-10 09:32:52Z

I have two div in side a row named sidenav and mainscreen. I have assigned sidenav 1 column and mainscreen 11 columns by bootstrap. Floowing is the output of the following.

I want to make sidenav non scrollable but mainscreen should be srollable. Many solutions suggest using position:fixed. I tried making the position of sidenav fixed but it ruins the style of whole page. Following is the output after using fixed position of sidenav.

following is html!

<div class="container-fluid" style="width: 100%; padding: 0">
    <div class="row" style="width: 100%;margin: 0px">
        <nav class="sidenav col-md-1">
            <ul class="menu">
                <li class="menu-item">
                    <img src="../../assets/images/Mask Group 7.svg" alt="Logo" width="75"height="75">

                </li>
                 <li class="menu-item">
                    <a routerLink ="/connect" style="width: 32%;height: 50%">
                         <img src="../../assets/images/home.svg" alt="Home"  width="100%" height="100%"> 
                         <span class="navtext">home</span>

                     </a>
                </li>
                 <li class="menu-item">
                   <a routerLink ="/connect" style="width: 32%;height: 50%">
                     <img src="../../assets/images/accept-file-or-checklist.svg" alt="Home" width="100%" height="100%">
                       <span class="navtext">approval </span>
                     </a>
                </li>
                 <li class="menu-item">
                    <a routerLink ="/connect" style="width: 32%;height: 50%">
                     <img src="../../assets/images/folded-text-document.svg" alt="Home" width="100%" height="100%"> 
                         <span class="navtext">document</span>
                     </a>
                </li>
                 <li class="menu-item">
                    <a routerLink ="/connect" style="width: 32%;height: 50%">
                     <img src="../../assets/images/wukla_logo.svg" alt="Home" width="100%" height="100%">
                         <span class="navtext">wukla</span>
                     </a>
                </li>
            </ul>
        </nav>
        <div  class="mainscreen col-md-11">
                <div class="header">
                    <div class="inputs">
                        <div class="input-group">
                          <span class="input-group-btn" style="height:45px">
                            <button class="searchinputbtn btn btn-secondary" type="button" style="border-style: none;border-radius: 0">hate</button>
                          </span>
                          <input type="text" class="form-control" placeholder="Product name" style="border-style: none">
                          <span class="input-group-btn">
                            <button class="searchinputbtn btn btn-secondary" type="button" style="border-style: none;border-radius: 0">love</button>
                          </span>
                        </div>
                        <button class="uploadbtn btn btn-secondary" type="button" style="border-style: none;border-radius: 0">Upload Document</button>
                      </div>
                </div>
                <div class="mainbody">
                    <div class="itemstodisplay">
                        <div class="notification">
                            <div class="bodytext">pending signatures</div>
                            <div class="components">
                                <app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
                                <app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
                                <app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
                                <app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
                            </div>
                        </div>
                        <div class="alldocs">
                            <div class="bodytext">all documents</div>
                            <div class="components">
                                <app-paksigndocument></app-paksigndocument>
                                <app-paksigndocument></app-paksigndocument>
                                <app-paksigndocument></app-paksigndocument>
                                <app-paksigndocument></app-paksigndocument>
                            </div>
                        </div>
                        <div class="wukladocs">
                            <div class="bodytext">wukla documents</div>
                            <div class="components">
                            </div>
                        </div>    
                    </div>
                </div>
        </div>
    </div>
</div>

and following is scss! #ID { overflow: hidden } .sidenav { position: fixed; padding: 0; background-color: #e6e6e6 ; display: flex; flex-direction: column; justify-content: flex-start; height: auto; } .menu { padding: 0px; list-style: none; display: flex; flex-direction: column; height: 100%; width: 100%; } .menu-item { border-bottom: 1px solid #ffffff; height: 10%; display: flex; flex-direction: column; width: 100%; justify-content: center; align-items: center; } .mainscreen { padding: 0; height: 1450px; } .header { display: flex; align-items: center; flex-direction: column; justify-content: center; //width: 1259px; width: 100%; height: 36%; opacity: 0.58; background-color: #8cd1bc; }

.mainbody {
    height: 64%;
    background-color: #f6f6f6;
}
.input-group{
    width: 100%;
}
.searchinputbtn {
    height: 20px;
}
.uploadbtn {
    margin-top: 42px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 2px;
  background-color: #e6e6e6;
  font-size: 16.8px;
  font-weight: bold;
  letter-spacing: -0.3px;
  text-align: left;
  color: #ffffff
}
.inputs {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.navtext {
    font-size: 11px;
  line-height: 0.95;
  letter-spacing: -0.3px;
  text-align: left;
  color: #59626a;
}

.itemstodisplay {
    width: 100%;
    height: 100%;
}

.notification {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 26%;
    background-color: azure;
}
.bodytext{
    margin-bottom: 20px;
    margin-top: 50px;
     font-size: 20px;
  line-height: 0.53;
  letter-spacing: -0.5px;
  text-align: left;
  color: #73c7af;
}
.alldocs{
     display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 38%;
    background-color: cornsilk;
}
.wukladocs {
     display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 38%;
    background-color:floralwhite;
}
.components {
    height: 80%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

can anybody help me making sidenav non-scroll able?

Frank
2#
Frank Reply to 2017-08-10 09:37:01Z

You can use position: fixed and stretch the div to the length of the whole page. This can be done with the following CSS:

div {
    position: fixed;
    top: 0;
    bottom: 0;
}

Then you can make the mainscreen scrollable and keep the sidenav fixed.

brijrajsinh
3#
brijrajsinh Reply to 2017-08-10 09:54:31Z

Try this:

.navbar-fixed-left {
  width: 140px;
  position: fixed;
  border-radius: 0;
  height: 100%;
}

.navbar-fixed-left .navbar-nav > li {
  float: none;  /* Cancel default li float: left */
  width: 139px;
}

refer this article for more: Usefull Article

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.318609 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO