Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
In my coding, I see the class navbar-fixed-top in Bootstrap v3.3.7.
Why the z-index = 1030?
The purpose of using z-index is for move the content in z-axis. Since you are using the navbar-fixed-top class, the header will always stick to the top of the page. But scrolling the page down will hide the header. In order to scroll the page content below header, z-index is used.
Bootstrap is a framework with MANY components that need to work together:
the modal should be over a component like a navbar, with the modal overlay in-between obviously
a tooltip should also display above any navbar, etc
These values are defined in less/variables.less.
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
#zindex-navbar: 1000;
#zindex-dropdown: 1000;
#zindex-popover: 1060;
#zindex-tooltip: 1070;
#zindex-navbar-fixed: 1030;
#zindex-modal-background: 1040;
#zindex-modal: 1050;
Current v4 has them defined (in now default v4-beta branch on GitHub) in scss/_variables.scss
Trying to define them with magic values is a recipe for disaster, even in projects 10x smaller than a framework like BS: 2 months later a wild page appears with a case never seen before like a tooltip displaying above a submenu, etc. Having a convention applied by every person modifying the CSS is a must have (that includes "you lone developer" and "you lone developer in 2 months" ^^)
General note about Bootstrap: a LOT of things can be modified with this file alone, if you've the skills to recompile CSS with that Gulp workflow.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am working with a React package name 'react-select' that allows me to create dropdown easily. Everything was fine until I create a page where there is multiple divs with several dropdown inside. Weirdly, they go under the next dropdown in the stack.
I can't really copy all my code, so I made something on netlify. Try to open the dropdown under the "Training" section, you should see what I am talking about. There are some empty options, but it's the same behavior anyway.
I tried to put a higher z-index on the "menu" parts (where there is options), but it didn't work.
Here is the link: https://nervous-franklin-89a3d8.netlify.app/#/demo-modify-profile
Thanks!
Seems the problem is the dropdown is trying to overlap the next section(files section in rour example). You need to add a Z-Index to the section containing the dropdown. However Z-index property only works on a positioned element. See docs here
So you want something like this.
<div style="position:relative;z-index:1{higher than other sections};">Container with dropdown in it</div>
<div>Next Section</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Essentially, I want to use the vertical timeline from CodyHouse in a project hosted on a Bootstrap template. I've migrated the HTML content, but the CSS files are causing issues. For example:
it distorts the navigation bar and header spacing
there should be a bounce animation for the elements of the timeline - no go.
I can't see any of the p text of the timeline
How can I edit/arrange the stylesheets appropriately so that the timeline inherits the font/background style of the Bootstrap but maintains the animation from CodyHouse?
Kinda hard to really pinpoint what your issues are with no code offered by you for inspection, but....
You'll really need to use your browser's inspect/page-debug functions on your page to see how both the bootstrap stylesheet and the vertical timeline's stylesheet are doing things to your page.
Bootstrap has it's own default color scheme, you can easily change it by just looking for the corresponding bootstrap elements and then overriding them in your custom stylesheet
If you're linking to three different styles sheets (boostrap, timeline, and your custom one), there can obviously be a conflict right there. Let's say on boostrap it's doing one thing to the nav bar and the top spacing, while your custom css is doing another thing and affect bottom spaces - see what I mean? You should really inspect those css files to see what they are affecting exactly.
Also, is the vertical timeline plugin you are using based on bootstrap 4? If it's built around bootstrap 3 that could be another issue as well. BS4 is still relatively new and many plugins that were based on BS3 may require further alteration.
Looking at the rules within styles.css ...you'll probably want to remove the generic rules - all those under 'Primary style' and then the first few under 'Resource style' where it makes reference to stuff within header{...}.
Also don't include the other stylesheets, reset.css and demo.css
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am migrating my small business website to use bootstrap in order to be mobile friendly. I am still getting to know the bootstrap framework and I am not an expert in css either...
My question is a conceptual one. Today with my old website, using html and css, I define in my css both the size (yes, fixed sizes) and styles (colour, etc.) of the divs I use.
On the other hand, in all the examples I've seen of bootstrap, in the css one can only define the style of the divs, while the size is defined in the html when choosing the bootstrap column's size (e.g. col-sm-4). [Note: I am following the approach of having two css, bootstrap's and my custom one.]
The way I see it, I am losing the capacity to define the size of the divs centrally from the css and hence losing maintainability. Also, the site will be harder to develop since the col-sm-* classes are semantically poor. Is this correct? Am I missing something here?
Is there a way to define css classes that reference the bootstrap classes? e.g. To define a .menu css class that can behave as .col-sm-4.
Any suggestion or recommendation is welcome.
Thanks in advance
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Firstly, I don't have much experience with Bootstrap and I just started my second Bootstrap project. Sometimes I confused about overriding CSS. It may spend more time to find out the style need to be changed rather than write from scratch. So I am thinking... how about taking out the bootstrap style?
For example, keep the markup structure, set the color background, font value to inherit, remove all shadows, gradients, border, border-radius etc.. Furthermore, build a reference in order to check the default value easily. Then we can just use the layout of Bootstrap but write our own style.
I prefer to not directly modify the Bootstrap source code. Use an extra CSS file is better to organise. It is also good to update Bootstrap.
By the way, I really miss the blankwork grid system, is it possible to add this feature into Bootstrap?
So, do you think this is a good idea or bad?
What you are looking for is possibly the customised version of bootstrap. See the details at http://twitter.github.io/bootstrap/customize.html. This will allow you to pick which elements of bootstrap framework you would like to use without adding the other parts. It also allows you to customise fonts and some basic shades and colours.
This can also be done via the less system - see http://bootstrap.lesscss.ru/less.html for information on how to do this.
And finally, if you are having trouble identifying which css is being applied to which element, have you tried using a browser debug tool such as Firebug in firefox?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Panel control over div is impacting hyperlink within the div as no linkable.My panel is just appear above my div hyperlink content.
so part of my hyperlink where panel displays not linkable.. but remaining part of hypherlink is linkable
I am not able to add my sample code over here..
Please see my detail post here.. http://forums.asp.net/t/1895787.aspx/1?Panel+UpdateProgressBar+controls+over+div+is+impacting+hyperlink+within+the+div+as+no+linkable+
You misspelled "progress" in the closing </progressTemplate> tag.
Update
Actually I was hoping that would fix it. Usually if you're having z-index issues and there's a borked tag, that's the reason why.
If it's still not working, then you need just need to dig into the CSS of the page and figure out why. The HTML you gave is not indicative enough to know what the issue could be. You want to 1) look at the rendered HTML source, rather than your ASP.NET view, and 2) look at what CSS is being applied to that HTML.
Generally, if you need to move an element above another that is blocking focus, you just increment z-index until you've achieved that. Just bear in mind that the element must have either position: relative or position: absolute before z-index will even apply and sometimes the overlapping element's z-index is ridiculously high (1000, 9999, etc.). So you might have to make the blocked element even more ridiculously high. This is all just trial and error stuff, though, so you're mostly on your own for that part.