So, previously I was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, I don't want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and ID:
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown#navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown#navigationDropdown {
margin-left: 0 !important;
}
}
So, this seems like it would work perfectly well, but unfortunately, it does not. Doing this makes the website completely disregard any of the CSS, and makes my navbar look all wacky and evenly spaced, as opposed to justifying my links left, and navbar right.
I've found out, through the inspector, that for some reason, the id is being applied to the a element generated by React Bootstrap, not the encompassing div, which is given the proper class.
Any ideas what might be going on?
Any help would be much appreciated, and let me know if I need to provide more info!
Edit:
I tried reformatting my code in the ways specified within this Github discussion, and unfortunately, my issue still remains the same--the ID is assigned to the 'a' element, rather than the dropdown div.
Looks like all i needed to do was surround the dropdown element with a 'div' element and then apply the id to that. There might be some deeper issue at play here, but this fixed my issue.
Related
When I use lightning inline editable data table component, the status bar would cover the edit panel.
I think it might is a SLDS bug.
I ran into this problem as well. I agree that I think it is a CSS issue on the SLDS side.
I'm using a lightning:datatable with inline editing, and I noticed that the footer bar div with the Cancel/Save buttons is using the 'slds-docked-form-footer' class, which sets the z-index at 8000.
Crawling up from the datepicker I noticed that the "table cell" contains a section element that has inline styling setting the z-index to 7002. That section element also has a class of "slds-popover_edit", so my workaround solution was to put this into my lightning component's css file:
.THIS section.slds-popover_edit {
z-index: 9999 !important;
}
Hope this helps, or that you've found a better solution by now. I'm going to test my page to make sure this change didn't have any unintended consequences.
Currently, I am using a directive from a third-party library for a UI toggle button. I changed the background color and left/right positions of the toggle button a bit to meet my business specifications. E.g. the out-of-the-box style came as light green for true, light red for false; I changed this to a darker green for true, and a light grey for false. I also moved the toggle positionally a bit to the left. All of this works fine.
The one issue I'm experiencing is that for a split millisecond when the page with the toggle button renders, I see the old style quickly change from what came out-of-the-box, to my updated style. There aren't any other glitches in style after this fact, just the initial loading shows some quick shifting around on the element. This isn't a huge issue but I can't seem to pinpoint the issue or know why it is happening. Any thoughts? Something in an issue for CSS hierarchy perhaps?
Notes relevant to the issue:
I used the inspector to find the classes I needed to override, since the directive itself just uses an nz-toggle tag.
I am using !important to override. I've read that this is bad practice in itself but it is being used across the entire project and has been established as "our standard" of overriding styles
Here's an example of one rule from my CSS file compared to what comes out of the box:
.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}
vs.
.nz-toggle-wrap.true {background-color: #60bd68;}
Any thoughts?
This happens because your "new" CSS loads after the "old" CSS.
Of course that should be true anyway, because you want to override the old style, but it seems that the old and new code are too far away from each other hence you manage to see it change.
To solve this you have to move the new style "closer" to the old style.
The way to do it depends on your project architecture and your build process.
Another option is that the class "true" is added only after page load, and so only then your new style kicks in.
If you are loading this "third party library" locally, you might have to directly edit the CSS files of the plug-in.
With the plug-in you linked, maybe you need to edit this file directly to prevent the "flicker", which is caused by the styles loading in sequence:
https://github.com/tannerlinsley/nz-toggle/blob/master/src/nz-toggle.styl
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}
I'm new at angularjs/bootstrap and I'm trying to create a SPA that uses bootstrap accordion lists. I'm trying to change the color of the whole entire accordion tab, however, it's only changes part of the accordion space. I looked online and this question (Add class to accordion heading using angualr ui bootstrap?) and it's Jsfiddle (http://jsfiddle.net/Zmhx5/3/) represent my problem perfectly, but does not explain the solution.
I tried using firebug to find out what's going on behind the scenes, and it says the whole entire accordion tab is "". I have a css class that overwrites that style, but for some reason, something is overriding it.
.panel-heading {
background-color: red;
}
This website has a tutorial on accordions and its css simply overwrote it (http://patternry.com/p=accordion/). I tried doing the same but it did not work, please help :/
The reason why your override doesn't work is because of CSS Specificity. Since the Bootstrap style is more specific than yours, it is the one that's being applied. You'll need to override as follows
.panel-default >.panel-heading {
background-color: red;
}
Here is the JSFiddle for reference.
You should use scss in this case.
<div class="custom">
<accordion>
...
</accordion>
</div>
In css you will need to define.
.custom {
.panel-heading: {
background-color: red !important;
}
}
Since I couldn't add a comment to #AdityaSethi in #BartJedrocha's answer I will put an answer here since I think that it is useful.
.panel-default >.panel-heading {
background-color: red;
}
worked for me where
.custom {
.panel-heading: {
background-color: red !important;
}
}
Did not. Perhaps it is the use of SCSS? I read somewhere that SCSS uses the extension .scss. I didn't have the patience to change my stylesheet extension or create a new one. Sooo I tried the 2nd answer.
My comment however is more toward the #AdityaSethi comment that noted the issue of that solution affecting the entire app since panel classes are widely used. Understandable. I figure though the easy solution to that is:
div.custom .panel-default>.panel-heading {
background-color: red;
}
And that did the trick for me..as far as still changing the styles. The rest of my bootstrap page must not have had other panels in use because nothing else was change before I added div.custom to the CSS. But I imagine that with what little logic occurs in CSS, no other panels outside of div.custom should be affected. :)
Hi I have built a site using a font-icon from icomoon as image alternatives. Everything is fine however in ie7 they display with a text-decoration underline.
I have used a class to stop this when used in links which works in all browsers except ie7.
I put the icon in as a data icon in the 'a' and the text for links in a span. And class like so..
a.{
text-decoration:none;
}
span{
text-decoration:underline;
}
This is fine in every browser except ie7???
Even in <i> elements it adds a random underline, so again I added a style
i{
text-decoration:none;
}
Still no joy.
Any help would be greatly appreciated.
I don't know exactly what you think the a. selector would do.
I suggest you use a descendant selector:
a i {
text-decoration: none;
}