:-)
I use 2 features of the PrimeNG table (<p-table>, Version 8) in combination:
Scroll
Row expansion
This works quite well as long as the table is indeed scrollable:
But when to many rows are collapsed the table is smaller than the threashold scrollHeight I configured at the p-table. That makes the scrollbar go away so that the table body fills up that space - without the header getting wider too:
What I tried so far
Force the scrollbar: According to this article giving an html element the css style overflow-y: scroll enforces the scrollbar to allways be visible. However the scrollable element I deal with here is generated by PrimeNG and so far I couldn't overwrite it's style
Use position: sticky to make the header follow: I already blowed hours in applying that attribute to the header. It never took effect. Thats why I tried this with the scrollable function of p-tablein the first place.
May the force be with you!
This workaround works for me with vertical scrollbar always be shown:
body .ui-table-scrollable-body {
overflow-y: scroll;
}
Related
I have a table at the bottom of my page with rows of select2 dropdowns.
Unless I pad the bottom the select2 won't trigger. Even then I need to adust my CSS to eliminate the wrapper div overflow-y: auto;
Before (with overflow-y: auto;):
After (cleared overflow-y: auto;)
Any initial thoughts on where to start looking to adjust the CSS on this or perhaps a Select2 option? Ideally the wrapper div would just expand as required for the select and avoid the excess padding.
UPDATE
I looked again - it seems like I may have been mistaken. It looks like the select2 is in fact trying to display upwards when at the bottom of the screen. Working a codepen to reproduce this.
Took some head banging but sorted it out. I have these selects originally in a modal. I had to add this to make that work:
dropdownParent: $(this).parent()
This was the issue all along 🤦♂️
My biggest problem here is to express what I want, so please free to alter the formulation / suggestion correct wording for things.
On mobile I wish my page to be only vertically scrollable (page width and view port width are the same. A bug is causing an element adding more width than it should. I have identified the culprit element, when I set this element style to "display:none;" the display is correct (no horizontal scroll), when I don't I get an horizontal scroll.
To make it clear, with ".culpritElement {display: none}":
With culpritElement visible:
culpritElement is generated with some inline style by a third party library that I don't want to tweak. Is there a CSS directive to set to make the element visible but out of the positioning flow of the others (and page size computing).
You could set .culpritElement { max-width: 100vw; overflow-x: hidden; }
Or you could apply the above css style to its parent element
I have a %-based grid with a fixed-width (for the moment). The code is based off of this css-tricks article: http://css-tricks.com/dont-overthink-it-grids/
Works great until I have a column that has multiple responsive images in it that are the same size and need to be stacked next to each other (floated). Because of padding issues and what-not, I can not get all three images to come out the same width and height, despite the fact that they start that way. The last one is always taller. Here is a codepen showing the issue: http://codepen.io/joshmath/pen/dEuIv
Any help with this would be really appreciated. I've run into this issue before and always just end up hacking my way through it on a case-by-case basis. Thanks!
For whatever reason, if you remove the padding-right: 0 style from the last element, it fixes the issue.
It looks like you're trying to add spacing between the elements using padding. What I tried instead using the Chrome dev tools was to use a margin instead of padding, and then slightly reducing the width of your elements to around 29.5%. That seemed to work.
just add the following to your css. set the size to whatever you like and all images within your grid will remain that size, if they need to grow / shrink use height/width percents instead.
.grid img
{
width: 350px;
height: 400px;
}
I have a table that I'm styling with CSS. Yes I know, tables are bad and all that. I want the "grid" of TD's to all have the height of the row they are positioned in.
http://jsfiddle.net/p87Bv/1/
You'll see if they have varying content, they look all jumbled up! Would prefer not to use Javascript.
tables are not automatically bad. tables are perfect for displaying tabular data... even though that doesn't seem to be what you are doing.
move the style from the div to the table cell...check out my updated fiddle for some CSS changes. i think you could remove the divs from the markup now that they aren't being used for anything via CSS
http://jsfiddle.net/p87Bv/5/
All you have to do is give you tds a height, and then give the divs inside a height: 100%.
Here's the fiddle: http://jsfiddle.net/p87Bv/2/
It's hard to understand your question. Maybe you can clarify - is this what you're looking for? Also notice how the overflowing text is in a scrollable div - more on that later.
Link: http://jsfiddle.net/ZFHUm/
If it is, it's as simple as adding the height CSS property. Also, it's always good to address the text overflow, especially in this manner, in case the text inside the table row (div) is larger than the div itself. Add these to the 'table td div' property to achieve the affect in the new fiddle:
height:200px;
/* or whatever height you'd like them to be */
overflow:auto;
/* makes all overflowing text have a scrollbar */
Here I am getting trouble with last column. I want last column bg-color and borders up-to vertical scroll bar. And header text is overlapping.
Here is the link : http://jsfiddle.net/8JvZQ/
Floating header
Added width: 100%; to .tableScrollBar table {}:
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/3/
Note: This is the straight-up solution to your problem. However, if you simply wish the effect of the table header always being visible. Then you can use jQuery to make the full floatable on scroll. Here is a demo of the floating header and from here you can download it.
Last row (CSS)
This is css version of detecting the last row. However, it is not crossbrowser, since IE does recotnize :first-child but not :last-child :(
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/4/
Last row (jQuery)
This is the jQuery version for detecting the last row. This is the ultimate solution!
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/9/
Not full-width version
This is being done by adding display: inline-block; to the global container.
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/10/
Last column being full-width (just like your screenshot)
Being done by adding class="w100pre" to phone column and also creating a new class:
.w100pre {width: 100%;} that can be used globally on your site :)
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/11/
NOTE: I wasted about 2 hours on this question.
here exactly like ur screenshot fixed the text overlaping. http://jsfiddle.net/8JvZQ/14/
hiding the row for fixing the overlapping text.