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 dont 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;
}
}
However, this does not work, despite using the !important tag, which i previously thought was a universal trump card that would override everything else, regardless of the high amount of specificity that i already have, but alas, it does nothing.
So i thought, hmm, maybe i have to go all the way up to my custom.scss, which is theming my bootstrap, and already overriding some stuff.
Well, unfortunately, there isn't a $dropdown-margin-left variable that i can easily just change myself, so i attempted to implement it like this
.dropdown {
#navigationDropdown {
margin-left: auto !important;
}
}
#media (max-width: 768px) {
.dropdown {
#navigationDropdown {
margin-left: 0 !important;
}
I have been enjoying the bootstrap components, but man if they don't make it as hard as possible for you to simply override their css, it's like they want to force you into doing things a certain way.
Edit:
So, ive found out, through the inspector, that for some reason, the id is being applied to the a tag generated by React Bootstrap, not the encompassing div, which is given the proper class. Any ideas what might be going on?
Since your element has both the class and the id, your selector needs to be:
.naviDropdown#navigationDropdown
with no spaces.
Related
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.
I am extensively using the showPopupDialog(...) function of Dialog and it works fine. I remember that in the past it didn't work on Android or there were problems on Android, but now it works pretty well on Android.
But I have a styling problem with Android. Basically I want there to be a Component shown in the middle of the Dialog. This is the easiest case, sometimes I add buttons on the south side. In both situations, however, I can put the content of the Dialog popup exactly on the center on iOS only, while on Android there are problems.
This is my current CSS:
#media platform-and {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
#media platform-ios {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-top: 0px;
}
}
The main difference between iOS and Android is that while iOS works correctly with this CSS whether the arrow is up or down, on Android, to get the same result of iOS, I would need a CSS made like this:
#media platform-and {
PopupContentPane-ArrowTop {
margin: 0px;
padding: 1.5mm;
}
PopupContentPane-ArrowBottom {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
Or something similar (with a few more tweaks).
So, on Android, when the arrow is on the bottom I need an extra padding-bottom. That'all, but it's not possible because currently there aren't an UUID for the PopupContentPane when the arrow in on the top and another UUID when the arrow is on the bottom.
Any idea or workaround? Thank you
(I add that so far this is the only situation where I need to use the #media tag of CSS to differentiate iOS styles from Android styles.)
Originally when we wrote the popup dialog it was an iOS only feature since the styling were only on iOS. We used a 9-piece image border to do the popup and we didn't want to replicate that theme element in every one of the native themes so we left it to the developer.
Later on we came up with the ability to show an arrow on a RoundRectBorder. Another advantage was the move on iOS/Android to flat design which made the previously complex dialog style into a simple solid white popup. So we implemented this cross platform in white. But because iOS has the pre-existing image border it's still used on iOS and wasn't removed. We should probably remove it and deal with the minor compatibility issues that arise.
I recently worked on that in InteractionDialog here: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/components/InteractionDialog.java#L786-L815
It might make sense to do something similar for Dialog which doesn't seem to have that code anywhere: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/ui/Dialog.java#L1209
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;
}
container, by default, puts contents in the centre (with margins on the side) instead of filling up the whole screen.
What is the rationale behind this?
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
#media (min-width: 992px) {
.container {
max-width: 970px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
Is this a question regarding why, by design, container doesn't fill out the entre screen?
While I can't claim I know for sure, I can imagine this is a decision based upon the fact that you rarely would want your content to start right at the edge of a screen. I can also imagine many people are more comfortable doing a couple of static layouts rather than a completely liquid design, not to mention some layouts can be very challenging to design with a percentage based width.
You could obivously go liquid and use max-width: 100% and apply padding to the container instead. Personally this is my preferred approach.
There's no best practice here, the better approach is largely based on the layout in question.
You can also use the container-fluid class, which makes everything percentage based. So instead of the container having a fixed width and being centered on the page, you then have container-width equal to 100% of the viewport.