I need to have a image in a fixed position on my page. It should preferably stay visible all the time for the user. In the image below is a example of my page. On the top is the header and in the bottom the footer, and to the left is a table with data that can contain a large amount of data that would make the table very large in height. I would therefore like the image to stay in a fixed place even if I scroll the page to see the data in the left table. But the image must not go below the table (not over the footer), and not over the table (not in the header).
Hope this make sense :). I have tried the bootstrap positions https://getbootstrap.com/docs/4.0/utilities/position/ but they don't work as I need here. Can someone please help out?
Related
I'm trying to layout my small React project.
Here's the link to codesandbox: https://codesandbox.io/s/szkola-reacta-44-kalkulator-wydatkow-rvh5t?file=/src/styles.css
What I want to achieve is login page, which will (after login) show expenses and incomes. I want to content below header to occupy the whole remaining space, but the whole page shouldn't be scrollable. I've tried two approaches:
Firstly I've set width of 100vh to an App component, then I've set .main to 100%, to occupy the rest of remaining space after setting up the header. I've found out that it'll set 100vh as well, so it'll be scrollable and I don't want it to be.
Secondly I've made a header fixed, but then my whole form isn't centered, because header isn't in the document flow.
I prefere to find solution for the first approach, in the second one I know I can calc it somehow (but I need guidance), however the first one looks more straightforward for me, but I'm missing something.
In general, no matter how, but I want to have a header, which will be always in the same place, a dynamically changing content which will occupy remaining space and the whole app should occupy 100vh to prevent from scrolling.
For the project I have the following Layout:
The content of the page should use the entire space on the screen since the table will be very big. I think a responsive layout is the right for that.
The header contains two Logos which float to the left and a Login block floating to the right side.
In the content area the Navigation box will be always on the left side. Next to it is the table. In the table rows and columns can be added, that is why the table can get very big and should use all the available space. At some point a horizontal slider makes it possible to scroll the table left and right.
Under the content the fototer contains four boxes with additional Information.
What is the best grid solution to realize this kind of Web application?
What are the minimum requirements to make a table have a fixed header for vertical scrolling and a scrolling header for horizontal scrolling?
I am trying to accomplish the following with a basic HTML/CSS table:
The table that contains dynamically generated content so the cells should be the size they need to be to fit the content (not fixed width cells).
The table, should be whatever size it needs to be to accommodate the cells. The table will be wider than its container, and most likely, the screen. It should not overflow its container, but be scrollable horizontally.
The table will be inside a container that has absolute position, 0,0,0,0, to make it the size of it's parent container (which is position:relative).
When there is too much content to fit horizontally, a horizontal scroll-bar should appear that scrolls the table left-right with it's header.
When there are too many rows, a scroll bar should appear vertically, but when scrolling, the header row should not scroll vertically, it should stay visible.
There are a few Jquery plugins that add a huge feature set to tables, including this type of scrolling. Unfortunately, I don't want/need a complete table-to-grid plugin, I just need to understand the essential css rules that are required to achieve a fixed header for vertical scrolling and a scrolling header for horizontal scrolling.
Here's an example from a plugin demo page: http://www.tablefixedheader.com/fullpagedemo/. The scrolling here works the way I want, but it seems to use fixed widths and I don't know if that's required, or if javascript is calculating those widths, etc.
Specifically, what I'm looking for is someone that can explain the necessary (and only the necessary) markup and css rules that are needed to make a plain old table scroll in the way described above. I want to understand how and why the rules work.
An ideal answer would be a few lines of HTML showing which things have to be wrapped in divs, etc and a few lines of CSS showing only the critical rules that make it work, followed by an explanation of what those critical rules are doing to make it possible.
I have been trying to get the functionality working for 3 days now, and can Only get certain parts working, but not all at the same time.
In all essence, it is not the table that will be doing the scrolling, it will be the div that is holding the table that will be doing the scrolling. Let's take a look at some example code:
<div style="height:200px; overflow-y: scroll;">
<table>
....
</table>
</div>
Once the table reaches a limit where there is too much data to be held in a 200px range div, it will automatically start the scroll bar with the element overflow-y. Now, to obtain a scroll bar that will be used for horizontal and vertical scrolling, you switch from overflow-y: scroll to overflow: scroll;. I have referenced this from the following stack question.
For the last part, creating a fixed header, we can reference the following JsFiddle:
DEMO
This is again, referenced from a different stack question. The key part to this is using two tables to represent one big table. This is placing the first table on top of the second table and then enabling table-layout: fixed to keep everything together.
The real problem arises when you try to get your table to horizontally scroll, that may need JQuery or some JS derivative, so here is a good stack question to point you in the right direction.
The last thing I want to cover is the optimizing differences between tables and divs/uls/lis (we can call it a DUL to keep it short). To get a better idea of what exactly I mean, take a look at this final stack question. This may or may not pertain to you, it's honestly dependent upon how comfortable you are with changing your layout and then also whether or not you feel the need to try and optimize results. You may not need it at all, but again, something to consider.
the layout of my html page has a fixed div on top of the page. the content div then has a margin-top to compensate for the fixed div.
However, when the content gets scrolled down, if I do a search on page, the browser would sometimes show matches that would be underneath the fixed div, i.e. invisible.
For example, go to http://mincovlaw.com/services/worldwide_enforcement_checkup, scroll down a little bit, and do several searches for "know". You will see that the one closer to the top of the page will be found but will be hidden underneath the fixed div.
Is there a better way to achieve the same looks, while retaining the functionality of a search that does not get hidden?
Simple answer: no, because that's exactly what you're doing: hiding content. Think of it as if content ceased to exist, that's exactly what you're doing and what you're looking for. Anyway, I doubt many people will search in the page, it's not THAT common
EDIT*the issue apparently comes down to the fact that, i need to use relative position on the large image, so i can adjust the top value. this causes the thumbs to be put on top of the main image. When i remove the relative positioning of the main image, the flow looks fine, but the top positioning is disregarded- i sort of need both to have the dynamic manipulation of this app im developing*
I wish I could understand why this happens like 90% of the time I go to code div layouts.
You have content in your div with a certain height, and then you have another div directly after it - and somehow it just goes right on top of the first one.
I wish I knew where the problem was, but I can't figure out what CSS is the cause.
Anyways, if you care to take a look, this is the sandbox of the issue I'm having:
the reference is changing because i keep updating it to check sorry.
http://www.drewswinson.com/DP/
I'm making a dynamic jQuery gallery viewer and the thumbs just don't want to put themselves below the image.
It happens all the time though; is there any reason content inside a div would allow subsequent divs to not be placed below the content its supposed to be filled?
You problem is the position: relative attribute on imageDiv.
It pushes the image down from where it should be. If you remove that, the static flow of the page will be used, which is what you want in this case.