Results 1 to 2 of 2

Thread: Scroll bar in Tab Item not appearing

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Washington, DC
    Posts
    1
    Vote Rating
    0
      0  

    Default Answered: Scroll bar in Tab Item not appearing

    I'm looking for some help with an issue I've run into and have been unable to solve so far. I have a viewport which contains a tab panel and every tab I add to the tab panel contains a toolbar and a HTMLContainer. When everything is rendered, the length of the HTMLContainer's text is longer than the viewable space of the viewport but no scroll bar appears even though I've set Scroll.AUTO for the container. All of the examples I've found so far set the height specifically and unfortunately I can't use a set size as I need to allow the user to change the browser size as they see fit. Here's a simple version of what I'm trying to accomplish:

    Viewport viewport = new Viewport();

    TabPanel tabpanel = new TabPanel();

    ToolBar toolbar = new ToolBar();
    toolbar.add(new Button("Button 1"));
    toolbar.add(new Button("Button 2"));
    toolbar.add(new Button("Button 3"));

    TabItem tab = new TabItem();
    tab.setText("Tab Title");

    HTMLContainer content = new HtmlContainer("Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />.....");

    content .setStyleAttribute("overflowX", Scroll.AUTO.value().toLowerCase());
    content .setStyleAttribute("overflowY", Scroll.AUTO.value().toLowerCase());

    tab.add(toolbar);
    tab.add(content);

    tabPanel.add(tab);
    tabPanel.setSelection(tab);

    viewport.setLayout(new FitLayout());
    viewport.add(tabPanel);

    RootPanel.get().add(viewport);

    If you run this the scroll bars never appear even though they're needed. Does anyone have any idea why this is. One small note, I work on a closed system so I typed the above code in rather than cutting and pasting. If I missed something in my code I apologize.

  2. Code:
    Viewport viewport = new Viewport();
    
    
            TabPanel tabPanel = new TabPanel();
    
    
            ToolBar toolbar = new ToolBar();
            toolbar.add(new Button("Button 1"));
            toolbar.add(new Button("Button 2"));
            toolbar.add(new Button("Button 3"));
    
    
            TabItem tab = new TabItem();
            tab.setText("Tab Title");
    
    
            Html content = new Html(
                "Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />.....");
    
    
            content.setStyleAttribute("overflow", "auto");
    
    
            tab.setLayout(new RowLayout());
            tab.add(toolbar,new RowData(1,-1));
            tab.add(content,new RowData(1,1));
    
    
            tabPanel.add(tab);
            tabPanel.setSelection(tab);
    
    
            viewport.setLayout(new FitLayout());
            viewport.add(tabPanel);
    
    
            RootPanel.get().add(viewport);

  3. #2
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976
    Answers
    60
    Vote Rating
    131
      0  

    Default

    Code:
    Viewport viewport = new Viewport();
    
    
            TabPanel tabPanel = new TabPanel();
    
    
            ToolBar toolbar = new ToolBar();
            toolbar.add(new Button("Button 1"));
            toolbar.add(new Button("Button 2"));
            toolbar.add(new Button("Button 3"));
    
    
            TabItem tab = new TabItem();
            tab.setText("Tab Title");
    
    
            Html content = new Html(
                "Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />Document Text<br />.....");
    
    
            content.setStyleAttribute("overflow", "auto");
    
    
            tab.setLayout(new RowLayout());
            tab.add(toolbar,new RowData(1,-1));
            tab.add(content,new RowData(1,1));
    
    
            tabPanel.add(tab);
            tabPanel.setSelection(tab);
    
    
            viewport.setLayout(new FitLayout());
            viewport.add(tabPanel);
    
    
            RootPanel.get().add(viewport);

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •