I currently have the following HTML in a React Component and i need to set the z-index on the <header>'s in order for their tooltips to overlap the content below correctly. The Header in each section needs to have its z-index higher than the header in the next section.
I am currently achieving this via inline styles but appreciate this is not very scalable. I was wondering if there was a way i could do this via SCSS/CSS rather than inline styles?
<section>
<header style={{zIndex: 3}}></header>
</section>
<section>
<header style={{zIndex: 2}}></header>
</section>
<section>
<header style={{zIndex: 1}}></header>
</section>
<section>
<header style={{zIndex: 0}}></header>
</section>
Thanks
Related
I want to make the {curdatetime} to stick to the left and the {title} to stay in the middle. so I'm trying to use flex justify content space between with bulma css but the all elements still sticks to the left..
this is my code
<>
<header className="has-text-centered">
<h1>LoliGhaya</h1>
</header>
<div className='is-flex-justify-content-space-between mb-2'>
<small>{curdatetime}</small>
<strong className='is-size-4'>{title}</strong>
</div>
</>
After looking at the documentation, you're using it a bit wrong.
This should work for you.
<>
<header className="has-text-centered">
<h1>LoliGhaya</h1>
</header>
<div className='is-flex is-justify-content-space-between mb-2'>
<small>{curdatetime}</small>
<strong className='is-size-4'>{title}</strong>
</div>
</>
Well, this is absolute novice question: How on earth bootstrap does not have min-height?
<div class="min-vh-100">
<div class="min-heigh-75">There is no min height</div>
<div class="min-vh-25">There is no min-vh-25 to 75</div>
</div>
Using h-75 and h-25 does not work as they translate to height:75% and not min-height:75%
Am I missing something here?
This is my first time I use Bootstrap. And the problem I am facing, the text within <main> overflows. Its height does not increase to push <footer> down and the reason is bootstrap .h-25 translates to css height:25%. And height:25% remains the same no matter how much its content overflows. It does not flex itself.
<body class="h-100"> <!-- If I use min-vh-100 then h-25 does not work -->
<header>Header here</header>
<main class="h-25">
Lorem ipsum overflows the main block once it fill 25% of the parent size.
I would like the main block to increase size once it fully filled.
</main>
<footer>Footer here</footer>
</body>
Is there any Bootstrap solution for it?
I am trying to add space between elements <header> and section <section> but they are stuck to each other, such that when I apply margin to the bottom of the the top element or at the top of the bottom element, the top element moves down along with the bottom element, this only happened after I added the footer.
And I did a search but I was not able to find solution for this.
Thanks to All..
.hclass {margin-bottom:20;} // header - the top most part, need space below this
.tryi {margin:top;} //section the second part, need space above this
#divfootr {width:100%;height:auto;position:absolute;bottom:0;text-align:center;} // footer code
<header class="hclass">
<nav id="indxpg">
<div class="mainnav">
</div>
</nav>
</header>
<section class="tryi">
<div id="logotable">
</div>
</section>
<footer class="footer">
<div id="divfootr">
<p><span class="copyright"><strong>© 2016</strong></span></p>
</div>
</footer>
Your way to add margin is incorrect. It must be something like this (for a fixed margin) :
margin-top:20px;
Your missing px.
.hclass{margin-top:20px}
i have a problem with order div on small screen.
My code:
<header>
<nav>...</nav>
</header>
<div id="main">
<section id="slider">...<section>
<section id="new_articles">
<article>...</article>
<article>...</article>
<article>...</article>
<article>...</article>
<section>
</div>
<aside>
<section id="calendar">...<section>
<section id="ads">...<section>
<section id="forum">...<section>
</aside>
<footer>...</footer>
I would like to show this in the order:
1. header
2. slider
3. calendar
4. ads
5. new articles
6. forum
7. footer
what i should change?
"slider", "new articles" and "forum" have a dynamic height
You can play with float:
Here is example: https://jsfiddle.net/3f1s70er/1/
When some element is 2nd in the flow, but has float: left and element that is 1st in the flow, but has float: right - then those elements have different order.
I used order. Thanks for help
You can use media queries To make It responsive
Refer:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3.org/TR/css3-mediaqueries/
I am wondering how to override styles of shell view being injected in Durandal inside div with id="applicationHost" ... I am trying to use common Bootstrap template (sticky footer with fixed navbar) and it works as standalone but as soon as I use it within shell.html the "wrapper" looses its auto height...
Here is my shell.html
<div>
<div id="wrapper">
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
<div id="content" class="container-fluid">
<!--ko compose: {
model: router.activeItem, //wiring the router
afterCompose: router.afterCompose, //wiring the router
transition:'entrance', //use the 'entrance' transition when switching views
cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
}--><!--/ko-->
</div>
<div id="push"></div>
</div>
<footer id="footer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6"><p class="muted">© ABC Company Inc. 2013. All rights reserved.</p></div>
<div class="span6 "><p class="muted pull-right">v0.0.1-debug</p></div>
</div>
</div>
</footer>
</div>
the nav sub-view just has standard <nav id="mainnav" class="navbar navbar-fixed-top"> and the styles are the same as on Bootstrap example page...
When I examine styles via Firebug I can clearly see that wrapper div has lost its full height...Driving me nuts! :)
I fixed this by adding the following style to my main html page after the styles necessary to get the sticky footer to work
/*durandal fixes*/
#applicationHost, #applicationHost > div
{
height: 100%;
}
The first selector takes care of the applicationHost div in the main html page and the second the one inserted by durandal (it has a class of durandal-wrapper, so you could make the selector more specific if you wanted). As you have an extra div in your shell.html file you may need the following:
/*durandal fixes*/
#applicationHost, #applicationHost > div, #applicationHost > div > div
{
height: 100%;
}