I'm getting the hang of Bootstrap's affix but I have some difficulty because I am trying to use it to use position: fixed on a .row.
More precisely, what I am trying to do:
have a sum/total line always visible at the bottom of a scrolling list;
once you get to the bottom of the list, the sum/total line scrolls up to let the user see the content below (in my case, only the footer common across the rest of the site).
Here is a quick case that tries to reproduce my situation: https://jsfiddle.net/cyChop/wf8smye9/
As you'll see, the affix line displays well when you get to the bottom (.affix-bottom) but does not take the proper positions when in position: fixed (.affix-top and .affix).
I feel like I'm close and need only some light tinkering with the classes and CSS but I'm having difficulties finding out the clean and general solution.
You have to apply width of .affix like 100% or something.
Because when you set position:fixed then you have to apply width of that div.
JSFiddle link: https://jsfiddle.net/wf8smye9/3/
Related
I'm using Angular JS sticky directive to stick the header of a table to the top of the page when scrolling. The table is located in a bootstrap container with a fixed width and when the Angular script activates it shows the whole header and thus overlapping the container in which it is located (if I have enough columns in the table that is).
When I have more columns than what can fit in the container, I get an horizontal scrollbar but this doesn't apply to the sticky header.
Anyone who might know how to fix this? I can't show you any live examples as I don't know how to add Angular directives in fiddle (or any other online compiler).
Here are two screenshots.
This one shows how the container prevents some columns to be shown as the table is wider than the container itself: http://imgur.com/Cj7UBak
This one shows how the sticky header has overlapped the container: http://imgur.com/KkGkOMy
it should not overlap
I'm sorry that I can't give a working demo of it but I simply don't know how to include the Angular JS Directive and without it, a demo would be useless.
EDIT
The problem, I found out, is that the sticky directive sets the position to fixed, which fixes the position to the browser, not to any parent. I don't know how to solve it still but maybe that explains the problem better for everyone.
As I discovered more about the problem I realized that I should rephrase the question. I'm therefore closing this question and refer to this one instead:
Position fixed within container element instead of the browser / viewport
I tried to follow this tutorial to create an affix for my site, but there are a few things that are off and I'm having trouble figuring out why.
When scrolling, the width of the ul changes slightly, from 165-166px
After scrolling down, the affix doesn't stay at the top but remains fixed near the bottom of the page
The research li sometimes doesn't get highlighted at all
Here's my code: JSBin
What am I doing wrong?
From the bootstrap docs:
The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.
That should fix your issues with 1 and 2. With issue number 3, if you scroll too fast it will skip it because it is so close to the next anchor when compared with the height of the page. You could increase the spacing or add more content.
Basically, I'm trying to make my first website, ever, and I'm having trouble already.
I'm making the navigation bar and it's all looking good, but as soon as I put my browser into windowed mode, the navigation bar extends beyond what it was, so I have to scroll sideways to reach the end of it.
P.S.
I'm new to stackoverflow, still trying to figure it out.
So I might do something I'm not supposed to, just let me know and I'll try to fix it.
Edit 1:
I'm using Google Chrome.
Here is the JSFiddle with full code:
http://goo.gl/Z5wvTn
If you look at the header and footer, you should be able to see that the main section and navigation bar is actually wider than them.
The navigation bar and main section are within a div, while the other elements arent.
This effect is on a much larger scale without JSFiddle.
You want to create something like this: JSFiddle
If yes, then use % or emin place of pixels
Place the header and footer in the wrapper div and then decrease or adjust the width of the .wrapper div in your css.
jsFiddle
Based on what #Aayushi Jain and #Shivam said use wrapper with percentage. That way, your wrapper will respond according to the window screen.
Look up responsive design if you want to know more about it.
My version would be to add width:100% on your wrapper instead of defining fixed width.
Also, practice on using ems and % like #Aayushi Jain said.
.wrapper {
width: 100%;
}
I am trying to develop a personal version of this working template that use CSS3: http://www.html.it/articoli/1688/template/photoshop-xhtml-css.html
And this is my version of the previous template: http://onofri.org/example/WebTemplate/
As you can see the two templates are very very similar in the structure and in the css settings (I have recreated it in Photoshop and the I have use the same HTML\CSS structure using CSS3 for the shadow and doing some litle change)
As you can see I have some problem with the left sidebar because the last blue box (the #c div) does not extend vertically to the end of the #container div and so don't match with the footer background immage.
The strange thing is that this problems disappear and appears changing the browser magnification with CTRL + and CTRL -
The only "solution" that I have found (but this is not a correct solution) is to increase the value of the min-height* property of the **#c div of my sidebare. For example if I increase this value from the original 234px to 334px it seems to work well.
But this is not a real solution because if the amount of content change of the page change this problem occurs again.
It seems to me quite strange because the structure is almost the same of the original layout.
What is the difference that causes this problem?
How can I solve? What can I do to extend the height of the #c div until the end of its container
try setting the width to 100%.
Also, use padding on the body, set the nav lower (margin-top), your cerca search picture is not working, check the file path and float your footer to the right.
I'm new to doing layouts with CSS (I haven't done any web design for a long long time) and I can't seem to figure out how to get the footer of the page to display at the bottom the way I want.
Requirements:
-Display at bottom of content if content exceeds vertical size of viewport
-Display at bottom of viewport if viewport exceeds vertical size of content.
The code that I am using sets the footer at the bottom of the viewport, but if I size the browser to be shorter than the content, it just covers the content.
Code:
<div style="background-image:url(footer_bg.jpg); background-position:bottom; background-repeat:repeat-x; height:235px; width:100%; bottom:0px; position:absolute;"></div>
My main goal is to have a footer with text (ie. company info, contact info) and a background gradient. I'd like the footer background to span the width of the page, but I don't know if I can do that with the 960 gs divs.
EDIT: I'd like to do this with all CSS, no scripts if possible.
I found some good code to get a CSS footer at this link:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The main problem I'm experiencing right now in implementing that with 960gs is the float:left; in the 960gs CSS. It seems that it's preventing my grids from vertically expanding the parent <div>. However, if I remove the float, 960gs seems to not work as well.
The following is the link with the float removed. The 'a' column is a grid_7 suffix_1 and the 'b' column should be grid_4 in the same container_12. In other words, they should be right next to each other.
Have a look at CSS Sticky Footer. It is done in pure html/css with no scripting at all. There is an explanation of how to get it to work with 960gs at signalkraft.com.
Hope this helps.
In CSS, there is no "if/else" ability. This is where scripting languages come in.
Look up JQuery. In JQuery, you can grab an element with the #id footer and say something like:
$('#footer').addClass('bottomView');
'bottomView' could make it so that element with the id footer sticks to the bottom of the viewport. Then, when the user scrolls, which JQuery can monitor, it can check to see if it wants to change the class to 'bottomContent'.
Then in your css, just have classes bottomView and bottomContent that place the element where you want.
Good luck.