1. #1
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Vote Rating
    1
    Answers
    2
    darkling235 is on a distinguished road

      0  

    Default Answered: CSSFloatLayout Scrollbar

    Answered: CSSFloatLayout Scrollbar


    I'm having some trouble with CSSFloatLayouts. The page LOOKS the way I want but I can't seem to get it to handle overflows properly. It's basically some nested CSSFloatLayouts with a FieldSet inside. The top level is a tab panel. The content runs off the right side of the screen and the bottom at times. I'm trying to force it to have scrollbars to handle the vertical overflow and resize the FieldSets so I can see the border of the FieldSets right border. I've tried a ton of tricks trying to get this to resize properly and just can't seem to get it right. Can anyone tell me what the rules are for CssFloatLayouts, scrollbars, and overflows? We're treating this page more like a document than an application because it's designed to be a list of elements.

    Code:
    CssFloatLayoutContainer tab = new CssFloatLayoutContainer();
                //tab.getElement().getStyle().setHeight(100, Unit.PCT);
                for(int y = 0; y < result.get(x).getGroups().size(); y++)
                {
                    FieldSet set = new FieldSet();
                    set.getElement().getStyle().setOverflow(Overflow.VISIBLE);
                    set.setStyleName("parameterFieldSetPanel");
                    //set.getElement().getStyle().setHeight(100, Unit.PCT);
                    //set.getElement().getStyle().setWidth(90, Unit.PCT);
                    CssFloatLayoutContainer container = new CssFloatLayoutContainer();
                    //container.getElement().getStyle().setHeight(100, Unit.PCT);
                    set.setHeadingText(result.get(x).getGroups().get(y).getName());
                    
                    for(int z = 0; z < result.get(x).getGroups().get(y).getParameters().size(); z++)
                    {
                        FieldSet itemSet = new FieldSet();
                        itemSet.setStyleName("parameterFieldSetPanel");
                        //itemSet.setHeadingText(result.get(x).getGroups().get(y).getParameters().get(z).getDisplayName());
                        itemSet.setCollapsible(false);
                        itemSet.setBorders(false);
                        CssFloatLayoutContainer c = new CssFloatLayoutContainer();
                        //c.getElement().getStyle().setHeight(100, Unit.PCT);
                        c.setStyleName("scaleBaseVerticalPanel");
                        c.getElement().getStyle().setOverflow(Overflow.VISIBLE);
                        handleFormItem(c, result.get(x).getGroups().get(y).getParameters().get(z));
                        itemSet.add(c);                    
                        itemSet.getElement().getStyle().setOverflow(Overflow.VISIBLE);
                        container.add(itemSet);
                    }
                    container.getElement().getStyle().setOverflow(Overflow.VISIBLE);
                    set.add(container);
                    tab.add(set);
                }
                tab.setStyleName("parameterTabPanel");
                tab.getElement().getStyle().setOverflow(Overflow.VISIBLE);
                parameterTabs.add(tab);
                TextButton save = new TextButton("Save");
                save.addSelectHandler(new SelectHandler(){
    
                    @Override
                    public void onSelect(SelectEvent event) {
                        EventBus.fireReloadEvent(EventType.SAVE_INIT);
                        ViewLogic.getMetadataService().setParameters(current, tabs, new AsyncCallback<Result>(){
    
                            @Override
                            public void onFailure(Throwable caught) 
                            {
                                BaseEditWindow.makeAlert(PropertiesWrapper.properties.general_error(), PropertiesWrapper.properties.parameters_save_error());
                                EventBus.fireReloadEvent(EventType.SAVE_FAILURE);
                            }
    
                            @Override
                            public void onSuccess(Result result) 
                            {
                                
                                if(result.isSuccess() == false)
                                    BaseEditWindow.makeAlert(PropertiesWrapper.properties.general_error(), PropertiesWrapper.properties.parameters_save_error());
                                else
                                {
                                    setParameterData((List<ParameterTab>)result.getData());
                                    setTab(currentTab);
                                    if(result.isRequiresEngineRestart())
                                        BaseEditWindow.makeAlert(PropertiesWrapper.properties.general_success(), PropertiesWrapper.properties.parameters_save_engine());
                                    else
                                        BaseEditWindow.makeAlert(PropertiesWrapper.properties.general_success(), PropertiesWrapper.properties.parameters_save());
                                }
                                EventBus.fireReloadEvent(EventType.SAVE_SUCCESS);
                            }});
                        
                    }});
    
                //save.getElement().getStyle().setPaddingLeft(50, Style.Unit.PCT);
                //tab.getElement().getStyle().setHeight(100, Unit.PCT);
                tab.add(save);
                
                ContentPanel cp = BaseEditWindow.makeContentPanel();
                //cp.getElement().getStyle().setOverflow(Overflow.SCROLL);
                cp.add(tab);
                //cp.getElement().getStyle().setHeight(100, Unit.PCT);
                
                tabPanel.add(cp, result.get(x).getName());
    AdvancedParams.jpg

  2. At some level you need to indicate that overflow should be auto or scroll instead of visible (or hidden) - this should generally be done at the container where you want scrollbars to appear. I haven't run your code yet, but it doesn't look like you have any such declaration present.

    Which container do you want to have a scrollbar? From your title, I assume that this line might be the mistake:

    Code:
                tab.getElement().getStyle().setOverflow(Overflow.VISIBLE);
    Try Overflow.SCROLL or Overflow.AUTO instead at this line.

    I'd be willing to try running this code, but there are more than a handful of things I can't test with - BaseEditWindow, PropertiesWrapper are two classes that are missing, as is the argument/field 'results'

  3. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Answers
    109
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    At some level you need to indicate that overflow should be auto or scroll instead of visible (or hidden) - this should generally be done at the container where you want scrollbars to appear. I haven't run your code yet, but it doesn't look like you have any such declaration present.

    Which container do you want to have a scrollbar? From your title, I assume that this line might be the mistake:

    Code:
                tab.getElement().getStyle().setOverflow(Overflow.VISIBLE);
    Try Overflow.SCROLL or Overflow.AUTO instead at this line.

    I'd be willing to try running this code, but there are more than a handful of things I can't test with - BaseEditWindow, PropertiesWrapper are two classes that are missing, as is the argument/field 'results'

Thread Participants: 1

Tags for this Thread