From the website of bootstrap 4, it stated that in order to use Scrollspy, there are a few requirements. One of the requirement is
"Scrollspy requires position: relative on the element you’re spying on, usually the ."
However, it seems that Scrollspy works fine without body {position:relative} in the case of is the element being spied
Using a Scrollspy example from w3school w3schoolScrollspyexample
Even if i delete body {position:relative} from style and hit the run button, the Scrollspy function still works.
Here is the w3schools example without body{position:relative}
w3schoolScrollspyexampledelposition:relative
it work just fine
Can anyone please explain to me why the above example works even without body {position:relative}?
Body tag doesn't require position:relative to work, as it already covers the entire view port. In fact, defaults to position:static, much like any other element, and defaults to position:relative, which does all the work.
The <body> tag doesn't need any position:relative to work, it is just needed mandatorily in elements other than tag, and this is mentioned in W3Schools documentation for BootStrap4 scrollspy.
Have a look at it here: https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp
Related
I have a long tree element (mat-tree angular) in a <div> tag of fixed height with scroll. How can I change elements that are hidden outside the <div> (display: none)? Accordingly, when scrolling, the style should change
Well your answer is quite vague... But if you like to style elements based on their screen location you will have no luck with css and would have to calculate the position of the element and the current screen via java-script and do some javascript manipulations on the found objects...
that said:
don't do this.
First question:
1.) What is the problem?
2.) What do you want to achieve?
As #Vivek Vikranth also commented there are some well established things out there that COULD help... but your idea is to unclear yet.
Depending on your needs and supported browsers, you might have to use IntersectionObserver OR scroll event subscription / interval polling + document.elementFromPoint(). See:
https://caniuse.com/#search=intersectionobserver
https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API
I'm working on a project using the Vue.js 2.0 framework and a bit of Bootstrap 3. This project has required me to work more on the front-end than I am normally used to so I was wondering if anyone here could give me some useful insight into a few CSS issues I appear to be having.
The Project can be found here: http://rgmotorhomehire.com/project
If you give the source a quick inspection, you will probably notice that the body element is only the height of the navbar, and that the container div's for my various 'Pages' are actually totally outside of the parent body element.
The main thing I'd like to know is:
How I can force the Body to 100% height via CSS, so that it wraps it's child elements properly, and I can then add a Footer to the HTML.
Please note that I have already tried:
html,
body {
margin: 0;
height: 100%;
}
However, if you try this for yourself in the inspector, you will notice this then introduces a new issue of the HTML element now having an empty space below it.
This whole scenario has left me more than a little lost and confused. Hoping someone out there can inform me on whats causing my issues.
Note: I'd like to apologise in advance for any pointless info this post contains (including this note), I've had complaints in the past about my questions not being direct enough but I've tried my best to be as clear and concise as possible, Thank you.
UPDATE: Literally straight after this post, I discovered the solution is to use clearfix on my wrapper divs as they had a 0 height bug. This post can probably be closed now. I found this solution here: http://www.jqui.net/tips-tricks/css-clearfix/
clearfix is a bootstrap class. It clear out all float property. that is right or left.
If you have a div of calling float left property.
for the class pull-right have the property float right. So for the next div we want to clear all the floating property that called before, so we call clearfix it clear all the floating property. so that it works fine.
I'm currently working on the following site:
http://strauss.co.at/sup/
I'd like to use bootstrap's scrollspy to keep track of the current menu item. i added the data-spy="scroll" and data-target="#navbar" to the body tag. #navbar is the container of the bootstrap nav component (this is what I found is in lots of different articles here on stackoverflow and other sites). still it does not work. what am I missing here?
Additionally, I'm using the affix plugin to make the menu sit on the top of the page after a specific offset. I can see a little jumping there. Is there any way to smooth this? should I do it with css 3 transitions or is it more of a content-element-that-gets-pulled-out-of-the-flow problem?
thanks
You're really close! You just have to change the href on the anchor elements to the id of the element you want to link the scrollspy to.
For example, where you have:
SUP in der Physiotherapie
You should have:
SUP in der Physiotherapie
Note that simply changing this with inspect element won't work, whereas Bootstrap uses javascript when the DOM first loads to initiate the scrollspy.
Thank's so much!
I just noticed that TYPO3 automatically added the path to the links. I didn't have it in my template.
I figured out that I can also solve this by adding the data-target="#id attribute to the link.
I'm playing with the isotope js library and I've got the general concept working. My issue occurs when I put normal html/css such as inputs & charts in the isotope div it's not behaving as I expected. This html works as expected outside the isotope div.
When an isotope div is clicked I'm expanding it and showing details for that item, including inputs, charts etc.
My Goal:
Make the table containing the inputs visible in jsfiddle.
Understand why this was happening so I can put whatever content I like in here for the future.
JsFiddle showing answer
Code:
Css that was causing the issue. By adding the asterisk this says applyt he style to all child elements. Hence the reason that my table wasn't showing was that the table, rows, cells, elements were all absolutely positioned.
.containerDiv * {
margin: 0px;
position: absolute;
}
The solution css (apply relative position to the table elements):
#chartFilters * {
position: relative;
}
I've done a quick brush up on CSS and solved my problem - see question for updated fiddle. Was a very simple one in the end, it probably looked hard due to my question hence why there were no answers from the community within the last 24 hours.
I hope my steps help someone else who's new to solving these types of issues, browsers have some great tools built in these days for trouble shooting.
Steps I used for solving:
1.) The first useful step I found was to inspect the element with internet explorer via right click on the page. Then use the right click option in the source it shows to copy element with styles. This gave me a smaller version of the html for testing which I saved into a standalone html.
2.) I started pulling out html elements that appeared unrelated and making the sample simpler. Once I pulled something out I'd refresh the html in IE and check what happened.
3.) When I had a simple html I saw the absolute positioning and the asterisk, I then did a quick google to find this stack question explaining what the asterisk does.
4.) I need to leave the absolute styling in so that isotope works, but I can specify relative positioning inside the isotope, I've done this by using the asterisk myself now I know what it does! :)
#chartFilters * {
position: relative;
}
I've made this html box, that is supposed to have a title and some buttons on right,
http://jsfiddle.net/vqpmt/17/
Everything seems fine except that the edit button as you can see is a little bit below the title, that shouldn't be the case they should both be at the same exact level.
How do I achieve that, and is my code a mess? Is there a better way of doing something like this?
I moved h1 and the edit link tag inside a div container. Check my version of your code here
To be on the exact same level, the html elements has to be either inside a container (as in my fiddle) or should use 2 inline html elements.
Try reading w3schools on html and css which has lot of information that you can learn in short time.
w3schools HTML reference here
w3schools CSS reference here
Edit: h1 is a block element which means it will add a new line. So I added a new css style .inline and changed the block property to inline.
.inline { display: inline }
Your H1 element extends the width of the page and is pushing your edit link down. I've provided an alternative solution here.
Fiddle: http://jsfiddle.net/GvGoldmedal/vqpmt/32/