Hello,
I am using a Rad Grid control inside of a Rad Pane, Static Headers and Scrolling are enabled. I want it to resize with the rest of the browser window, but unfortunately it only uses about 10% of the Pane when I set any non-static height (it doesn't change anything if I use 10% or 100%). I have tried using the code found under the following URL:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx
as suggested in various threads regarding this topic, but it only makes my Grid too high when the page is first loaded (scroll-bar disappears at the end of the page when scrolling), and resizes it to use, again, about 10% of the overall site once the browser-window is resized.
Is there a possible solution for this?
Thanks in advance,
Robin
I am using a Rad Grid control inside of a Rad Pane, Static Headers and Scrolling are enabled. I want it to resize with the rest of the browser window, but unfortunately it only uses about 10% of the Pane when I set any non-static height (it doesn't change anything if I use 10% or 100%). I have tried using the code found under the following URL:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx
as suggested in various threads regarding this topic, but it only makes my Grid too high when the page is first loaded (scroll-bar disappears at the end of the page when scrolling), and resizes it to use, again, about 10% of the overall site once the browser-window is resized.
Is there a possible solution for this?
Thanks in advance,
Robin
5 Answers, 1 is accepted
0
Hello,
The required things, which make the scenario work as expected include:
1) overflow:auto style for the <html> element - this will remove the browser scrollbar
2) zero margin and 100% height for the <html>, <body> and <form> elements - this will expand the three elements to occupy exactly 100% of the browser window height, e.g.
3) 100% to the attributes width and height for RadGrid
4) border:0 style for RadGrid - since RadGrid is 100% high and border widths are not included in the height, they should be removed, otherwise the browser scrollbar will appear
5) outline:none style for RadGrid - disables dotted borders on RadGrid focus in Firefox, which will cause the browser scrollbar to appear.
5) fixed table layout for the grid's master table to make it expand automatically to 100%
6) since the browser scrolling is disabled, you need to use RadGrid scrolling. In addition, static headers are used for better usability
Finally, the most important thing here is if the RadGrid has Height="100%" and Width="100%" it will calculate its dimensions in regards with its container width and height. Therefore it is possible this container to have height dimension in percents, but in this case you should care about its wrapper (parent element) too. So you have take care of all parent elements and this can achieve only with CSS without any
scripts.
Also, the RadGrid behavior is exactly as any other regular HTML block element and I suggest you to achieve your goal with <div style="width: 100%; height:100; background: red;" />. Then you might replace it with the RadGrid.
I hope this helps.
All the best,
Galin
the Telerik team
The required things, which make the scenario work as expected include:
1) overflow:auto style for the <html> element - this will remove the browser scrollbar
2) zero margin and 100% height for the <html>, <body> and <form> elements - this will expand the three elements to occupy exactly 100% of the browser window height, e.g.
html,body,form{ height: 100%; margin: 0; padding: 0;}3) 100% to the attributes width and height for RadGrid
4) border:0 style for RadGrid - since RadGrid is 100% high and border widths are not included in the height, they should be removed, otherwise the browser scrollbar will appear
5) outline:none style for RadGrid - disables dotted borders on RadGrid focus in Firefox, which will cause the browser scrollbar to appear.
5) fixed table layout for the grid's master table to make it expand automatically to 100%
6) since the browser scrolling is disabled, you need to use RadGrid scrolling. In addition, static headers are used for better usability
Finally, the most important thing here is if the RadGrid has Height="100%" and Width="100%" it will calculate its dimensions in regards with its container width and height. Therefore it is possible this container to have height dimension in percents, but in this case you should care about its wrapper (parent element) too. So you have take care of all parent elements and this can achieve only with CSS without any
scripts.
Also, the RadGrid behavior is exactly as any other regular HTML block element and I suggest you to achieve your goal with <div style="width: 100%; height:100; background: red;" />. Then you might replace it with the RadGrid.
I hope this helps.
All the best,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Robin
Top achievements
Rank 1
Rank 1
answered on 10 Jul 2012, 10:27 AM
Hello,
Unfortunately, the solution you provided didn't help. After setting everything as you suggested to, the RadGrid is still only using about 10% of the Height instead of 100%. Furthermore, the <HTML>-element occupies the whole 100% of the page, while the RadGrid inside of it doesn't occupy 100% of the element. Do you have any further information on how to fix this behavior?
Thanks in advance,
Robin
Unfortunately, the solution you provided didn't help. After setting everything as you suggested to, the RadGrid is still only using about 10% of the Height instead of 100%. Furthermore, the <HTML>-element occupies the whole 100% of the page, while the RadGrid inside of it doesn't occupy 100% of the element. Do you have any further information on how to fix this behavior?
Thanks in advance,
Robin
0
Hi Robin,
The important thing is that the RadGrid with Height="100%" will calculate its dimensions in regards of its container height. Its behavior is exactly as any other regular HTML block element. Therefore, could you try to replace the RadGrid with <div style="width: 100%; height:100; background: red;" /> and let me know how big it is.
Also, in case the issue persists could you paste your page layout (markup) here?
All the best,
Galin
the Telerik team
The important thing is that the RadGrid with Height="100%" will calculate its dimensions in regards of its container height. Its behavior is exactly as any other regular HTML block element. Therefore, could you try to replace the RadGrid with <div style="width: 100%; height:100; background: red;" /> and let me know how big it is.
Also, in case the issue persists could you paste your page layout (markup) here?
All the best,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Robin
Top achievements
Rank 1
Rank 1
answered on 12 Jul 2012, 08:43 AM
Hi Galin,
I tried to replace the Grid with a <div>-element, and the element actually covers the whole site if I set it's height value to 100%.
I also tried to place the RadGrid inside of the <HTML>-element, while also setting the height of both RadGrid and the <div>-element to 100%, but the RadGrid still only takes up 10% of the overall place of the site, and beneath it the rest of the site appears to be taken by the <div>-element.
Thanks in advance,
Robin
I tried to replace the Grid with a <div>-element, and the element actually covers the whole site if I set it's height value to 100%.
I also tried to place the RadGrid inside of the <HTML>-element, while also setting the height of both RadGrid and the <div>-element to 100%, but the RadGrid still only takes up 10% of the overall place of the site, and beneath it the rest of the site appears to be taken by the <div>-element.
Thanks in advance,
Robin
0
Hi Robin,
I have prepared a sample page based on your scenario. You can find it in the attached file, please check it out and let me know how it goes.
Regards,
Galin
the Telerik team
I have prepared a sample page based on your scenario. You can find it in the attached file, please check it out and let me know how it goes.
Regards,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.