I have a picture in a dropdown/dropup menu that I want to be the full background of the dropdown. I have an image set as the background but as you can see there is still white. How can I make the dropdown solely the image and have the scrollwheel in it?
While I'm at it, how would one go about changing scrollwheel css to be an image and such?
(I made the background green to showcase what I don't want to show)
Dropdown CSS
.dropdown-menu {
width: 100%;
background-image: url('Res/IM/page.png');
background-size: 100% 100%;
background-color: #1e7e34;
}
Relevant Dropdown Code
<div id="inv1" class="dropdown-menu" style="min-height: 35vh; resize: vertical;background-image: url('Res/IM/page.png'); background-size: 100% 100%;" >
<div class="scrollable">
X
<CODE IS HERE AND IRRELEVANT>
</div>
</div>
You mean this one?
.dropdown-menu {
background: url(https://t4.ftcdn.net/jpg/01/08/13/09/240_F_108130971_d2e6YQdGAfERW4p75YuJPQQsGZZXk41D.jpg);
background-size: 100% 100%;
background-color: transparent ;
}
a.dropdown-item {
color: red;
font-weight:bold
}
a.dropdown-item:hover {
background-color: transparent ;
color:white;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</body>
</html>
.dropdown-menu{
background-image: url('https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size: 100% 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Check this code. I think this will solve your problem. :)
Related
I have successfully added a "background-image" to my Razor Pages application.
Now, when using "filter: blur(2px);" the header and footer blur, but not the image.
I've been at this for hours, saw tons of threads on how to add the image, but couldn't find a way to do this properly (the blur), or see someone else experiencing the same behavior.
My _Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - LifeCompanion</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/LifeCompanion.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-transparent border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
LifeCompanion
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<a class="dropdown-item" type="button" asp-page="/LActions/ImageManagement">
Images!
</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - LifeCompanion - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
My CSS - using site.css to apply changes globally - is:
html {
font-size: 14px;
width: 100%;
height: 100%;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
}
So far so good.
Now when adding to my css:
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
filter: blur(2px);
}
The footer and header blurs, but not the background-image as anticipated.
Replace filter: blur(2px); with backdrop-filter: blur(2px);.
filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element.So in your project, you need to use backdrop-filter. You can follow this link to learn more about backdrop-filter.
Why is there a space between dropdown-toggle button and dropdown-menu?How can I remove this space? The box-shadow hides the space, but when the box-shadow is removed, you can see the space easily. This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.btn, button {
box-shadow: none !important;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
</button>
<ul class="dropdown-menu" style="vertical-align: top;" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div><script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Edit: edited the css code to make the space visible easily
To eliminate the gap between the toggle element and the dropdown, apply this CSS. It's a rare case where using !important seems appropriate, since the original styles are applied inline by the Bootstrap script.
Optionally apply some border-radius overrides to visually combine the elements when open.
.dropdown-menu {
transform: translate3d(0px, 38px, 0px) !important;
}
/* optional */
body .dropdown-toggle.show {
border-radius: .25rem .25rem 0 0;
}
body .dropdown-menu {
border-radius: 0 .25rem .25rem .25rem;
}
/* end optional */
.btn,
button {
box-shadow: none !important;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" style="vertical-align: top;" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a> </li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
.dropdown-menu.show {
transform: translate(0px, 40px);
}
This is what pushes the menu down when you click the toggle
My drop-right menu drops towards the right correctly, but downwards, which causes it to hide under my page. I want it to open upwards instead of downwards.
I tried fiddling around with CSS, adding bottom:0 to the dropdown-menu, but it didn't work. I have also tried nesting a dropdown-menu-right in a dropup but the displayed menu is not in line with the button (it is at the top-right diagonal).
This my complete code for the dropdown:
<div class="dropright" style="position: relative;">
<button class="btn btn-primary btn-block" style="font-size: large;" onblur="this.nextSibling.style.display='none'" onclick="this.nextSibling.style.display='block'" >
<img src="/assets/Images/Avatar.jpg" class="rounded-circle" style="height:30px;width:30px; padding: 0;" alt="Avatar">
</button>
<div class="dropdown-menu" style="position: absolute;">
<a class="dropdown-item" href="">Action</a>
<a class="dropdown-item" href="">Another action</a>
<a class="dropdown-item" href="">Something else here</a>
<a class="dropdown-item" href="">Something else here</a>
</div>
</div>
This is what I want
This is the problem
Are you expecting like
.dropup .dropdown-menu {
top: auto;
left: 35px;
bottom: 100%;
margin-bottom: -36px !important;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<br><br><br>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>APPLICATIONS</li>
<li class="divider"></li>
<li>Bitbucket</li>
<li>Jira </li>
</ul>
</div>
</div>
Is there a pure CSS method to replace the caret icon in Bootstrap's dropdown-toggle class? I want it to look like a downward arrowhead or logical-or symbol (∨), like this:
instead of the original downward solid triangle caret. I've found answers for replacing the size of the original icon:
.dropdown-toggle::after {
display: inline-block; /* Default */
width: 0; /* Default */
height: 0; /* Default */
margin-left: .3em; /* Default */
vertical-align: middle; /* Default */
content: ""; /* Default */
border-top: .3em solid; /* caret size */
border-right: .3em solid transparent; /* caret size */
border-left: .3em solid transparent; /* caret size */
}
but I can't figure out a good way to make it an arrowhead. Another question referenced here requires you to manually embed the image in HTML.
You might change the default values to the following:
.dropdown-toggle {
font: 400 1.5rem/1.25 sans-serif;
color: white;
background: purple;
padding: .5em 1em;
}
.dropdown-toggle::after {
display: inline-block;
width: .3em;
height: .3em;
margin: -.3em 0 0 .4em;
vertical-align: middle;
content: "";
border: .3em solid;
border-width: 0 .15em .15em 0;
transform: rotateZ(45deg)
}
<span class="dropdown-toggle">CUSTOMERS</span>
As described in this other SO thread, you can either just remove the current icon and use a <span> or <i> tag to add your own custom/Font Awesome icon like this:
.dropdown-toggle::after {
display: none !important;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" style="background-color: #7c2a8b;">
Customer
<i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
Or you can skip the css part and just remove the dropdown-toggle class name and add the icon to your html like this:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dropdown">
<button type="button" class="btn btn-secondary" data-toggle="dropdown" style="background-color: #7c2a8b;">
Customer
<i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
Just use FontAwesome
body {
font-family: Arial;
font-size: 13px;
}
.dropdown-toggle:after {
font-family: FontAwesome;
content:"\f107";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="dropdown-toggle">CUSTOMERS</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button style="font-size:24px">CUSTOMERS <i class="fa fa-angle-down"></i></button>
</body>
</html>
code here:http://jsfiddle.net/06ngr298/
In the add icon that you want inside the span tag.
.dropdown-toggle::after {
display: none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
<span>+</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
My 5 cents :) aria-labelledby, attr.aria-labelledby - to have correct connection between a toggler and its popup, [class.dropdown-toggle]="false" - to hide standard icon, aria-haspopup="true" - to keep popup working when clicking ngbDropdownToggle element. And decorate this element in the way you want.
<div class="ellipsis" ngbDropdown container="body" placement="bottom">
<i
class="fas fa-ellipsis-h"
ngbDropdownToggle
aria-haspopup="true"
[class.dropdown-toggle]="false"
id="{{ 'nodeAction_' + node.key }}"
></i>
<div
class="dropdown-menu"
ngbDropdownMenu
attr.aria-labelledby="{{ 'nodeAction_' + node.key }}"
>
<li
class="dropdown-item pointer"
ngbDropdownItem
(click)="onEdit(node.origin.entity.tenant)"
>
{{ 'AbpIdentity::Edit' | abpLocalization }}
</li>
...
if someone still need help about just change button with image and then change icon with src property:
<div className="btn-group shadow-0 dropdown">
<img className="dropdown-toggle my-auto" data-bs-toggle="dropdown" aria-expanded="false" src={icons.ic_setting}/>
<ul className="dropdown-menu">
<ListItemWithImage icon={icons.ic_setting} label={t('settings')}/>
<li><hr className="dropdown-divider" /></li>
</ul>
</div>
I've created a Bootstrap navigation bar and below that, I have made a container in which I will show some description as shown in the image below. I've used the latest version of the bootstrap.
Now, the alignment of the description text should match that of the left-most item of the navigation bar, but what I'm getting from my code is shown in the below image.
Here you can clearly see that the alignment of the left most navbar item i.e. CP-210-1 button doesn't match with the description text starting with This is....
Here is my code.
.model-family-navigation-bar {
background-color: #00853e;
}
.navigation-bar-content {
color: white;
font-size: 120%;
}
.dropdown-menu>div>a:hover {
background: #8dc4d4;
}
.dropdown-menu>div:nth-child(odd) {
background: #d9d9d9;
}
.dropdown-menu>div:nth-child(even) {
background: #f9fffe;
}
.border-section {
border: 2px solid #D0D0D0;
margin-top: 20px;
}
.greenTitle {
color: green;
font-weight: bold;
}
a:link {
font-size: 120%;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App5</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container model-family-navigation-bar" style="min-height: 32px">
<nav class="navbar navbar-expand-sm navbar-dark model-family-navigation-bar" style="min-height: 32px">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<!-- <div class="col-sm-auto"> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigation-bar-content text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-decoration:none">
<span id="selected" style="text-decoration:none;font-weight:bold">CP-210-1</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color:#00853e">
<h1 class="dropdown-header text-white">Model Family</h1>
<div>
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item text-black" (click)="showList()">CP210-1</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-2</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-3</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-4</a>
</div>
</div>
</li>
<!-- </div> -->
<!-- <div class="col-sm-auto"> -->
<li class="nav-item">
<span class="navigation-bar-content navbar-text text-white ml-4">Proportional Directional Valve</span>
</li>
<!-- </div> -->
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="https://www.google.com/" style="font-size:13px">Data Sheet</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container border-section mt-2">
<div class="row" style="min-height:80px;">
<p class="ml-4 mt-1" style="font-size:20px">This is a proportional, 3 position 4 way, directional control valve</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
I'm not finding any way to align the left-most item of the navigation bar to the description text. Although I have an alternative to add the left padding to the left item but that's not what I'm supposed to do. So, can anyone help me out on how to align the text with the button item? Also, I'm not finding any way to decrease the height of the green colored navigation bar container equal to that as given in the first image.
If I decrease the height then the responsive behavior is not there on decreasing the browser width. So, can anyone suggest something for that also?
As a quick fix you could try setting the left padding of the "nav-link" anchor to 0.
Something like this:
.navbar-nav .nav-link.dropdown-toggle {
padding-left: 0px;
}
Or you could add a custom class to that element and use that in your selector.