Results 1 to 2 of 2

Thread: Container cutting off content when maximized

  1. #1
    Sencha User
    Join Date
    Mar 2019
    Posts
    16
    Answers
    4
    Vote Rating
    1
      0  

    Default Answered: Container cutting off content when maximized

    Ok here is the problem. I haven't had the time to create a fiddle example but I'll try and explain the issue with as much detail as possible. We are using the TabPanel in our application. Within those tabs depending on which tab is opened we add the corresponding component at rendering. There are several different layers of containers and/or panels. What we are seeing is in Windows 10 if you have your display set to 125% scale and your chrome (Version 73.0.3683.86 (Official Build) (64-bit)) browser is maximized when entering 2 of our tabs that only contain a grid (non-ExtReact Grid) the grid gets cutoff. The other 2 tabs that have additional components and a grid no cutoff. Now to add to the strange behavior, if you minimize the browser and click into one of these tabs everything shows fine, it is only when the browser is maximized that we see the cutoff. Special note, if you maximize and minimize while in one of the tabs that has the content cutoff it does not correct the cutoff until you click away to a different tab then come back. I've attached screenshots and below is the code of how our components are layered this is spread across various components and just added all together for help in showing how we have things laid out.


    <Container layout="fit" align="left" padding={10}>
    <TabPanel
    id="appTabs"
    ref={tp => this.tabPanel = tp}
    _extreactIgnoreOrder
    shadow
    style={{ backgroundColor: 'white'}}
    activeItem={activeTab}
    tabBar={{
    height: 48,
    layout: {
    pack: 'left',
    overflow: 'scroller'
    },
    style: {
    paddingRight: '52px'
    }
    }}
    >
    //below is the container for each tab
    <Container
    title = {tab.title}
    tab = {{ flex: 1, maxWidth: 150 }}
    key = {tab.key}
    scrollable
    layout = { tab.key == "home" ? "center" : "fit" }
    closable = { tab.key == "home" ? false : true }
    onDestroy = {this.onCloseTab.bind(this, tab.key)}
    >
    ...Tab content is added at rendering depending on tab selected
    <Container layout="fit" >
    //in this particular example this is the component content added:
    <TabPanel
    id="adminTabs"
    flex={1}
    shadow
    defaults={{
    cls: "card",
    layout: "center"
    }}
    onActiveItemChange={this.handleTabClick}
    >
    <Container id="lookupsTab" title="Lookups" layout="center">
    //this content shows everthing correct
    <Container layout="fit" fullscreen><LookupsLanding/></Container>
    </Container>
    <Container id="usersTab" title="Users" layout="fit">
    //this content is showing grid cutoff
    <Container layout="fit" fullscreen><UsersLanding/></Container>
    </Container>
    </TabPanel>
    </Container>
    </Container
    </TabPanel>
    </Container>


    //This is the content for the LookupsLanding
    <Container scrollable >
    <Container >
    <FormPanel >
    <ComboBoxField
    ...settings
    />
    <Container >
    <LookupsGrid />
    </Container>
    </FormPanel>
    </Container>
    </Container>


    //This is the content for the UsersLanding
    <Container
    padding="10"
    layout="fit"
    scrollable
    >
    <UsersGrid />
    </Container>


    //The grids are wrapped component for consistency this what LookupsGrid and UsersGrid implement with different settings
    <Container layout="fit" >
    <OurGridWrapperComponent
    ...settings
    />
    </Container>

    //This is OurGridWrapperComponent which contians a search text box and third party grid
    <Container>
    <SearchField
    id={this.searchTxtId()}
    placeholder={this.props.searchPlaceholder}
    width={300}
    autoComplete={false}
    onChange={this.onFilterTextBoxChanged.bind(this)}
    />
    <Container layout="fit" className="ag-theme-balham">
    <div style={heightEmpty}> //This controls the grid height when grid is empty
    <ThirdPartyGrid...
    </div>
    </Container>
    </Container

  2. Ok after I posted this I played a little bit more with it. I think putting it all down in writing helped me figure out my issue. If I change padding of my main TabPanel (from 10 to 5) and then leave my UsersGrid layout to "auto" I get everything to display as I needed.

  3. #2
    Sencha User
    Join Date
    Mar 2019
    Posts
    16
    Answers
    4
    Vote Rating
    1
      0  

    Default

    After further testing the answer did not work. Seems like I was able to get some different behavior but still cuts off.

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
  •