How to make the mat-grid-list to min-height according to screen
Just I use rowHeight="270px"
that's right in specific screen but in other screens not working
I tried to make mat-grid-list and mat-grid-tile with height:100% but also not working
Related
I have an ag-grid-react set up with a series of components in place for cell rendering. When my dataset loads the vertical scroll works well but the horizontal scroll isn't obvious unless using a trackpad or horizontal scroll enabled mouse.
I would like to be able to add a scroll bar to the top of the grid as well as the automatically generated one at the bottom?
Has anyone encountered this, come up with as solution?
Thanks in advance.
Note : I found this solution How to add a horizontal scrollbar on top of the ag-grid but seems this is old and not working.
In Vaadin 14.6.1, I have created a horizontal layout with 2 charts (and some other stuff). The charts are not using up the correct width -- they seem to not "pick up" on the right width (see screenshot below). I set the width to 100% etc. Also, this problem disappears if I use a simpler component, such as label, instead of charts (from Highcharts). I've experienced a similar problem before, but in more complex settings (e.g. a user adjusts the splitlayout and the underlying chart does not resize). But in this case, it's an even more reasonably straightforward scenario (i.e. no adjustment by user of the width of any layout) and yet Vaadin doesn't seem to pick up the right width, at least when using charts. Is this a known or reproducible issue? If so, any workaround?
Charts indeed behave badly with some layouts. I have noticed two cases. The other is the Board component, where the workaround is just simply wrap Chart inside Div, i.e.
Div div = new Div();
div.add(chart);
// and then add div to Board
SplitLayout is more tricky. You need to call Chart to reflow after splitter has been moved. Something like the following finds all the charts and forces them to redraw.
splitLayout.addSplitterDragendListener(event -> {
getUI().ifPresent(ui -> ui.getPage().executeJs(
"Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"));
});
Note, if you have only one chart or have conveniently the references to chart instances you can do
chart.getElement().executeJs("$0.__reflow();", chart.getElement());
I'm trying to implement a horizontal resizable divider on a UIViewController.
Something like this sample from github (the sample is vertical, but easily adaptable to horizontal, which I already did in an Android app)
I'm pretty sure someone has already done it, but somehow seems in using the wrong keywords in my search and I have come up empty.
The idea is to have a UIWebKit on the top portion of the view, and a UITableViewController on the bottom, where both can be resized by a divider on the middle that separates them.
Here's a screenshot of the Android app... the black line in the middle is the resizable divider:
Any pointers will be appreciated!
I am not sure if I need to change the grid templates or if there is a regular way:
I want a horizontal grid with 20 items.
The grid dont need horizontal scrollig because the pagination is below.
Each item should have the same fix size.
Each item should have a top down order (and not left to right).
Its my first time with ui grid and I tried a bit but the result is "crap" :/ An working example will be so nice :)
I am using iscroll-probe.js to implement the pull-to-refresh and infinite load in a Phonegap application using the example given in this link.
I am loading the contents dynamically so iscroll is refreshed after the list items have been added.
Everything works perfectly for me except the situation when the total height of the list items is lesser than the screen height.
This is when the scroller is not required hence is disabled but it also disables the pull-to-refresh. This I think is how iscroll works as the scroller is disabled the moment I call the refresh method.
Does anyone know how to make pull-to-refresh work when the content height is smaller than the screen height.
For anyone still interested, I solved this problem by setting a min-height to the #scroller element.
I did this using jquery (I'm not sure if it can be done by using css only).
$('#scroller').css('min-height',($(window).height()+1)+'px');
That is: the #scroller element min-height is set to the window height + 1px.
This way the scroller is always enabled.
Please note that this instruction has to be executed before instantiating the iScroll element.