I have made a sidebar using materializecss and it's working fine. But it's creating space when if move it by mouse. It goes same on mobile view when i switch sidebar from finger touch so it is creating some space.
Please see video of bug Here
Here is my code
.user-view{
background: linear-gradient(233deg, #27b7e6, #1aacdf);
}
.custom-nav{
background-color: #27b7e6
}
.drawer__header-content-img{
color: var(--theme-text-primary-on-primary, white);
font-size: 2em;
line-height: 0.85;
}
.svg:not(:root) {
overflow: hidden;
}
.drawer__header-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 1;
color: white;
cursor: pointer;
}
.button--accent {
background-color: #F42187;
}
.button__text{
color: #fff;
}
.button--dark {
background-color: #2C3337;
}
.button-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.button-group .button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.button-group .button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.button {
display: -webkit-inline-box;
-webkit-box-align: center;
align-items: center;
position: relative;
height: 36px;
padding: 0 24px;
border-radius: 36px;
border: none;
outline: none;
text-align: center;
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 2.25rem;
text-decoration: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
vertical-align: middle;
color: white;
color: var(--theme-text-primary-on-primary, white);
}
.drawer__content {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: absolute;
left: 0;
right: initial;
height: 100%;
width: 300px;
background-color: var(--theme-background, #fff);
z-index: 5;
transition: transform 0.1s, -webkit-transform 0.1s;
pointer-events: auto;
overflow-y: auto;
}
#times-icon-styling{font-size: 32px; float: right;margin-top: -20px;}
.iconWithText{
display: inline;
}
.color-gray{
color: gray !important;
}
.custom-times-icon{
color:white;
font-size: 20px;
z-index: 2000;
display: visible;
position: absolute;
right: 5%;
top: 10%;
}
.user-view:before {
content: '';
position: absolute;
top: 48px;
right: -24px;
width: 60px;
height: 60px;
border-radius: 100%;
z-index: 0;
background-color: #5cc8ec;
}
.user-view:after {
content: '';
position: absolute;
top: -24px;
right: -16px;
width: 100px;
height: 100px;
border-radius: 100%;
z-index: 0;
background-color: #5cc8ec;
}
.list-bg{
background-color: #F0F0F0;
}
.list-bg li a:hover{
background-color: #F7F5ED;
color:#6ac7e9 !important;
}
.sidenav li{
color : rgba(0, 0, 0, 0.87);
font-family: "Roboto", sans-serif;
}
.list-nav__item{ display: flex;
position: relative;
padding: 1em 0.75em 1em 1.5em;
overflow: hidden;
width: 100%;
text-decoration: none;
transition: all .5s;}
.list-nav__item:after {
content: '';
position: absolute;
top: 50%;
left: 35%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
border-radius: 100%;
-webkit-transform: scale(1, 1) translate(-50%);
transform: scale(1, 1) translate(-50%);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;}<html>
<head>
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="nav-wrapper custom-nav">
<a href="#" data-target="slide-out" class="sidenav-trigger" style="margin-left: 30%">
<i class="material-icons" style="color:white !important">menu</i>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<i class="ti-close custom-times-icon"></i>
<div class="background">
<img src="images/user-profile.png">
</div>
<a href="#user">
<img class="circle" src="images/user-profile.png">
</a>
<div class="iconWithText">
<i class="fab fa-pinterest" style="display:inline;color: white"></i>
<a href="#name">
<span class="white-text name" style="display: inline-flex;margin-left: 15px;">John Doe</span>
</a>
</div>
</div>
</li>
<li>
<a href="#!" class="color-gray">
<i class="material-icons color-gray">home</i>Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="#!" class="color-gray">
<i class="material-icons color-gray">cloud</i>$4,000 Xmas at the Valley</a>
</li>
<li>
<a href="#!" class="color-gray">
<i class="material-icons color-gray">cloud</i>All Games</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="#!" class="color-gray">
<i class="fa fa-trophy"></i>Results</a>
</li>
<div class="list-bg">
<li>
<a href="#!" class="color-gray">
<i class="fas fa-user color-gray"></i>Profile</a>
</li>
<li>
<a href="#!" class="color-gray">
<i class="fas fa-user-plus color-gray"></i>Refer a Friend</a>
</li>
<li>
<a href="#!" class="color-gray">
<i class="material-icons color-gray">notifications</i>Notification Settings</a>
</li>
<li>
<a href="#!" class="color-gray">
<i class="fas fa-user color-gray"></i>Following</a>
</li>
<li>
<a href="#!" class="color-gray">
<i class="material-icons color-gray">help</i>Help</a>
</li>
</div>
<li>
<a href="#!" class="color-gray">
<i class="fas fa-sign-out-alt color-gray"></i>Logout</a>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.sidenav').sidenav({ inDuration: 80 })
.on('click tap', 'li i', () => {
$('.sidenav').sidenav('close');
});
});
</script>
</body>
</html>I have customized materialize.min.css so here is customized materialized css link
Please place this code into one html file and download materialize css from given link,link in html and then check the bug. Please give me solution that how can i get rid of that space.?
Comments
Post a Comment