I'm working on a design where I prefetch N elements that display in a table. The height of the table is responsive. Currently, I have a y-axis overflow that enables scrolling, but the UX is not ideal.
My goal is to show only enough items that would fit within the table. What's the best way to consider doing this?
Currently, my thought is to attach a ref on the heading of the table, a single row and table itself. With that, I can get the entire table height.
get table height - 1000px
get heading height - 20px
get row height - 20px
With these numbers, I know that I could fit 49 items. 1000-(heading-height)/(row-height).
This seems over-engineered. What's the best way to do this?
Related
I want to use bootstrap's well component on a horizontal form.
Most rows of the form only have one or two fields in a set of columns, and I am specifying the width of each column.
I would like to style some of the of rows in a well, but I don't want to have the well go across the entire screen, because it looks weird to have so much extra space to the right of the fields. I only want to style the maximum width of the columns in the rows.
If enclose the grid within a div of a set size, then all of the controls' sizes and positioning are affected.
Is there anyway to style a row this way?
Is there a way to create a div that has the right width, and position underneath the actual rows?
I've been searching for two days, and trying all sorts of different options, but none of them do what I want. I'm positive this should be possible through CSS, but haven't come across the solution yet.
We want to have a single-cell table that is 100% of the page width, but a fixed page height (although we may be able to work around a % page height.) The table should either contain an extremely large image (that gets sized to 100% of the table width) or have a background image that does the same (so it never repeats, and just sizes up to always stay 100% of the table.
However, when the window is shrunk down, we want the table height to shrink, and "cut off" the image at either the top or bottom.
So far, I have no problem with the expansion issue, but I have yet to find a solution that shrinks the table height at all. It either downsizes by the correct ratio for the new size of the page, or it stays exactly the same size.
Can anyone offer any suggestions?
It would help if you posted a sample HTML and CSS, but in a more generic sense, I'd point you out to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and adding overflow: hidden to the DIV that contains the image.
I have this ui-grid containing a random number of rows, but sure thing, it contains a great number of columns.
That said, I have a someway responsive-related problem: I want the grid to fill the remaining space of the page, in both width and height.
Apart from look-and-feel reasoning, the logic behind this is, on large screen devices, to allow the user to look at as much columns as possible and to extend the ui-grid height to the bottom, even if there are few rows displayed (btw, the page has no footer).
So, using a media query, I set width: 100% to the grid and manage to do the first part of the trick, but I'm struggling for the second part: the height.
I can't really make the gridWrapper height to expand the grid to the bottom, even if his width behaves correctly, without using Bootstrap but... the css struggle is real.
So I managed to have something near to what I want, but:
it's a ridicoulusly complicated, weak and un-reusable solution;
the row selection icon layout (the one on the left side of the rows) messes up as the row number grows, and i can't get rid of the selection feature by now;
the height of the grid is greater than the height of the page. I could set it to 90% instead of 100% to make it work... close, but not responsive, still.
Even if this scenario is the subject of many issues on the GitHub of the project, I'm asking you:
Is there a way to obtain what I want in a responsive, maybe bootstrap-inclusive way before I delve in a swamp made of display: table;, display: flex; & Co.?
give grid height: auto either in css or once grid is ready i mean once you have assigned array to gridOptions.data after that
$(".ui-grid").css("height", "auto");
I am affraid that only way how to achieve this is use of JS and setting css height and width programatically.
You have to set it when:
grid is created
window size changes
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.
How to format a table using CSS such that:
the table is within the screen that the browser's horizontal scroll bar doesn't show up and users don't need to scroll horizontally to see the right side of the table;
the cells use as much width as necessary, that a column containing cells that only has numbers such as "1", "21" will not use a width that's much wider than necessary to show all the numbers in all cells in that column, say 4 character width, i.e. using much more than it means wasting horizontal space;
for columns containing very wide cells, or more precisely, content that will occupy large width if allowed, use as much width as possible such that 1) and 2) are not violated, and if the whole content of the cell can't be displayed, let horizontal scroll bar show up for that cell.
Is this doable in CSS for latest Firefox and Google chrome on Windows and Mac OS X?
My first attempt was based on CSS: Constrain a table with long cell contents to page width?, using nested divs with position: relative then position: absolute. The size of the absolutely positioned div isn't taken into account, which is good for the table's width but bad for the row's height: it doesn't expand to include the scrollbar.
Then I tried table-layout: fixed as suggested in How can I set a <td> width to visually truncate its displayed contents?. That also accomplishes the goal of ignoring the size of the cell's content, but in doing so makes it so that we can't specify, as before, that the last column should take all leftover width.
See also: Why does overflow:hidden not work in a <td>?.
These tips may help:
1- Do not specify any width for your cells
2- When you insert a page automatically there is a Style created and assigned to it which says:
width: 100%;
go ahead and delete it. that way your table will become very small and adapt itself to the content of the cell.
3- Use nowrap property of the cells for the fields that you want to stay in one line like numbers, but do not set it for larger texts and allow it to be multi-line.
4- You may want to set a width for your table or put the table in a panel and set a width for the panel.
I am not sure how to show the scroll bar for just one row, but I think if you show them in multi lines you don't need that option.