I've been working on an application that uses React Big Calendar.
We are using a thin scroll bar and when there is an overflow, the TimeGridHeader isn't well aligned :
React Big Calendar automatically adds a right margin that has the size of the default scrollbar, however our scroll bar is smaller so it creates a too big gap, and the alignment is bad.
Do you have any idea on how I could change this default margin value when the there's an overflow ? Thanks
I've tried setting 'margin: 0 !important' to the class .rbc-overflowing. It did override the right margin, howver I'd prefer doing it in another way.
Related
I realize that hard to envision without the code etc.
Basically, with SlidesPerView set explicitly (say to 2 or 3), each slide locks to left edge just fine after swiping, and right edge also lines up. Note that SOME of the slides have 'Scroll-Y : Scroll' via an extra class.
As soon as I change SlidesPerView to 'auto' and try to set one slide in the middle wider, all the 'sliding/locking' gets progressively offset from the left edge, now cutting off more and more of the right-most slide!
I have worked hard and confirmed that REMOVING that scroll class fixes the problem.
Tried setting the scroll via 'swiper-slide' class. Tried '!important'. Tried messing with the width of the other slides. No dice.
Seems that with 'SlidesPerView' at auto, SwiperJS does not account for system scrollbar width?
I have setup this playground to show the problem I am having
tailwind playground example
Resize the window a little to get the scroll bar.
I want to have scrolling just in the body element of this layout.
When scrolling is activated, it hides parts of some elements, and I can't get them fully visible when scrolling.
What am I missing here ?
Code sandbox: Code sandbox
I have a column of Icon like this:
I css it with overflow-x:auto so that It can scroll the icon outside the container.
But when It bounced out. The overflow-y: visible didn't work for me so the Icon is still inside the box.
I tried using oveflow-y but didn't work for me. I coded a code sandbox so that you guys can have a look. Thanks for all of your help! Have a nice day!
For overflow-y to work, the height of the content in the element needs to exceed the specified height.
I just removed the height of container and slightly increased the padding of AppBar to make it work. Yes, you have to little workaround to meet the height of the container actual to the design.
Another solution, for now, I can suggest is to play with z-index property of the elements.
SanBox
from mozilla : "Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto."
source : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow...
You could avoid this side effect either by controlling the scroll another way (css and javascript driven scrollbar) (this would by the way avoid the different scrollbars on some browser which can be a little ugly (ie under edge), either by setting the container bigger, and setting a nested element for the background.
I'm using Angular UI Grid in a project. The grid sizes itself so that all the columns fit horizontally in a div.
This works great, until there are more rows than fit on one screen. Then, a vertical scroll bar comes up (good), which covers part of the last column (bad). Horizontal scroll bars can be enabled to reach those last 20 or so px, but when you scroll horizontally, the header cells don't scroll. This throws everything out of alignment.
Since the grid was perfectly sized before the scroll bar, there should not be a need for the horizontal scroll bar. But the way the scroll bar covers the content means that without it, you can't see anything that might be in the right 20 or so px.
I need to fix this. Here are some solutions I have looked into implementing, unsuccessfully:
Find some way to know if there is a vertical scroll bar and add padding or margin somewhere to push in the content of both the header cell and the data cell, to keep things in alignment. I haven't found an easy way to grab the container who may or may not have a scroll bar and then I think the logic to ask it if it has a scroll bar would be brittle. Plus, just playing around with adding padding where I think it should go did not effectively push over the content.
Find a way to let the container with the scroll bar push outside of the grid when it has a scroll bar. This has basically the same issue as #1 in that that guy is pretty slippery.
Find a way to replace the scroll bar with my own. It seems that there is someone who did a branch that lets you do this with a specific library, but we are tied to a specific commit of UI Grid and adding libraries takes an act of congress.
Thoughts?
How you can know if there is a vertical scrollbar :
If you haven't customized the rows with a rowTemplate, then you might be having a rowHeight of 30px (if not please inspect).
var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;
if (dataRowHeight > gridElementHeight) {
// you have a verticalscrollbar
}
Safe side : specify width for all columns by % and leave 1% behind for the scrollbar.
Ugly side : Get the width of the 'viewport', loop through and calculate the actual pixels from your provided percentage for all columns, if you detect a vertical scrollbar using the technique above, leave 15px behind.
I am trying to implement the scrollable feature for a series of paper-tab's in a Polymer project, like so:
<paper-tabs selected = "{{selectedtab}}" scrollable>
<paper-tab>Page 0</paper-tab>
<paper-tab>Page 1</paper-tab>
<paper-tab>Page 2</paper-tab>
</paper-tabs>
Despite having my code be the same for the scrollable example in the official Polymer documentation, it is not working for me. Here is what is happening:
When I copy-paste more paper-tab elements to test it out, it shrinks the size of all the paper-tabs to accommodate the new ones. The arrows that are supposed to appear at the left and right of the paper-tabs element do not appear.
When I enable the scrollable, the original three paper-tab's are shrunk, instead of covering the full width of the screen. I tried setting the width:170px for each of the paper-tab's, but it's not reproducing the effect before enabling scrollable.
What can I do to maintain the width of all the elements the same so that they cover the entire width of the screen? that is, how can I avoid the re-adjustment when adding in more paper-tab's?
This seems to be by design:
If true, tabs are scrollable and the tab width is based on the label
width
The problem is that scrollable will change the styles of the tabsContent div and thus the tabs won't flex.
The current workaround is to measure if your tabs do fit in your available space and if not set the scrollable attribute.
You can also create an issue in the issue tracker.