1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    2
    Vote Rating
    0
    Snorkmaiden is on a distinguished road

      0  

    Default TabPanel width problem

    TabPanel width problem


    Hello all,

    When adding a TabPanel to a div inside a GWT HTMLPanel, I'm finding that the width of the TabPanel does not get set to the width of the div, but a much greater width which forces the whole layout way over to the right.

    A brief description of the layout is as follows - I've got an HTMLPanel with a table which has 2 columns. In the left hand column, there are 3 divs. The 3rd div is the problem one - it is an HTMLPanel with 2 divs.

    If I set the TabPanel width to a fixed width, then this works ok. However, in this case I can't use a fixed width because I need the TabPanel to resize with the rest of the layout.

    I have tried wrapping the TabPanel in a LayoutContainer which uses a FitLayout, but this exhibits the same problems.

    I have also tried using a ContentPanel with a BorderLayout with just the center panel implemented, however I was not able to get this to work at all.

    Example code as follows:

    final String divId = HTMLPanel.createUniqueId();
    final String contactId = HTMLPanel.createUniqueId();
    final String paddingStyle = css.paddingLeft10() + " " + css.paddingBottom10() + " " + css.paddingRight10();
    final HTMLPanel panel = new HTMLPanel("<div class='" + css.infoPanel() + "' id='" + divId + "'>"
    + "<div class='" + css.padding10() + "'><h5>Other Contact Details</h5></div>"
    + "<div class='" + paddingStyle + "'id='" + contactId + "'></div>"
    + "</div>");
    final TabPanel tabPanel = new TabPanel();
    Iterator<String> iterator = contacts.keySet().iterator();
    while( iterator. hasNext() )
    {
    final String s = iterator.next();
    final TabItem item = new TabItem(s);

    final TempContact c = contacts.get(s);

    final HTMLPanel contactPanel = new HTMLPanel("<div><table cellspacing='10'>"
    + "<tbody>"
    + "<tr><td>Telephone:</td><td>" + c.getTel() + "</td></tr>"
    + "<tr><td>Mobile Number:</td><td>" + c.getMob() + "</td></tr>"
    + "<tr><td>Address:</td><td>" + c.getAddress() + "</td></tr>"
    + "<tr><td>Email address:</td><td>" + c.getEmail() + "</td></tr>"
    + "</tbody></table></div>");

    item.add(contactPanel);
    tabPanel.add(item);
    }
    tabPanel.setAutoHeight(true);
    tabPanel.setWidth("70%");
    panel.add(tabPanel, contactId);


    Does anyone have any idea what the problem is? Any help would be greatly appreciated.

    Many thanks,

    Helen

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,966
    Vote Rating
    130
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    If I set the TabPanel width to a fixed width, then this works ok. However, in this case I can't use a fixed width because I need the TabPanel to resize with the rest of the layout.
    And this is the problem. You have to use a fixed size. If the other layout resizes, resize your TabPanel again

Similar Threads

  1. IE problem - TabPanel Width
    By meiji in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 21 Apr 2008, 3:17 AM
  2. Grid in TabPanel, problem with width
    By mr.Drago in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 7 Feb 2008, 8:32 AM

Thread Participants: 1

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