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

How to use grid in CSS flexible box

9 Answers 299 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott Waye
Top achievements
Rank 1
Veteran
Scott Waye asked on 07 Mar 2017, 05:33 PM

I want to use the grid in a CSS flex layout with nested flex containers.  However the grid expands the flex item and the scrollbars are therefore missing (IE11 latest):

 

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

What's going wrong here?

9 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 09 Mar 2017, 09:51 AM
Hello Scott,
In this scenario, I can suggest setting the height of the Grid using the height property of the Grid:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-height

I modify the provide example to demonstrate this implementation:

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

I hope this will help to achieve the desired result.

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.
0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 09 Mar 2017, 01:10 PM

Hi,

Unfortunately still no good,  See attached screenshot:

0
Stefan
Telerik team
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.
0
Scott Waye
Top achievements
Rank 1
Veteran
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

 

0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 13 Mar 2017, 01:55 PM
And the graphic:
0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 13 Mar 2017, 02:00 PM
For some reaons I'm getting an error posting the graphic.  trying again
0
Accepted
Stefan
Telerik team
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.
0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 15 Mar 2017, 01:20 PM
Thanks,  its difficult to know what CSS features the grid supports and which it doesn't.  I'll create a uservoice post to request support for for flex (and might as well add CSS grid while your at it :-) )
0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 15 Mar 2017, 01:27 PM
Tags
Grid
Asked by
Scott Waye
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Scott Waye
Top achievements
Rank 1
Veteran
Share this question
or