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?
Related
I am trying to achieve a responsive design mechanism using Win Forms C#. The approach I adopted now is to create container flowlayoutpanel then several tablelayoutpanels to it with controllers as showing in the below Image:
The Image shows that the flowlayoutpanel flow direction is set to left to right and the table docked to the top. the table layout controls are anchored top, right left. The problem is when resizing the tablelayoutpanels are stacked vertically but an extra room is created. View Image Two.
I tried to remove the extra space room by anchoring tablelayoutpanels to top, left, right. But did not work. The proposed way is to calculate the offset and do the adjustment. But unable to calculate the offset. How Can I make tablelayoutpanels fills the extra spaces and extend the last tablelayoutpanels width in accordance to other tablelayoutpanels until the extra room fits the tablelayoutpanel from second row. Please Consider that I would like to continue using flowlayoutpanel.
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?
I'm hoping for some help, I have a static navbar along with some buttons on the right, and I have a VERY large table that the users are going to interact with.
The users are most familar with an Excel like view where there is a ribbon (my navbar) on top and the table is scrolled horizontal and vertically as necessary.
I've got the table to fill the page and have the bootstrap static navbar to show however the navbar is overlapping the table headers.
Is there an easy way to fix this overlap?
Here is bootstrap playground link detailing what I currently have.
https://www.bootply.com/iGX9K2KF9a
Sure, give the .table-wrapper a margin-top:50px and that will move it down. Since the navbar is fixed, it's taken out of the flow of the page so the relatively positioned .table-wrapper is still being placed based off the top of the page.
Ok so i am trying to create a 3 column layout with css and html on Expression web and when i view it in a browser my left panel div column overlaps my heading div column and my right panel div column overlaps the header also.Plus theirs a lot of white space between my main content column and my right panel column. Its no white space in between the layout when its minimized but it still overlaps.please help
I'm not sure what your specific problem is without seeing your code. I find the best way to learn CSS is by example. so, I'd suggest looking through these.
(I haven't looked to see if these are using the latest design standards)
http://layouts.ironmyers.com
Or my favorite layout.
http://alistapart.com/article/holygrail
I am working with a responsive web layout I've diagrammed in the image below below. Red areas are fixed on the screen, green areas are independently scrollable sections (blue = scrollbars).
I'm wondering - is there any way (without iframes) to take the main content section of this layout (the green area on the right) and treat it as if it was the viewport itself so that the contents and styles would work as if it were it's own independent full screen?
The reason I'm trying to do this is because I'd like it to be as easy as possible to just fit a 2nd website's content straight into this main content section without having to adjust all of the pages to now fit into the narrower section of the site.
The 2nd site was built using twitter bootstrap for the scaffolding, and since the containers are all created relative to someone's viewport size, they do not fit neatly into the slightly narrower content area (given the left sidebar) without having to adjust all of the scaffolding. I'd rather not have to adjust everything on many pages and therefore, I'm looking for a hack to see if I can just make it fit (crossing my fingers that something exists!)
In addition, the left sidebar is collapsible - so there would be a case where the main content section would take up the entire width of the viewport. Hence, I would want it to dynamically adjust.
It seems like I have 3 options:
Go through each page of the 2nd site and rework all of the scaffolding in each page to ensure they work with a slightly narrower section, essentially treating the left sidebar as the first span column, and then adjusting the entirety of the site to work within the remaining width. This option doesn't really work because if the sidebar is collapsed, then the main content area takes up the full-width and would now be narrower.
Use iFrames - I am NOT considering this due to all of the implications.
Somehow treat the main content area as its own viewport so that all of the scaffolding adjusts to whatever size it is, as if it were the viewport itself, or a full screen .
Is this possible somehow?
Is there perhaps an alternative solution that might be even better?
Thanks!