I have integrated Bootstrap Vue into my project and am having a hard time customizing it.
Specifically, I am talking about the Navbar component.
I have read the documentation and saw that I can apply a variant to the navbar that will define the color of the whole navbar.
Thing is, I didn't provide a variant to the navbar (and don't want to) and when it collapses, the collapsed menu icon (hamburger menu icon) is black and is not visible due to the background color of my website.
I have inspected the DOM of the website and used the following CSS rules and selectors:
.navbar-toggle
.navbar-toggler
.navbar-toggler-icon
With each of them I tried to apply the rule:
color: white !important;
but this had no result.
I have looked online and in SO, but found nothing that addresses this scenario.
Navbar open:
Navbar collapsed:
Obviously, I can change the background color of my website, but I prefer not to do that as I do not want to change the look and feel of the website just because of a minor issue (and I want to be able to know how to overcome this).
Link to code
Looking at your code - .navbar-toggle and .navbar-toggler are just plain div's, so color prop would affect only text color.
If you are trying to change icon color - it is an inline background svg. you can only override it with your own file.
I managed to solve this scenario by using the following selector:
.navbar-toggler > .navbar-toggler-icon {
background-color: white;
}
#Ivan Klochkov pointed me in the right direction, but I had to mess a bit with the correct selectors.
Related
I'm rendering a CommandButton with only an icon inside a container with a dark background with gradient and I have set the background color of the button to be transparent. (Note that it is transparent because the container's background color has a gradient.)
The problem I have is that since the default focus outline for the button is black and it's not visible against the dark background. How can I change this so that the focus outline becomes the invert color of the primary color?
I can always attach a custom CSS to change the outline color, but I'm looking for the correct way supported by the Fluent UI framework. I noticed that the Button component puts a white background color when the primary=true prop is specified. So, there seems to be a way to change the outline color, but I could not really figure out how. I also looked into the source code, and it takes a theme object and generates a class name, but this still did not tell me the full story.
There are sometimes ::after selectors in play with FluentUI focus behavior. The "Chrome version >= 86" portion of this answer shows how to put Chrome in a state that will yet you inspect your components without losing focus in the page when you navigate in DevTools.
When I encounter focus styling that I want to change in Fluent, I can find out what's applying the styles I wish to alter using this method and then override them.
Am already had a navbar and a tags tabs, all works good with my styling, now am trying to convert it to bootstrap-vue. non is working.
Start simple, i followed this question here [https://stackoverflow.com/questions/49105258/change-title-color-of-bootstrap-vue-tab-title][1]
but the styling does not change. what would be the right way, to change only the background color of titles for all tabs, and make it act as sticky menue?
After long search i got help. and all i wanted is to use
::v-deep {}
on my styling.
I have a Vue application that has menu items across the top in a nav bar fashion. The number of menu items changes based on the type of user logged in. Sometimes it might be 3 items, some times it could be up to 6 items.
I am trying to figure out how to determine when to switch between the desktop version of this navbar where the items are layed out as a row of buttons and the mobile version where the menus are hidden under in a slide in type drawer.
I have overriden the updated() life cycle hook to select the appropriate view on startup. I am using ref on a div that contains the menu buttons. From that I can get scrollWidth (the amount of pixels needed to display all the buttons) and clientWidth (the amount of pixels the div has been given). I have overflow: hidden.
From that I can determine when I need to switch from the desktop to the mobile view. I am using a resizeObserver to catch resize. This is working great to switch from desktop to mobile.
But the problem is that once I am in mobile, the desktop navbar isn't part of the dom so i don't know how many pixels are needed to render it so I don't know when to switch back from mobile to desktop as the user resizes the window bigger.
I also don't know how wide the menu buttons will be for different languages.
Any suggestions?
Thanks
Greg
But the problem is that once I am in mobile, the desktop navbar isn't part of the dom so i don't know how many pixels are needed to render it so I don't know when to switch back from mobile to desktop as the user resizes the window bigger.
So just hide them with visibility:
<div class='wrapper' :class='[mode]'>
<div class='items' ref='items'>
<div class='item' v-for='item in items'>Item {{ item }}</div>
</div>
</div>
.wrapper {
overflow-x: hidden;
pointer-events: none;
visibility: hidden;
&.desktop {
visibility: visible;
pointer-events: all;
}
}
.items {
display: inline-flex;
}
.item {
margin: 0 10px;
white-space: nowrap;
}
JSFiddle
Edit to add more information:
This answer caused me to rethink my approach to the question. I was looking at switching between two different navbar contents. But that isn't compatible with what is being suggested as an answer. The key to the answer is that both the mobile and the desktop navbar elements are going to be present at the same time. The difference is that the desktop elements are going to be squeezed into a smaller and smaller space and then made invisible using the visibility property.
Note about the visibility property: It leaves the element in the DOM and on the screen. The screen still renders the page as if the element was visibile but has transparent pixels. This is important to understand. It is also why the pointer-events have to be handled (turned on and off), because the elements are still there and can still be interacted with. So when they are hidden, we have to disable the pointer-events. And when the element comes back into visibility, we have to enable the pointer-events.
The other thing that you might have to look out for is that the answer uses offsetWidth. For simple navbar contents, this is fine. But in my case I have layers of flexbox and in the end the div that contained the menu was being squished due to flexbox and even though the overflow contents were being hidden, the offsetWidth was being shrunk. I switched to scrollWidth to get the true width of the menu and then it worked greata again.
I am using bootstrap Clock Picker plugin.
When I use picker in modal, it is not auto adjusting when it is in bottom of the modal. so that I am not able to view the picker completely. When it is in the bottom of the page, it should come on top of the text field automatically.
Please help.
I am not able to fix.
Please suggest.
Thanks in Advance.
use this code to fix your issue.
sometimes when you are multiple layers of Div or any Tags. then this type of issue comes or some CSS code of an Element always force to come in top or Front. then that case this example will very helpful. In some solutions to this problem, I saw some developers used different codes like they are finding DIV Class name and setting Z-index. that also works.
.popover {
z-index: 215000000 !important;
}
When you use clock picker in modal then you will be not able to view it because of the z-index of the modal, you have to give z-index to clockpicker also as below, please add this below style in your css.
.clockpicker-popover {
z-index: 999999;
}
i am using jquery mobile and for header/footer i am using data-position="fixed".
However, when we scroll the page... the header footer goes away ands reappear when scrolling stops..
Is there a way we could just make it fixed on the screen an show all the time you are scrolling ?
I can only think of a way is to apply position fixed and not use jquerymobile for these elements..
I tried my best to get this to work. If you want you can delete the function that changes the header and footer class from .ui-fixed-overlay to .ui-fixed-inline and remove the webkit animation from .fade.in and .fade.out, but I've had no lock preventing the windows from disappearing. However, I believe JQM only recalculates the position of the header and footer elements after you scroll.
I put the following css in page div to remove the webkit animation.
.ui-fixed-inline {
opacity: 1!important;
display:block!important;
-webkit-animation-name:none!important;
}
.fade.in, .fade.out {
opacity: 1!important;
-webkit-animation-name:none!important;
display:block!important;
}
I know this is not what you want but it does speed up the reappearance of the header and footer elements (it looks a bit choppy.) Unless you want to rewrite the JQM javascript that controls the header and footer positioning, I don't think there is any easy way to do this as the JQM fixed position code is built to re-position after the user scrolls. I'll keep looking and edit this answer if I find a way.
A simpler version of Chase's code works fine for me:
/* sass - remove toolbar fade */
.nofade{
&.in, &.out {
-webkit-animation-name:none;
}
}
Note that tap-to-hide toolbars uses this same fade property, so the following is required:
$.mobile.fixedToolbars.setTouchToggleEnabled false # coffeescript