Automatic Height Adjustments and Double Scrollbar
Closed this issue · 8 comments
hi,
I noticed that the calendar creates its own scrollbar, which is fine, unfortunately for a dynamic design (browser not in fullscreen or page on mobile device) the height doesn't adjust to the browser window, which causes the page to be scrolled as well and with this there are two scrollbars and the navigation for going up and down is frustrating.
since I'm quite new to Blazor in general, I haven't found a way to fix this myself, so that the height would always be the max available window height (or slightly less). I have seen this working with another scheduler, so it should be possible.
another related issue is, that in Firefox the outer border at the bottom overlaps with the grid lines. this seems to be only cosmetical, but can be distracting.
I would like to make this work in all (common) browsers and not rely on the user to use a specific browser for this.
thanks for your time and effort.
By default the calendar has a height of 700 px, you can change this with the height property. You could also set a style of height 100% on the component so that it is always the height of its container e.g.
<MudCalendar Height="200" Style="height: 100%;" />Would that fix your problem?
I will fix the problem with the firefox.
unfortunately using a style directly on the component doesn't seem to do anything.
I have played with different parameters, but I see no changes.
the calendar isn't stretched to the full page height and when the page is shorter than the height of the calendar it causes another scrollbar to appear:
in my case I also have a horizontal one, but I'm not sure, if thats a related issue, because on the month view there is no horizontal one and only a scrollbar when the page is shorter.
interestingly the fields also get a scrollbar, when the content is too big:
I don't know if it's possible to detect the field width und cut the item text like "This is an event to...".
but that is a different issue, although it is related to browser resizing.
thanks for your efforts
I can't find a problem with the height. The solution I proposed seems to work fine. If the calendar isn't stretched to full height then it is probably being constrained by the parent element.
I will create separate issues for the other 2 problems.
Unfortunately there is no parent element, as far as I can see. In MainLayout there is only MudMainContent and on the page itself there is no element around the MudCalendar.
A demo of a different scheduler is inserted in the same way on another page and is filling the whole width and length without gaps or scrollbars.
So I don't think this is caused by my layout.
If I use your complete suggestion, the calendar is shrunk down:
If I remove Height="200" the calendar behaves as described earlier.
The solution I suggested is working for me. Can you provide an example project that shows the problem?
I shrunk down my project and created an example.
Hopefully this helps to find the problem.
I'm not saying the error isn't on my side, but I don't see where it would be, unless adding the calendar through a separate project is causing this.
I had a look at your example. The calendar is constrained by the parent elements. height: 100% will only make the calendar 100% of the height of the parent. None of the parent elements in your example have a height setting.
The parent elements are: html -> body -> app -> MudLayout -> MudMainContent -> MudCalendar
An alternative would be to use height: 100vh. This will make the calendar 100% the height of the browser window. Of course you also have an app bar so you might want to use height: calc(100vh - 65px) to take that into account.
height: calc(100vh - 65px)
this did the trick, thank you very much
now I still need to get rid of the horizontal scrollbar, but since I want this to be dynamic (sidebar on/off or different window/device sizes) I can't use the same trick for that.
I will try to set the parent element to a specific width.
I wasn't aware that "no setting" doesn't mean 100%, but judging by the default sizes of html tables, I could have guessed that.
thanks again!