1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    5
    Vote Rating
    0
    ghawkins is on a distinguished road

      0  

    Question Is HtmlContainer the right way to "convert" a block level element to inline element?

    Is HtmlContainer the right way to "convert" a block level element to inline element?


    I have a container (colored blue in the picture below) which contains a fixed size child (colored red).

    I want the container to derive its size from its child rather than expand to fill the table cell that it itself is contained by.

    This code shows the case where the container expands to fill the cell that contains it...
    Code:
    public class Demo extends LayoutContainer implements EntryPoint
    {
        @Override
        public void onModuleLoad()
        {
            RootPanel.get().add(this);
        }
        
        @Override
        protected void onRender(Element parent, int index)
        {
            super.onRender(parent, index);
            
            setLayout(new TableLayout());
            
            LayoutContainer panel1 = new LayoutContainer();
    
            panel1.setStyleAttribute("background-color", "blue");
            
            LayoutContainer fixedSizeChild = new LayoutContainer();
    
            fixedSizeChild.setSize(100, 100);
            fixedSizeChild.setStyleAttribute("background-color", "red");
            fixedSizeChild.add(new Label("fixed size child"));
            
            panel1.add(fixedSizeChild);
            
            LayoutContainer panel2 = new LayoutContainer();
            panel2.setStyleAttribute("background-color", "green");
            
            panel2.setSize(200, 200);
            
            add(panel1);
            add(panel2);
        }
    }
    This results in a the following layout:


    However I don't want the container (blue) to expand to fill the cell (imagine it was a ContentPanel - I don't want the header etc. stretching out to the right of the child content).

    I looked at the HTML generated and it seemed the issue was that the container is a <div> element, if it were a <span> element then it wouldn't expand like this (please correct me if there's more to this?).

    I found I could achieve the affect I wanted by replacing the line "add(panel1);" in the code above with...
    Code:
    HtmlContainer htmlContainer = new HtmlContainer("<table cellspacing='0'><tr><td id='foo'></td></tr></table>");
    htmlContainer.setTagName("span");
    htmlContainer.add(panel1, "#foo");
            
    add(htmlContainer);
    This results in what I want - the container is no bigger than its child:


    Why do I want this? In this example I've used LayoutContainer instances for the simplest possible demonstration but in my application I have lots of ContentPanel instances. At the moment I set an explicit size for each, usually this involves manually totaling up the widths and margins etc. of all the child elements and setting the size of the containing ContentPanel accordingly, whereas I'd rather this happened automatically.

    It seems I can achieve this using HtmlContainer but I can't help wondering if there's a more obvious standard way to achieve this as it seems like a pretty standard thing to want and it seems odd to have to specify custom (if still pretty simple) HTML to achieve it.

    I guess people commonly set the size of a container and then specify a layout that causes the children to be sized such that they fill out this size nicely, but in many situations I'd rather work the other way around, i.e. set sizes for the children (and still provide a layout of course) and let the container's size be derived from this.

    Any pointers to the proper approach would be welcome

    Thanks,

    /George

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    5
    Vote Rating
    0
    ghawkins is on a distinguished road

      0  

    Default Is HtmlContainer the right way to "convert" a block level element to inline element?

    Is HtmlContainer the right way to "convert" a block level element to inline element?


    Easier than using HtmlContainer is:
    Code:
    panel1.setStyleAttribute("display", "inline");
    But I'm still wondering if I'm approaching this the right way - do I really need to be working at the HTML/CSS level for something that seems really standard?

    Edit: actually using setStyleAttribute(String, String) like this works fine for a simple LayoutContainer as in my example code, but produces rather unusual results if I use a ContenPanel - the body of the ContentPanel renders as desired but the header still expands out to fill the available space. Using HtmlContainer as shown works for both LayoutContainer and ContenPanel.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar