I'm using the bootstrap-vue overlay on a page that has long content scrolled via the browser window.
<b-overlay :show="loading">
The overlay correctly covers all of the content, even the part below the viewport, but the overlay's built-in spinner is centered on the content rather than the viewport, so the spinner ends up near or below the bottom of the viewport when the content is long enough.
I've tried custom content via a slot, like this...
<b-overlay :show="loading">
<template v-slot:overlay>
<div style="???" class="text-center">
<p style="???">Make me a spinner and center me on the viewport</p>
<b-button
</div>
</template>
...with dozens of ideas for style="???", including position:absolute with different tops, including top=50vh, including !important strewn around, etc., but the content doesn't budge.
// Note that this snippet doesn't run, because I don't see a way to get
// bootstrap-vue via CDN
var app = new Vue({
el: '#app',
data: function() {
return {
message: 'Hello Vue!',
messages: []
}
},
mounted() {
for (let i=0; i<50; i++)
this.messages.push(i)
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<b-overlay :show="true">
{{ message }}
<!-- long content below extends the overlay size -->
<!-- this moves the spinner down and off the viewport -->
<ul>
<li v-for="m in messages" :key="m">{{m}}</li>
</ul>
</b-overlay>
</div>
I think key to solving this is finding the CSS selector that allows me to change the spinner's position to "fixed" as opposed to "absolute" which seems to be what bootstrap generates.
To get spinner on center of screen you need to make it as direct child of body.
If it is nested it will have restrict area inside immediate parents area.
Try to add that separately or once your DOM ready detach overlay and append to body tag.
I ran into the same issue. Adding this line of CSS on the component resolved it for me:
<style>
.position-absolute {
position: fixed !important;
}
</style>
Note: make sure to not include the scoped keyword in your <style> tag, as this will not work for Bootstrap classes.
On this link I've build a simple html/css based layout. What I want to achieve the following: I want that the content section gets a overflow-y as soon the window height is smaller then the content height. The footer and header need to stay in the same position. Only the content section must be smaller.
This sounds very simple, but to my own surprise I couldn't find a solution yet. I'll tried to add some max-/min-height and overflow values to the content section, but this wouldn't work.
Would be awesome if someone could help me out. Thanks
I would use a combination of CSS and jQuery addClass() as follows (I am calling the content section #Content, let's say 600px for this post):
//css
#Content {
height:600px;
//etc.
}
.contentoverflow {
overflow-y:scroll;
}
Now on page load, add an onload function to the body (note that the Content div lacks any classes):
<body onload="checkHeight()">
<div id="Content">
<!--Your content goes here-->
</div>
Now the JavaScript / jQuery:
function checkHeight() {
var scr = screen.availHeight;
var contentHeight = 600; //or whatever number you choose)
if (contentHeight > scr) {
$("#Content").addClass("contentoverflow");
}
}
Does anyone know why the following code isn't working:
The image remains towards the left of the screen.
HTML:
<div class"footerimg">
<img src="./img/logo2.png" width="100px;" height="100px;">
</div>
CSS:
.footerimg {
float:right;
}
Additional Info:
This div is inside another div called footer, but that shouldn't affect anything should it?
The CSS file IS linked to the page, I have started the style the footer.
error :
<div class"footerimg">
should be
<div class = "footerimg">
__^^^^__missing equal sign
try this:
footerimg>img{float:right;}
and add this in your html code:
class="footerimg"
you forgot the '='
I have div box which contains two items. One is under the other one. So when the lower item is hover I'd make it animated and slide it out of the top item.
<div id="main">
<div id="box"></div>
<div id="item"></div>
</div>
With my knowledge in CSS3 I could only make a transition for item to slide it out in hover. But I want it happen when #main is hover not #item.
Have a look at the them please.
http://jsfiddle.net/sL3Pw/
You are correct, there is no way currently to style a parent element of a child in pure CSS. You can use JavaScript as a way to achieve the desired effect.
(UPDATE)
You can achieve this in JavaScript by doing the following (DEMO: Fiddle)
JS
This should run onload or else it will not work.
// On Hover
document.getElementById('main').onmouseover = function () {
document.getElementById('item').classList.add("to-left"); // Add To Left Class
}
// OnMouseOut (Not Hover)
document.getElementById('main').onmouseout = function () {
document.getElementById('item').classList.remove("to-left"); // Remove To Left Class
}
Please remember to change the IDs of the elements if needed.
CSS
Add this CSS class to your CSS
.to-left {
margin-left: 60px;
}
And your HTML stays the same. This should get what I believe your desired result is. Let me know if this works for you.
I got a problem like this (this is html/css menu):
Eshop | Another eshop | Another eshop
Client wants it work like this:
User comes to website, clicks on Eshop. Eshop changes to red color with red box outline. User decides to visit Another eshop, so Eshop will go back to normaln color without red box outline, and another eshop will do the red outline trick again..
I know there is A:visited but I don't want all visited menu links to be red with red box outline.
Thx for any help :)
The same that Joe Skora has written but more specific:
.red {
outline-color:red;
outline-width:10px;
}
Now you could use Javascript (in this example using jQuery) in the click-event-handler:
$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item
Another way of doing it is the use of the pseudo selector :target.
For informations about it: www.thinkvitamin.com
You can do this with plain CSS and HTML. A method we commonly use is to have a matching ID and class selector for each navigation item.
The benefit to this is that you don't have to modify your menu code per page, you modify the page itself, which you'll already be doing unless everything is fully dynamic.
It works like this:
<!-- ... head, etc ... -->
<body>
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
Then you set up some CSS like this:
#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }
To change the "current" menu item, you can just assign the corresponding ID to an element higher in the document's structure. Typically I add it to the <body> tag.
To highlight the "Art" page, all you have to do is this:
<!-- The "Art" item will stand out. -->
<body id="NAV-ART">
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
You can do this with CSS classes. For example, a selected class could identify the current shop, changing the color and outline. Then you can change the selection by adding/removing the class from the menu item.
Take a look here, it walks through a tutorial on building CSS menus.
Basically, it can't be done with CSS alone, some scripting would have to take place (server or client side, preferably server). As the others have suggested, add a 'selected' class (or something similar) to the active link, and define the styles for it in CSS.
For example, the links:
Eshop | Another eshop | Another eshop
The styles:
.selected {
font-weight:bold;
color:#efefef;
}
The links would be generated dynamically, using PHP for example:
<?php
foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
echo '<a href="' . $url . '"'
. ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null)
. '>' . $title . '</a>';
}
If you are moving to a new page in the same browser window, Zack Mulgrew and Bobby Jack both have excellent answers.
If you are opening the eshop link in a new window, there is not much you can do with css alone, and gs has a reasonable answer except for the choice of class name of (red).
Which is it?
As far as I know you can do this only by generating different code for every page (setting a different class for the current page) or by using JavaScript to change the menu after the page is loaded.
you could use and attribute selector like this...
a[href^="http:\\www.EShop"]:visted { color: red; }
By doing that you are saying any link that has a href that starts with http:\Eshop.com and has been visted apply this style.
It depends on how your pages are constructed, but the classic CSS was of doing this is with an id on the body, as well as each navigational link, so you might have something like:
eshop.html
<body id="eshop">
<ul>
<li>Eshop</li>
<li>Another eshop</li>
<li>Another eshop</li>
</ul>
</body>
and corresponding CSS:
#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
color: red;
outline: 1px solid red;
}
the navigation is consistent; only the id on the body changes from page to page.