Styling within a container, overflows, clipping and width calculation.

This may be a post for the Theme’s area, but then again it related to UI components so someone my have had the same problem.

I am creating custom UI components to display in generated Table cells. These components are created as
GridLayout
instances which I then set a width of 100% and an undefined height (so they are auto sized to the height of a contaned icon).

I have two problems which I think are related:

  1. I have an icon that is placed in the last column of my grid layout, against the far right of the GridLayout, when the Component is rendered the right hand side of the icon is clipped off, presumably by the CSS overflow rule of hiddon.

  2. I also want to draw a border on the Component, the border is visible on the top, bottom and left sides of the component, but the right hand edge is again clipped firebug indicates that again the component should be bigger but is not visible.

Looking at the HTML/CSS generated is appears that the widths of some of the html elements is set in the style attributte (presumably calculated by html generator) instead of being left entirly to the CSS to work out, so I dont understand how I can make the components appear as I want without manipulating the generation of the HTML.

I hope I have made a simple error in how I’m tryign to adapt the presentation, but if this is a common gothca please let me know.

Many thanks.