I am working on Angular, and now I have problem with dropdown z-index issue.
When I inspect in chrome, there is a new class called dropdown.
In this dropdown class there some information include z-index (z-index: 1050).
However, there is no dropdown class found in my html file and the whole project as well.
.dropdown {
z-index: 1052;
background-color: red;
}
I updated my scss code with dropdown class, and it changed color to red, but z-index is not change to 1052.
Note: position of dropdown is absolute.
Can anyone help or suggest me how to solve this issue? Thank you!
.dropdown {
z-index: 1052 !important;
background-color: red;
}
It works now!
Just add !important to set z-index value.
Maybe !important help z-index value that set here overwrite to its default value???
Related
I tried to do
.btn, .btn-large, .btn-small{
#extend .pink, .accent-1
}
Is there an issue with the specificity?
You can just override the default btn class by changing background-color property like:
.btn {
background-color: red;
color: white;
}
Button would be like
<button class="btn btn-lg">Hello</button>
I'm not sure if you're only looking for an answer in SASS, but here's a solution in pure CSS.
From the Materialize.css docs get the hex colour code for pink-accent-1 #ff80ab and apply !important parameter to the background-colour for the buttons just to be sure to override the default Materialize classes.
.btn , .btn-small, .btn-large{
background-color: #ff80ab !important;
}
Here's a working fiddle.
Oh! It seems like I misplaced my styles.min.css file. Sorry, everyone. It's really nice to know I have these kinds of resources if I need them.
I've been having difficulty changing the active colour of an icon in my tabpanel item in Sencha Touch 2.2. I've tried lots of variations of CSS and SASS but have not managed to change it. The CSS I have tried:
.x-tabbar.x-docked-bottom .x-tab-active {
color: #000000;
background-color: #000000;
}
.x-tab-active {
background-color: #000000;
color: #000000;
}
I've also tried setting the active colour in SASS, but this doesn't seem to work either. The only bit of CSS that seems to have that blue in it is this bit:
.x-tabbar-light .x-tab-active .x-button-icon::before {
color: #1da2ff;
}
...but when I try setting that to black, nothing happens! Anyone have any ideas how I can change it??
EDIT: I tried the first suggestion changing the CSS to this:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #000000;
}
...but this is what I see:
Applying color: #1da2ff; to the :before pseudo-element is the right thing.
The reason why it doesn't work for you is that the rule get overridden by another one with a more specific selector:
.x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon:before {
color: #50b7ff;
}
This is the exact situation where using !important is appropriate and not shameful:
.x-button-icon:before {
color: #1da2ff !important;
}
You have the right idea by selecting the icon, which is a span, and not the wrap, which is a div.
The div wrap .x-tab-active has a background color that decides the background of the active box. The icon has an image mask so background color or background-image gradient will determine the color of the icon. There is an additional span that wraps the text, like "x-button-label, for which a color style will change its color.
For changing the color of the icon try:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #1da2ff;
}
Thanks a lot, it was enough to add this in my CSS:
.x-tabbar-light.x-docked-bottom .x-tab-active .x-button-icon:before {
color : #000;
}
There was no need to add !important for me as I was using the new base theme for ST 2.2, but your solution worked great!
:-)
I am trying to apply css class style to my #Html.TextBoxFor control in mvc3 razor view. But I am not able to see the defined style applied to the control. Below is my code:
In my .cshtml file I have the control as:
#Html.TextBoxFor(model => model.project.ProjectName, new { #class = "myStyle"})
In .css file I have defined the style as:
.myStyle
{
width: 150px;
font-family:Arial, Helvetica, sans-serif;
font-size: 1.00em;
}
What am I doing wrong? Can anyone help me please?
Thanks,
Balaji
If you are sure that your style sheet is properly loaded to the page (check the path to style sheet is correct), possible reason for the probelm could be, some other styles are overriding your defined style. Use IMPORTANT to make this override everything else
input.myStyle
{
width: 150px !IMPORTANT;
font-family:Arial, Helvetica, sans-serif !IMPORTANT;
font-size: 1.00em !IMPORTANT;
}
The .cshtml code looks correct to me. I would inspect the HTML source that gets generated to verify that class="myStyle" is present on the ProjectName input. If it is present, then the problem lies with your CSS (e.g. another style may be overriding myStyle).
I'm using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.
It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.
If I have anything on the page with position: relative (like jquery ui accordion, or a google chart) then the drop down menu shows behind it. Tried changing the z-index of the dd menu and of the nav-bar, but doesn't make any difference.
The only way I can get the menu to sit above the other content is to change the content to position: fixed; OR z-index: -1; -but both of these solutions cause other problems.
Appreciate any help you can give me.
I think this is probably some standard issue with CSS positioning that I've misunderstood, so haven't posted any code, but can do if needed.
Thanks.
Just realized what's going on.
I had the navbar inside a header which was position: fixed;
Changed the z-index on the header and it's working now - guess I didn't look high enough up the containers to set the z-index initially !##!?
Thanks.
IE 7 on windows8 with bootstrap 3.0.0.
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
fixed
Ran into the same bug here. This worked for me.
.navbar {
position: static;
}
By setting the position to static, it means the navbar will fall into the flow of the document as it normally would.
This will fix it
.navbar .nav > li {
z-index: 10000;
}
In my case in addition to z-index I had to set overflow: visible in parents elements
I had the same problem and after reading this topic, I've solved adding this to my CSS:
.navbar-fixed-top {
z-index: 10000;
}
because in my case, I'm using the fixed top menu.
Still the issue with Bootstrap v3, navbar and dropdown have same z-index ;-( I just increased .dropdown-menu z-index to 1001.
Solved by removing the -webkit-transform from the navbar:
-webkit-transform: translate3d(0, 0, 0);
pillaged from https://stackoverflow.com/a/12653766/391925
Just give
position: relative;
z-index: 999;
to the navbar
This fixed it for me:
.navbar-wrapper {
z-index: 11;
}
Solved this issue by removing transform: translateY(50%); property.
This worked for me:
.dropdown, .dropdown-menu {
z-index:2;
}
.navbar {
position: static;
z-index: 1;
}
I had the same problem, in my case because i forgot this in my NavBar style:
overflow: hidden;
I ran into a situation where a button with a Bootstrap drop down was embedded in a DataTables row. In that instance, I had to remove fixedColumns: true in the settings because that was injecting a position: sticky into the element style.
Did not work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedColumns: true,
fixedHeader: true, ...
Did work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedHeader: true, ...
I'm late to the party here but for anyone using the bootstrap sticky-top class beware that it's z-index is higher than what is defined for the dropdown so anything within it will bleed through the dropdown's menu.
https://github.com/twbs/bootstrap/issues/31747
This was my scenario and the other answers here that referenced position: sticky put me onto it.
In my case, this was caused because I had a CSS animation with transform operations applied to a parent <div>. I worked around the problem by moving the animation to a different element.
I am using kendo ui dropdown list and some other pickers. I want to style the selected item background color.
I had tried .k-dropdown .k-state-selected{ background-color: red} but the color of selected item is not changing. It is set to default orange only. But the same code is working for grid and list view.
How can i able to do that.
Regards,
Sri
The following CSS should work for date(time)picker and the dropdownlist:
.k-widget .k-state-selected,
.k-list .k-state-selected
{
background: red;
}
Here is a live demo: http://jsbin.com/efozol/5/edit
KendoUI defines background not just as a background-color: XYZ; but using background-image: none, -webkit-linear-gradient(top, #ffc0cb 0px, #ffc0cb 100%); too
So, start overwriting this definition saying background-image: none;