I tried to make dropdown bootstrap menu and there is border at the bottom of the dropdown using <hr>
the problem is the dropdown menu jump the
<hr>
line.
here is the html
<div class="container">
<div class="row">
<div class="col-md-8">
<b>Available at :</b>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
List<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
#foreach ($listings as $listing)
<li>Text</li><br>
#endforeach
</ul>
<hr>
</div>
under dropdown styling, there is top : 100% if I untick it, the dropdown list display correctly.
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
Anyone know how to fix this so the dropdown will display exactly at the bottom of Available at :List ?
more like this
You could use top: 20px; left: 15px; instead of top: 100%; left: 0; in your css. this would fix your problem.
Look here: http://www.bootply.com/qyGxdV9m0t#
I fixed this with adding <div class="col-md-12"> before the dropdown. and another <div class="col-md-12"> for <hr>
Related
I am trying to fix the custom dropdown arrow size but when i zoom in or zoom out webpage size of custom dropdown also changed.. Is there any solution for that??
This is current web page
When I zoom in or zoom out custom arrow size will be changed..
Here is my code :-
.container select {
border-radius: 20px;
padding: 5px 38px 7px 23px;
border: 2px solid orange;
appearance: none;
position: relative;
}
.container i.fa-angle-down {
position: absolute;
right: 69%;
top: 92.5%;
border-radius: 20px;
color: white;
background-color: orange;
padding: 8px;
padding-left: 10px;
font-size: 20px;
pointer-events: none;
}
<div class="container">
<h6>Current open positions</h6>
<div class="form-group">
<label class="search">Search by Location</label>
<select>
<option>Canada</option>
<option>USA</option>
</select><i class="fas fa-angle-down"></i>
</div>
</div>
Supply a relative container to act as a boundary for the absolute positioned child. Something like below, cheers;
.container select {
border-radius: 20px;
padding: 5px 38px 7px 23px;
border: 2px solid orange;
appearance: none;
position: relative;
}
.container i.fa-angle-down {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 1rem;
border-radius: 20px;
color: white;
background-color: orange;
padding: 8px;
padding-left: 10px;
font-size: 20px;
pointer-events: none;
}
.custom-dd {
display: inline-block;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/>
<div class="container">
<h6>Current open positions</h6>
<div class="form-group">
<label class="search">Search by Location</label>
<div class="custom-dd">
<select>
<option>Canada</option>
<option>USA</option>
</select>
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
I have a collapsible sidebar. On click of a link from the sidebar, I want to display the components next to the sidebar but they show below it.
My Component Code:
<app-topbar></app-topbar>
<div class="wrapper">
<app-sidebar></app-sidebar>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets/bn.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
My Component's CSS:
.navbar{
background-color: #1F85DE;
}
.card{
flex: auto;
}
My Sidebar Component's HTML:
<nav id="sidebar" class="navbar-dark bg-#1F85DE" style="background-color: #1F85DE;" [ngClass]="{'hidden': sideNavService.hideSideNav }">
<hr>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home Page</a>
<hr>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
<hr>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
<hr>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
<hr>
</li>
</ul>
</nav>
My Sidebars's CSS:
:host {
background: #343a40;
}
#sidebar {
min-width: 200px;
max-width: 200px;
min-height: 100vh;
color: #fff;
transition: all 0.3s;
font-weight: 300;
font-size: 1rem;
line-height: 1.5;
}
#sidebar.hidden {
margin-left: -200px;
}
a[data-toggle="collapse"] {
position: relative;
}
#media (max-width: 575px) {
#sidebar {
margin-left: -200px;
}
#sidebar.hidden {
margin-left: 0;
}
}
a, a:hover, a:focus {
color: inherit;
}
#sidebar .sidebar-header {
padding: 20px;
}
#sidebar ul li a {
padding: 15px;
display: block;
width: 100%;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
hr {
border-top: 1px solid #fff;
margin-top: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
The code is making my Sidebar appear on the left side but the component that I want to display is not occupying the empty save on the right of the sidebar instead, after the sidebar ends, its occupying the save there.
<ng-sidebar-container>
<ng-sidebar [opened]="opened" position="right" mode="push" autoCollapseWidth=100>
<img src="assets/myimage_compressed.jpg" class="rounded-circle" width=80 height=80/>
<ul class="menu">
<li> <a routerLink="/">Dash Board</a></li>
<li> <a routerLink="/post">Post</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</ng-sidebar>
<div ng-sidebar-content>
<!-- side page component ,Here i have used main component -->
<app-main></app-main>
</div>
</ng-sidebar-container>
I have a problem with a push sidebar menu. When the toggle button is clicked the page goes to the right .The problem is that I want the side bar menu to be next to the page just like the example that is in the picture . Also when i scroll down to the page ,I want the side bar menu to be fixed. I am only using css.
#media (max-width: 575px) {
.navbar-brand {
margin-bottom: 0;
}
.slideout-sidebar {
position: fixed;
top: 0px;
left: -80%;
height: 100%;
background-color: #fff;
transition: all .15s ease-in-out;
-webkit-box-shadow: inset -15px 0px 10px -15px rgba(0, 0, 0, 0.75);
box-shadow: inset -15px 0px 10px -15px rgba(0, 0, 0, 0.75);
}
.slideout-sidebar ul li {
display: block !important;
cursor: pointer;
padding: 10px 10px;
letter-spacing: 1px;
font-weight: 700;
font-size: 15px;
color: #0d6490;
margin: 0;
}
.slideout-sidebar button {
font-size: 1rem !important;
width: 220px;
height: 37px;
}
.navbar-brand {
width: 12rem;
height: 3.2rem;
margin-left: 50px;
}
.container-content {
position: relative;
left: 0px;
}
#menu-toggle {
display: none;
}
.menu-icon {
position: fixed;
top: 5px;
left: 5px;
font-size: 35px;
z-index: 1;
transition: all.15s ease-in-out;
padding: 5px 15px;
background-color: transparent;
}
#menu-toggle:checked ~ .slideout-sidebar {
left: 0;
}
#menu-toggle:checked + .menu-icon {
left: 250px;
}
#menu-toggle:checked ~ .container-content {
-webkit-transform: translateX(80%);
transform: translateX(80%);
transition: all .15s ease-in-out;
}
<input type="checkbox" id="menu-toggle" class="menu-icon" />
<label for="menu-toggle" class="menu-icon"><i class="fa fa-bars mt-2"></i></label>
<div class="container-content">
<header>
<div class="header-container d-flex justify-content-around container-fluid">
<div class="slideout-sidebar order-1">
<ul class="d-md-flex flex-md-column flex-lg-row mt-md-4">
<li class="brd mr-md-2 align-self-center menu">МЕНИ</li>
<li class=" order-lg-last btn-order"> <button class="btn" type="submit">НАРАЧАЈТЕ
ВЕДНАШ</button></li>
<li class="brd border-bottom border-top border-primary d-none ">КОНТАКТИРАЈТЕ НЕ</li>
<li class="brd d-none">УСЛОВИ ЗА КОРИСТЕЊЕ</li>
<li class=" border-bottom border-primary d-none brd">РЕСТОРАНИ</li>
<li class="order-lg-first mr-md-4 text-center brd align-self-center">
<a class="">МК</a>
<div class="d-inline-block
language-line"> | </div>
<a class="">EN</a>
</li>
</ul>
</div>
<div class="mx-auto mx-lg-0 mt-2">
<img src="./images/logo.png" alt="dominoslogo" class="navbar-brand" />
</div>
<div class="cart mt-2">
<img src="images/basket.png" alt="basket" class="d-lg-none">
<span class="header-cart-order d-lg-none">0</span>
</div>
</div>
</header>
I am trying to create a ribbon around a div using Bootstrap 4.
I can't clean the right border; on mobile, when the page is shrinked, my ribbon overflows to the right, out of parent div: https://jsfiddle.net/auj4q3a2/
Html:
<div class="container-fluid">
<div class="card profile-card">
<div class="container-fluid">
<div class="row user-social-detail">
<div class="col-lg-12 col-sm-12 col-12">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
CSS:
.profile-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 475px;
margin: auto;
text-align: center;
}
.user-social-detail{
margin: 0 -30px;
padding: 15px 0px;
background-color: #ffd280;
border-radius: 4px;
}
.user-social-detail a i{
color:#fff;
font-size:23px;
padding: 0px 5px;
}
.user-social-detail::before,
.user-social-detail::after {
content: '';
position: absolute;
z-index: -1;
left: -45px;
top: -28px;
display: block;
width: 40px;
height: 0px;
border: 30px solid transparent;
border-right: 20px solid #e5bd73;
border-bottom-color: transparent;
border-left-color: transparent;
}
.user-social-detail::after {
left: auto;
right: -45px;
border-left: 20px solid #e5bd73;
border-right: 30px solid transparent;
}
How can I fit the ribbon into the container on mobile, as on the left side?
Any suggestion or feedback will be welcomed and greatly appreciated.
Got it!
You have to add
overflow-x: hidden !important; to .container-fluid
EDIT:
Actually, only in 1st .container-fluid this is necessary, so you can add the following to your CSS file:
.container-fluid:first-of-type {
overflow-x: hidden !important;
}
I use an affix navbar, that stays fixed on top when scrolling down. I did a lot of changes yesterday, but now the dropdown menu won't open (or at least show)... I can't figure out where the problem lies.
Can anyone see it?
Sooooo: I testet some things. The problem seems to be, that I have following scripts at the end of the body:
<!------------------------------------------------------------ VENDOR JS -->
<script src="<?= DIR_VENDOR ?>jquery/jquery-1.12.4.min.js"></script>
<script src="<?= DIR_VENDOR ?>bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="<?= DIR_VENDOR ?>slider/bootstrap-slider.js"></script>
<!------------------------------------------------------------ SYSTEM JS -->
<script src="<?= DIR_LIBRARIES ?>js/ajax.js"></script>
<script src="<?= $system['template']['web_path'] ?>script.js"></script>
I needed that for bootstrap slider to work. Can you tell me which ones I need to put back in the header again for the dropdown as well as the slider to work?
/********************************************************************* HEADER */
div.header.container-fluid {
width: 100%;
background-image: url(gfx/2.jpg);
background-size: cover;
height: 85vh;
background-attachment: fixed;
}
/********************************************************************** AFFIX */
.affix + .container-fluid {
padding-top: 70px;
}
.affix-top {
background-color: #db091a;
}
.affix-top a {padding: 10px 15px 0px 15px !important;}
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #3b3b3b;
border-top: 3px solid #db091a;
}
.affix a {
padding-top: 7px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
/********************************************************************* NAVBAR */
div.navbar.navbar-custom {
-webkit-box-shadow: 0px 2px 10px 0px rgba(77,74,77,1);
-moz-box-shadow: 0px 2px 10px 0px rgba(77,74,77,1);
box-shadow: 0px 2px 10px 0px rgba(77,74,77,1);
border-radius: 0px;
z-index: 1030;
}
/* HEADER */
a.header.navbar-brand {
font-family: Josefin Sans;
font-size: 45px;
text-transform: uppercase;
color: #FFF;
line-height: 50px;
}
/* TOP */
ul.nav.navbar-nav.top {float: right !important;}
a.top {
font-family: 'Palanquin', sans-serif;
text-transform: uppercase;
font-weight: 500;
color: white;
padding: 0px;
margin: 0px 0px 0px 30px;
border-bottom: 3px solid transparent;
}
/* USER */
a.dropdown-toggle.user {padding: 0px 15px 0px 0px; margin-left: 20px;}
span.glyphicon.glyphicon-user {
color: #3b3b3b;
background-color: white;
padding: 5px;
font-size: 30px;
}
/* DROPDOWN */
ul.dropdown-menu {padding: 0px;}
div.collapse.navbar-collapse {padding: 0px;}
ul.nav.navbar-nav.bottom {float: right !important;}
a.dropdown-toggle.drop {
font-family: 'Palanquin', sans-serif;
text-transform: uppercase;
font-weight: 500;
color: white;
padding: 0px;
margin: 0px 0px 5px 30px;
border-bottom: 3px solid transparent;
}
a.dropdown-toggle.drop:hover {border-bottom: 3px solid #db091a;}
a.dropdown-toggle.drop:active {border-bottom: 3px solid #db091a;}
a.dropdown-toggle.drop:focus {border-bottom: 3px solid #db091a;}
<!-- START: HEADER -->
<div class="header container-fluid hidden-xs">
</div>
<!-- START: NAVBAR -->
<div class="navbar navbar-custom" data-spy="affix" data-offset-top="500" id="anker">
<div class="container-fluid">
<div class="row" id="anchor">
<div class="col-sm-6">
<a class="header navbar-brand" href="#"><?= $language['phrases']['site_title']; ?></a>
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<div class="col-sm-6">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user hidden-xs"></span> <span class="hidden-sm hidden-md hidden-lg hidden-xl"> Benutzer <b class="caret"></b> </span>
<ul class="dropdown-menu">
<li>beispiel1</li>
<li>beispiel2</li>
<li>beispiel3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="row2">
<div class="container">
<div class="collapse navbar-collapse">
<div class="col-sm-12">
<ul class="nav navbar-nav bottom">
<li class="dropdown">
xMailer <b class="caret"></b>
<ul class="dropdown-menu">
<li>Advertiser</li>
<li>Kampagnen</li>
<li>Listen</li>
<li>Jobs</li>
<li>Nodes</li>
</ul>
</li>
<li class="dropdown">
Administration <b class="caret"></b>
<ul class="dropdown-menu">
<li>Konfigurationen</li>
<li>Module</li>
<li>Seiten</li>
<li>Navigation</li>
<li>Gruppen</li>
<li>Benutzer</li>
<li>Sprachen</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: NAVBAR -->
ok problem solved!
the scripts in the html body were the reason for the missing dropdown menu!