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

[Solved] Grid Toolbar & Group Header Resize/Paint Issue

4 Answers 417 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AGB
Top achievements
Rank 1
Iron
AGB asked on 12 Nov 2014, 11:29 AM
Hi Guys,

I have just tripped over the following with the grid toolbar & grouping header panels not resizing/painting correctly.

To demonstrate take

    http://demos.telerik.com/kendo-ui/grid/index
    
as a staritng point and add the following CSS styles

    .k-grid {width: 100%; margin: 0; overflow: auto;}
    .k-grid td {white-space: nowrap;}

and the grid options

    toolbar:["Test"],                     
     scrollable: false,   

so that the grid columns resize in proportion to content & browser width.

If you now resize the browser so that the grid shows a horizontal scrollbar and then scroll the right hand columns of the grid into view you will see the toolbar & grouping header panels are not resized/painted in accordance with the grid width.

Now I suspect this is a CSS issue somewhere but after a couple of days of trying various style settings I'm stumped.

Therefore any help or advice would be much appreciated.

Alan

4 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 14 Nov 2014, 12:13 PM
Hello Alan,

I would suggest checking the Grid Appearance guide, where this topic is covered.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AGB
Top achievements
Rank 1
Iron
answered on 14 Nov 2014, 02:06 PM
Hi Alexander,

I have read through the Grid Appearance guide but cannot find any answers in relation to the reported issue.

Do you have any further suggestions as how to ensure the group header and toolbar resize correctly to the edge of the grid to overcome the whitespace issue as shown in the attached graphic.

Thanks
Alan
0
Alexander Popov
Telerik team
answered on 18 Nov 2014, 12:27 PM
Hello again Alan,

Here is an example how the Grid would look like if the appearance guide is followed. If that is not what you are after, then I would ask you to share additional details on what the expected look and feel should be.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AGB
Top achievements
Rank 1
Iron
answered on 18 Nov 2014, 02:23 PM
Hi Alexander,

Comparing your example with mine the difference is the addition of  a style="float:left;" on the grid <div>

Adding this style to my code does overcome the whitespace issue, but from reading the Grid Appearance guide this would never have occurred to me, so thanks very much for all your help.

Regards
Alan
Tags
Grid
Asked by
AGB
Top achievements
Rank 1
Iron
Answers by
Alexander Popov
Telerik team
AGB
Top achievements
Rank 1
Iron
Share this question
or