This is a migrated thread and some comments may be shown as answers.

How to use grid in CSS flexible box

9 Answers 690 Views

Grid

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

answered on 09 Mar 2017, 01:10 PM

grid-scrollbars-missing.png

Hi,

Unfortunately still no good, See attached screenshot:

answered on 13 Mar 2017, 08:01 AM

Hello Scott,

Please advise what is the expected result in this scenario, as in the first example the Grid was not scrollable, but the one that was modified has a working scrollbar.

Are two scrollbars expected on the page?

Also, please have in mind that if due the the use of flex, the page scrollbar is not visible, this may not be directly related to the Grid.

I will be expecting the additional information and I will assist further.

Regards,
Stefan
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.

answered on 13 Mar 2017, 01:54 PM

HI Stefan,

The expected result is to have a grid which fills the containing div but does not overflow.

In the first example, scrollable is not set on the grid configuration, according to the docs the default is scrollable: true so I don't know what you mean by "in the first example the Grid was not scrollable"?

Regards the most recent post, your version, http://dojo.telerik.com/iHugEV/19 and the graphic I posted when you open the Dojo it looks fine. I have my browser maximised so it opens maximised. Now I un-maximise the browser window and you get the result in the graphic. The vertical scroll bar is half shown even though the resize method is called. I've highlighted that in the attached graphic. So, as the grid resizes horizontally ok, I don't need a horizontal scrollbar, but if it was shown that would not be a problem. I do need a working vertical scrollbar with both the top and bottom arrows visible.

Thanks,

Scott

answered on 13 Mar 2017, 02:00 PM

scrollbar-arrow-missing.png

For some reaons I'm getting an error posting the graphic. trying again

Accepted

answered on 15 Mar 2017, 08:29 AM

Hello Scott,

Thank you for clarifying the scenario.

After additional testing, I can confirm that this is currently a limitation, as the Grid does not officially support flex due to specifics in its rendering.

I understand this is not the best result, but currently, if the window is minimised the scrollbar will not be fully visible.

Apologies for the inconvenience this may cause you.

======================================

Also, in my previous response, I mentioned that in the first example the Grid is not scrollable because the scrolling functionality was not working and I was not able to scroll it:

http://runner.telerik.io/fullscreen/iHugEV/16

Regards,
Stefan
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.