I can't find a good way to word this so it's been hard finding this on the internet I'm sorry, but I'm trying to make the main browser scrollbar act on a certain div object only.
Here is a link:
http://gigadra.in/
It would make the middle content scroll down as I plan to have the max height set to the browser window height.
Does anyone know what property I could use to start working on this?
Thanks for looking.
Have a look at using position: fixed; in CSS. You can make the sidebars and footer fixed.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Related
Not sure if this is the appropriate place to ask this, if not, where? It is a code question, but the code is on a website and hard to paste here.
I'm looking at M&S's mobile site, and their slide in menu system to be specific. If you go to http://www.marksandspencer.com in Chrome, open the dev tools and use the device toolbar, it should display as if on a mobile device.
The menu is series of div's inside a nav. The div's are position: absolute;, but somehow the content doesn't get cut off at the bottom, the page expands to the height of the menu, even when it's way past the bottom of the footer.
Obviously positioning an element absolutely takes it out of the normal flow, and so would be cut off at the bottom of the footer.
Can anyone see how they've managed to achieve this..? That is, having their absolutely positioned div's not cut off. I can't see any manual setting of a height property anywhere.
Update
To see the effect, go to the home page, set the viewport width to about 500px, then open the menu, clicking on 'Men' then 'Clothing'. This leads to the menu being higher than the content of the page.
Looking at the div with classes mcp-nav-primary__submenu-container is-active you can see it's position: absolute;.
I'm not asking for someone to write code for me.
I'm asking if anyone can see how M&S have achieved this effect..?
You learn something new every day. Apparently nothing has to be done to achieve this. The window expands by itself. Note however that the height of the body and html does not expand. And if you set overflow: hidden on the body it is cut off as you expected.
See this fiddle: https://jsfiddle.net/uhqtk13a/
How would you make an element go from position:absolute; to position:fixed; when parent is flexbox ?
Let me explain further: I have a very basic layout 100% flexbox based. The layout is just a left sidebar and a content area. In the content area lives a header which starts at 400px from the top and is absolutely positioned (in order to cover a hero section), the desired UX is to make this header sticky after it touches the top of the screen.
Here is a pen for illustration.
Now, I have the mechanism to programatically switch the header from absolute to fixed at a given scroll position, this is not a problem.
The problem is, when fixed:
1. the header covers the scrollbar to the right (real issue)
2. left side of the header has to be known in order to set the left: property (minor issue: I can live with it as my sidebar has a fixed width I can copy from).
I heard about a position:sticky which does the trick, but it seems not that reliable as not really well supported so far.
Of course I cannot know size of the scrollbars as it depends on each navigators... otherwise I would just do right:17px; or something like that. ;)
EDIT
The culprit of the "bug" forcing the header to overlap the scrollbar is the overflow:auto set on #content.
However, as the layout is flexbox based, I don't see how to avoid use of this approach as the sidebar is sticky by definition using basic flexbox. So an underlying question would be: How to stick an element within flexbox, USING FLEXBOX ? The position:fixed is clearly not compatible as it breaks the flow... Also, the obvious step would be to avoid flexbox and redesign the whole layout using classical positioning, but this is out of the purpose: the layout has to be compatible with react-native which ignores classic CSS positioning (uses flexbox only)... See here. (of course, react-native has another way to handle scrolling, hence the problem in web environments).
In order to proceed with my design, I had to make a decision and I went using position:absolute only, but adjusting my top property programatically (using react but could be implemented with Jquery or whatever technology able to know the current scroll position).
In pseudo-code, it would like :
//when scroll reaches 400px
if getScrollTopPostion() > 400
//recalculate top position of given element to equal current Scroll position.
//This gives the effect that the element is sticky. In reality it is just live recalculated...
//Quid of performances?? no idea
then setTop( getScrollTopPostion() )
//otherwise, let the element absolutely positioned at 400
else 400
Obviously, this does NOT answer the initial question.
The "official" answer would be to use position:sticky, but until it gets really spread across say 95% of browsers (particularly mobile ones...), I would say the proper answer is still to be found.
For fixing the 1st issue, try this:
#main #content #header {
position: fixed;
...
}
Remove the overflow: auto; property from #content. And also add align-items:stretch to #sideBar.
I'm trying to make my site responsive and I'm having trouble creating containers divs where their height responds to the content within them. I've tried setting height to 100% but it's not working for.
Most of the content blocks are flowing below each other as I resize my browser but the containers aren't expanding to fit around them.
HomePage
Does anyone know do I have anything fundamentaly wrong in how the page is built that is preventing me from acheiving this?
Cheers.
You need to clear your floats. One example is .mission-statement. When you have multiple divs floating inside a div, the container collapses on itself. In your case, it's only partially collapsing because you have a min-height set.
You do this easily by doing something like this:
.mission-statement:after {
clear: both;
display: table;
content: '';
}
To affect all divs you can change .mission-statement:after to div:after
Images will automatically have a height of 100% of the image relative to the width and the percent tag is percent of the browser window. What you may want is a width tag that might be max-width=*px and let the height be determined by the image itself.
Instead of letting me write you an answer I will refer to a really good thread about this. The solution anyway is something called clearfix.
css - What is clearfix?
I have a table that has a fixed height and width.
I have mentioned height as 200px and width as 100%(inside another div of 600Px width)
now I am adding a new column at run time so the width needs to be increased so I thought to put a scroll bar.
I am doing the following to achieve this
$('.showDateTime').show();
$('.showDateTime').css("width", "300px");
$('#TransactionErrorsTableData').css("overflow-x", "scroll");
The issue is that the horizontal scroll bar comes but is disabled.
Where as the vertical scroll bar is working fine.
I have set overflow as auto for my div "TransactionErrorsTableData"
Any idea on how to enable the horizontal scroll bar?
P.S. I m kind of stuck up so please pardon if the question is not clear, please comment if any details are required.
I cannot accurately get your exact problem seeing you only posted a snippet, and didn't post any examples, but I'll give it a go.
If you use the CSS rules overflow-x: scroll or overflow-y: scroll, it forces most browsers to make the scroll-bars appear, this is by design, so that if the content enlarges, the content outside of the container will not be forced to move around.
The scroll-bar is not disabled, it is just inactive due to it not having enough content to actually be able to scroll, I am guessing this is because you have set .showDateTime's width to a specific amount, which is inside of the TransactionErrorsTableData div.
I hope this helps!
NOTE :
This answer all assumed due to not enough details given.
Try it, but would be better an jsfiddler:
$('#TransactionErrorsTableData').css("overflow-x", "auto");
I asked for help earlier which was amazing and I am grateful for it, but I'm in need of your guys' expert assistance.
http://www.mrandmrsmagic.com is the site I'm working on and after simplifying the code and not having the positioning be an absolute, the menu bar for some odd reason isn't scaling with the site. Also the testimonials tab is cut off, which I'm guessing is due to the width not being long enough?
Also, on smaller monitors (15 inches+), they're saying that the video gallery and photo gallery are off to the right three inches, is there a way I can add padding or a margin to make them stick to the middle like they do with a larger screen? Any and all help would be appreciated.
Ok...
Your Gallery is in a div that has been given a specified position.
e.g
#gallery {
position: relative;
left: 950px; /* This needs to be removed */
top: -560px; /* This needs to be removed */
}
That will always force the div off to the side.
What I think you want and correct me if I'm wrong is two columns.
That's actually quite easy to do and I've set up an example here to get you going.
In my example the two columns are floated left and right to give them space in the middle and the two divs with the class .placeholder provide the hight and width.
If you create something similar replacing each .placeholder with your image and gallery respectively then you should be able to keep videos within the main content.
Hopefully this helps.
Edit
I'll try my best to explain everything properly.
The content div in the example I linked was just there to wrap around the floated columns in that example. You do not need to duplicate it.
The columns are floated left and right to separate the content and place it side-by-side. Adding a float simply means that they are to position themselves as far in the given direction as possible within their parent container.
Floating content breaks the flow of the page though so the parent needs to have the class .clearfix added to prevent any content below the column from being disrupted. It also allows the parent to have height.
Positioning the gallery differently for different monitor widths will only work with browsers that understand media blocks within css which ie7 and ie8 do not. You are much, much better off with a two column layout.