So I have the following problem with my website:
Let's say I have 5 posts, post A, B, C, D and E, and that every post has a width of about 80 vh.
Now, let's say I scroll down so that post C is visible on my website, and, while I am still on post C, posts A and B get removed from the DOM. Now, what happens is, since posts A and B are no longer there, posts C, D and E move up to fill the empty space left by the deletion of posts A and B, while my screen stays in place, and now after this behavior post E is displayed on my screen.
This is not what I want. I want to make it so that after removing posts A and B, maybe the viewport reduces its height from the top down or something similar, and my screen remains on post C.
Is there any way to force this behavior using some React magic or by editing the CSS?
Not really,
when the elements are removed from the DOM, it pushes the posts up as your elements probably have position: relative. you can use position: absolute to keep them in specific location, but that will not remove the empty new space created after removing the elements. and doesn't seem to be a good option.
What i can suggest as having some kind of a div that takes let's say 80vh and inside this div all the posts with some kind of overflow scroll. and then you are not scrolling the page but the div.
Related
I've been searching and trying out some code to make my dropdown menu same size for each link, like nelly.se, but I can't figure that out. I was tried this code:
.nav-dropdown{position:fixed; left:0; right:0;}
but can't make it work at all.
The website I am working on is: http://94.247.169.169/~welloteket/
position: fixed will really fix it in relation to the window, which means it can't be scrolled at all - that won't work.
Usually for dropdowns you use position: absolute and adjust the left and top settings as needed. There are at least two important additional things:
1.) it has to be a direct child element of the element in relation to which you want it to fix. In the example you linked to that would be the black navigation bar, probably a ul element in there.
2.) That parent container has to have position: relative.
The kind of "mega dropdown" (i.e. equal size and position for each dropdown regardless of its related main menu entry) is trickier than a regular dropdown (i.e. one than opens directly under / next to its main menu entry). You propably need Javascript for this.
Apart from those general guidelines we can only help you if you post detailed code - HTML, CSS and JS, if there is any.
We are trying to create a menu style layout. I'm using a css-columns properties to achieve the effect of columns. The content is variable, so we'd like to stick to this solution because we want the browser to organise the content for best fit.
In the example below we are seeing some odd behaviour in Chrome (Version 32.0.1700.77) and some different (but equally odd) issue in Firefox (Version 24.0) so I'm assuming it's our implementation.
In Chrome, we see a large gap underneath the first column as if it's placing the 3rd LI there to start off with, then moving it to the top of the second column at some point in the render process.
In Firefox, we see the H3 "scrambled egg" being left at the bottom of the first column, when the rest of the 3rd LI's content moved to the top of the second column.
Live Example: http://codepen.io/daviddarnes/pen/BeEIp
Speculations:
- We are using "break-inside: avoid;" on every element inside the OL. This could be causing the issue, but we can't seem to rectify it.
- Based on the H3 issue... might be something to do with that? Or the elements near to this H3 tag.
The point of the page-break properties is not to shrink content to fit on a page, but to help decide the optimal place for a page break to occur.
So, if you use 'page-break-inside:avoid' on an element, and there's not enough space on the current page to fit the entire element, the browser will consider inserting a break so as to force the element onto a new page, theoretically giving it more space.
However, if the element is so big that moving it onto a new page won't help, then there's nothing to be done (in terms of page breaks at least).
If you know in advance that your content will need to be shrunk when printing, you could try adding a scale transform on the problem elements (restricted to the print media type), so that they're a more manageable size.
Is this of any help to you?
I have tried everything within my repetoire to fix this. I fall on my knees with open hands!
You can view a draft of the page here:
www.barrettcv.com/draft_so.html
If you would like the gist of how the page should work, simply view it in Firefox (with browser window smaller than 992 and scroll down. The side panels start off attached, and then 'fix' to become static while the rest of the content moves. This is the correct behaviour
Main problem.
The problem arises in Chrome. When the menu column and the details column 'fix,' (scroll down the page a little) all digital hell breaks loose.
Secondary problem.
When the view window is about 1200px, the space between the menu column and the main content panel doubles up. This isn't as big a deal as the first problem (which has had me attempting to destroy my flat's retaining wall with my forehead) - but it's got me relatively flumoxed, as I'm sure there must be a more elegant solution that forcing it back into position with media queries
It looks like you are coming up against an issue in how the different browsers calculate the position of fixed position elements when no positional CSS properties are defined for the element e.g. top and left. From the spec:
...user agents are free to make a guess at its probable position.
For the purposes of calculating the static position, the containing
block of fixed positioned elements is the initial containing block
instead of the viewport...
I think the only way around this is to choose a different positioning scheme. You can remove the .col-md-pull-* and .col-md-push-* classes and reposition the Bootstrap columns by using absolute positioning (depending on media queries to arrange those columns how you want for different viewport sizes). In this case it appears all browsers honour the position of the fixed element.
.row {
position: relative;
}
/* apply to the details column */
.push-9 {
position: absolute;
left: 75%;
}
Example: http://bootply.com/92096
What you need to do is to fix both left and right column, starting from that you will have a much better way of controlling your divs (since you want them fixed as I can see).
So, sumarizing: you need to add position:fixed to both your left and right columns. Modify your left: x% and right: x% so that they match your criteria.
I have this jsFiddle: http://jsfiddle.net/pqCGd/.
It contains a large messages div that contains message divs. These message divs are automatically generated, but for the sake of this example and simplicity I left out the auto-generation of such divs and provided one example of a message div.
Inside the message div there are 4 div children:
dir which contains an image: I am currently using a test image for this
a which contains 3 sets of data, the top p tag contains a rather long string, so it is smaller than the rest of the other p tags
b which contains yet another 3 sets of data, where this time the last p tag is rather lengthy and requires a smaller font size
c which just contains a button called view
Problem:
If you look at a, b or c, you might notice that the divs seem to "fall" for lack of other words. The y-position of the div seems to be off for each element with the exception of the dir div. They are meant to be side-by-side with the same y-position. If you are having problems seeing this affect, you can use Google Chromes "inspect element" tool and find where these tags are. Hovering over them in the element inspector should show a blue box that displays the encapsulation size and position of the div. You should see that a is lower than dir, b is lower than a, c is lower than b. The button should also appear in between the div boundary (partially shown).
What I want:
I need to get the divs: a, b and c's y-position to be the same as dir's y-position. Preferably with CSS.
Please note: Google Chrome is my test target. So do not worry about IE or any other browser for that matter.
Here's an example with {vertical-align: top} applied to .a, .b, and .c. Maybe that's what you're after.
http://jsfiddle.net/isherwood/pqCGd/1/
Hope I understand it right. You can add float: left; to div.message div . so they will sit side by side to each other.
check this fiddle
If you need to change it after the page is loaded you can change it in jQuery using this code
var offset = $(".dir").offset();
$(".a").offset({ top: offset.top});
$(".b").offset({ top: offset.top});
$(".c").offset({ top: offset.top});
Here is the result
http://jsfiddle.net/ekvU9/1/
Note that .offset() get the positions related to the document so you are quite sure that the offset will be right in all browsers.
So I have a case of client-itus here. The client is whining and my boss is demanding that I add a logo underneath the Archives tab over the banner ad seen, which would break through the structure I've set up. We're two days from launch and I have a choice of either taking precious time away from other work to restructure the layout, or find a way to position that logo without having to futz with the divs. I understand HTML and basic CSS, so I thought I'd see if I could find a better solution before going about this the hard way. Thank you for all your help! The current page can be seen at ctdailydose.com/new
(Just for clarity, what I want to do is add big circular logo on the right that says "Scolari Engineering" without having to rewrite the CSS and change the header's entire structure.)
Just add your image (logo) at the end of the end of the achor in your menu-banner div and position:absolute right:0px top:0px for it in your css. Adjust the position as needed.