I want to apply custom CSS to the title and content of a popover in Bootstrap, however, it seems that my CSS is being ignored.
How can I apply specific CSS to the title and the content respectively?
$("#poplink").popover({
html: true,
placement: "right",
trigger: "hover",
title: function () {
return $(".pop-title").html();
},
content: function () {
return $(".pop-content").html();
}
});
html, body {
width: 100%;
height: 100%;
}
.pop-div {
font-size: 13px;
margin-top: 100px;
}
.pop-title {
display: none;
color: blue;
font-size: 15px;
}
.pop-content {
display: none;
color: red;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
<a id="poplink" href="javascript:void(0);">Pop</a>
<div class="pop-title">Title here</div>
<div class="pop-content">Content here</div>
</div>
For example: http://jsfiddle.net/Mx4Ez/
The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original.
Try adding this to your css:
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
Update
Depending on the library version you're using, the names may be different. If the above does not work, try using .popover-header and .popover-body instead.
If you have multiple popovers on your page and only want to style one of them, you can leverage the popover's template option to add another class:
$("#myElement").popover({
template: '<div class="popover my-specific-popover" role="tooltip">...'
});
I started by just using the default value for template from the docs, and added my-specific-popover to the class attribute.
The newly created elements have the following hierarchy:
.popover
|_ .popover-title
|_ .popover-content
Which is injected after the element that triggers the popover (you can specify a specific container for the injected popover by setting the container option, in which case you will set the styles using the element that you passed as container). So to style a popover you can use css like the following example:
<div id="my-container">
Popover This!
</div>
<style>
.popover-title { color: green; } /* default title color for all popovers */
#my-container .popover-title { color: red; } /* specific popover title color */
</style>
As Matt said before, it may depend on the bootstraps version, for v4.6 you should do:
.popover{
background-color: red;
}
.popover-header {
color: red;
}
.popover-body {
color: blue;
}
Bootstrap >= 5.0
You can override Bootstrap popover styles.
.popover {
background-color: var(--main-bg-color);
border: 1px solid var(--border-color);
}
.popover-body {
color: var(--font-color);
}
.bs-popover-top {
> .popover-arrow {
&::before {
border-top-color: var(--border-color);
}
&::after {
border-top-color: var(--main-bg-color);
}
}
}
.bs-popover-end {
> .popover-arrow {
&::before {
border-right-color: var(--border-color);
}
&::after {
border-right-color: var(--main-bg-color);
}
}
}
.bs-popover-bottom {
> .popover-arrow {
&::before {
border-bottom-color: var(--border-color);
}
&::after {
border-bottom-color: var(--main-bg-color);
}
}
}
.bs-popover-start {
> .popover-arrow {
&::before {
border-left-color: var(--border-color);
}
&::after {
border-left-color: var(--main-bg-color);
}
}
}
And replace --main-bg-color, --border-color, and --font-color with yours.
Related
I want to know if is there a way to select dynamically an element with same prefix of class but different suffix. Ex:
HTML
<div class="bg-primary-light"></div>
<div class="bg-primary-dark"></div>
CSS
.bg-primary-light { background-color: #fff }
.bg-primary-dark { background-color: #000 }
Is there a way to select for example
.bg-primary {
height: 100px;
.-light { background-color: #fff; }
.-dark {background-color: #000 }
}
`
Just to keep the "parent" properties
You can use the attribute selector with the *= operator to select elements by its partial class name
[class*="bg-primary"][class*="-light"] { background-color: #fff; }
[class*="bg-primary"][class*="-dark"] { background-color: #000; }
So I looked at how CSS "shares" its properties here : https://stackoverflow.com/a/199719/13707884
This was written in 2008 so I figured maybe CSS does allow for inheritance now & sure enough there is an article on it here :
https://coderwall.com/p/lqjd1w/css-class-inheritance-in-css
So I am trying out the code as mentioned in the link on "coderwall":
[class*=“row-“] {
border: 5px solid lightskyblue;
}
.row-1 {
color: blue;
}
.row-2 {
color: darkred;
}
<div class="row-1">AAA</div>
<div class="row-2">AAA</div>
However, this does not seem to be working. What could I be doing wrong here?
Your quotation marks in your first selector are invalid.
[class*="row-"] {
border: 5px solid lightskyblue;
}
.row-1 {
color: blue;
}
.row-2 {
color: darkred;
}
<div class="row-1">AAA</div>
<div class="row-2">AAA</div>
I wanna know how can I use #extend in SASS when I have nested CSS.
Here's my code , I wanna extend all property in a button which is in section to my .last-btn
section {
button {
background - color: rgb(111, 190, 190);
border: none;
padding: 2e m;
border - radius: 10e m; &
: hover {
background: rebeccapurple;
} &
::after {
content: "Hello";
}
}
}
.last - btn {
}
you can try with:
.last - btn {
#extend section>button;
}
but I haven't tested it.
Or you can make a mixin.
Can you please check the below code? Hope it will work for you.
section {
button{
background-color:rgb(111, 190, 190);
border: none;
padding: 2em;
border-radius: 10em;
&:hover{
background: rebeccapurple;
}
&::after{
content: "Hello";
}
}
.last-btn{
#extend button;
}
}
Please refer to this link: https://jsfiddle.net/yudizsolutions/sqv391w8/3/
I need to change the default primary Bootstrap 4 color (after the Bootstrap stylesheet has been loaded) to a custom color (choosed by user) for a dynamic Bootstrap component with an internal CSS stylesheet.
I could do, for example, .btn-primary { background-color: red; } but this works just for buttons and, however, it doesn't change the other btn-primary states like ":hover", ":active" and "disabled". It also doesn't change the "primary" color throughout the entire CSS for .alert-primary, .text-primary, .bg-primary, .btn-outline-primary, .badge-primary, etc...
What's the possible solution?
You need to download the Bootstrap Sass files. You can do so from this link.
Once you have them you can open the main bootstrap .scss file and search for:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Change "primary" to what you need and then recompile to CSS. If you don't have Sass installed on your machine you can use various online tools to accomplish this. Example.
Source: https://getbootstrap.com/docs/4.3/getting-started/theming/
You can do so by using the variables concept(https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
Bootstrap 4 also works on the variables
You can try changing the variable values at run time as mentioned below:
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
// get variable from inline style
element.style.getPropertyValue("--main-bg-color");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--main-bg-color");
// set variable on inline style
element.style.setProperty("--main-bg-color", "red");
There are different ways do it. I am describing one of them.
Import below lines to your scss file.
#import '~bootstrap/scss/bootstrap.scss';
After that write below code to override it.
$primary = 'red';
$gray = 'gray';
.btn {&.btn-primary {
#include button-variant($primary, $primary, $primary, $primary);
&.disabled,
&:disabled {
border: $gray;
background-color: $gray;
}
&:hover {
opacity: 0.85;
}
}
}
Check the link to use sass mixins to override bootsrap classes.
This is a really strange problem which only affects Google Chrome.
If I have 299 rows in a drop down list, it keeps my custom CSS. However, the second I reach 300 rows all my styling is removed and seems to be set to a default by Google Chrome.
In the JSFiddle page, it has 300 rows, if you view the result, it will have default styling. But if you remove one row, my custom styling will be applied. Why is this?
JSFiddle: https://jsfiddle.net/s7opd7dm/
Simple drop down element:
#Html.DropDownListFor(m => m.SupplierID, new SelectList(Model.Suppliers, "SupplierID", "DisplayName"), "Select Supplier Name", new { #id = "SuppNameDD", #class = "GRDropDown", disabled = true })
I had the same problem. I found out that they disabled it at 300 options or more.
We intentionally disabled styling for 300+ options because of a
performance issue (crbug.com/500401).
Read about it here
Chrome Intentionally did disabled styling for 300+ options, so we can't reach the answer that way.
In short i would like to say that you should use any custom drop down.
As you are requesting for a solution to achieve, here's the fix
In that case i would prefer you to create a customized drop-down using other html elements like divs and list and take the selected list value. Here i am going to show a demonstration of how to create a customized div. The code has been tested in ASP.NET MVC5 C# and works fine. Post this demonstration here to promote this idea, as this might help anyone like you searching for what to do on cases like this.
in your some_view.cshtml add the following to include jquery and styles
<script src="#Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<!--<script src="#Url.Content("~/Scripts/myjquery.js")"></script> in case want this jquery to be external-->
<script>
function my_dd(el) {
this.dd = el;
this.initEvents();
}
my_dd.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd = new my_dd( $('#dd') );
$(document).click(function() {
$('.wrapping').removeClass('active');
});
});
/** on select take the value to hidden text field**/
$(document).ready(function()
{
$('ul.my_dd li').click(function(e)
{
var selected=$(this).text();
/**change label to selected**/
$('.label').text(selected);
$('#selected-value').val(selected);
});
});
</script>
<!--<link href="#Url.Content("~/Content/my.css")" rel="stylesheet" type="text/css" />
in case want the css to be external-->
</script>
<style>
*,*:after,*:before {
box-sizing: border-box;
}
.wrapping {
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px 15px;
cursor: pointer;
outline: none;
}
.wrapping:after {
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 1px solid red;
border-style: solid;
border-color: #366;
}
.wrapping .my_dd {
position: absolute;
top: 60%;
left: -45px;
right: 0px;
background: white;
transition: all 0.1s ease-out;
list-style: none;
opacity: 0;
pointer-events: none;
}
.wrapping .my_dd li a {
display: block;
text-decoration: none;
border: 1px solid;
padding: 10px;
transition: all 0.1s ease-out;
}
.wrapping .my_dd li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
.wrapping .my_dd li:hover a {
color: grey;
background-color: darkgrey;
max-height:300px;
}
.wrapping.active:after {
border-width: 0 6px 6px 6px;
}
.wrapping.active .my_dd {
opacity: 1;
pointer-events: auto;
height:300px;
overflow-y:scroll;
}
</style>
</style>
<div id="dd" class="wrapping">Test Drop Down
<ul class="my_dd">
<!-- use list or a foreach or for loop to push content to list
example
#foreach(var productId in Model.FailedProductIdsList)
{
<li>#Convert.ToString(productId);</li>
}-->
<li><i></i>Select 0</li>
...............
<li><i></i>Select 300+</li>
</ul>
</div>
<!-- #Html.TextBoxFor(c => c.Propertyname, new { #Value = "selected" })-->