Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » grid width inside customitem's slide menu

grid width inside customitem's slide menu Options
Previous Topic · Next Topic
Leitor79
Posted: Friday, October 29, 2010 12:55:43 AM
Rank: Member
Groups: Member

Joined: 10/29/2010
Posts: 11
Hi,

This is my first post.

I have a grid inside a customitem's slide menu. As I change the slide menu width (it's inside a splitter, width set to 100%, that's working OK), the slide menu's width should adjust automatically
(width=100%), but it doesn't happen. Instead, it's seems the grid takes the value in pixels, not in %!

My item's definitios:

<eo:MenuItem RightIcon-Url="YellowStar" CustomItemID="MyItem">
</eo:MenuItem>
.
.
.
<eo:CustomItem runat="server" ID="MyItem" style="width:100%;margin:0;" >
<div style="width:100%;margin:0;">
<eo:grid ID="MyGrid" runat="server" BorderColor="#C7D1DF" BorderWidth="3px" Width="100%"...



And the result:



If I change the grid definition:

<eo:grid ID="MyGrid" runat="server" BorderColor="#C7D1DF" BorderWidth="3px" Width="200%"...


...I get this:



And with this:

<eo:grid ID="MyGrid" runat="server" BorderColor="#C7D1DF" BorderWidth="3px" Width="50%"...


... I get this:





It's seems it's taking the width in pixels. You'll see the star as the right icon of the menuitem; the slide menu width is OK. It's a known bug or I'm doing something wrong?


Thank you!
Back to top
 
eo_support
Posted: Friday, October 29, 2010 9:06:23 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,275
Hi,

That is normal. 100% often doesn't work the way you expected it to. You can run into this problem even with simple HTML code. The root of the issue is the base value of 100% ---- the HTML standard isn't clear about whether it should be the "actual" width of the container, or the set width of the container. Different browsers such as IE and FireFox interpret them differently. Different versions of IE under different mode (standard compliant mode or quirk mode) interpret them differently. Most of the time you will only get a consistent look if the parent container's width is set to a fixed value.

The best way for your situation is to handle the splitter's ClientSideOnResize method and then call our client side API to manually resize both the CustomItem and Grid. Here is a sample demonstrating how to do this:

http://demo.essentialobjects.com/Demos/Splitter/Features/Auto%20Resize%20Contents/Demo.aspx

Basically every time user moves the splitter, the splitter can call you code to tell you the new size. You would then call the Grid's setWidth/setHeight to set the Grid's new size based on the splitter's new size. You can take a look of the sample's source code to see how it works.

Hope this works. Please feel free to let us know if you have any questions.

Thanks
Back to top
 
Leitor79
Posted: Saturday, October 30, 2010 4:33:17 AM
Rank: Member
Groups: Member

Joined: 10/29/2010
Posts: 11
Hi!

Thanks for your answer, with some modifications it worked.
I've been looking for the resize event to handle... I couldn't found it within the "onXXX..." named events... now I know.

Regards!


eo_support wrote:
Hi,

That is normal. 100% often doesn't work the way you expected it to. You can run into this problem even with simple HTML code. The root of the issue is the base value of 100% ---- the HTML standard isn't clear about whether it should be the "actual" width of the container, or the set width of the container. Different browsers such as IE and FireFox interpret them differently. Different versions of IE under different mode (standard compliant mode or quirk mode) interpret them differently. Most of the time you will only get a consistent look if the parent container's width is set to a fixed value.

The best way for your situation is to handle the splitter's ClientSideOnResize method and then call our client side API to manually resize both the CustomItem and Grid. Here is a sample demonstrating how to do this:

http://demo.essentialobjects.com/Demos/Splitter/Features/Auto%20Resize%20Contents/Demo.aspx

Basically every time user moves the splitter, the splitter can call you code to tell you the new size. You would then call the Grid's setWidth/setHeight to set the Grid's new size based on the splitter's new size. You can take a look of the sample's source code to see how it works.

Hope this works. Please feel free to let us know if you have any questions.

Thanks
Back to top
 
eo_support
Posted: Saturday, October 30, 2010 8:02:09 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,275
Great. Glad that it works for you!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.