Results 1 to 7 of 7

Thread: Tab panel and Grid height is not setting properly

  1. #1

    Default Tab panel and Grid height is not setting properly

    Simple tab panel or grid is not setting height automatically based on inside content in chrome browser. 45

    import React, { Component } from 'react'
    import { Container, TabPanel } from '@extjs/ext-react';


    export default class MyExample extends Component {
    render() {
    return (
    <TabPanel>
    <Container title="Tab 1">
    This is content for Tab 1!
    </Container>
    <Container title="Tab 2">
    This is content for Tab 2!
    </Container>
    <Container title="Tab 3">
    This is content for Tab 3!
    </Container>
    </TabPanel>
    )
    }
    }

  2. #2
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    Grids must be given an explicit height or have their height set by the parent component's layout. As for tabs, looks like it's working for me: https://fiddle.sencha.com/?extreact#...or&fiddle/26o6

  3. #3

    Default

    Hi Mark,

    I was set grid height as auto and i am expecting based on grid row. it height get auto adjust. but it is not happening.

    Basically I am plan to design single scroll applications. but problem is Tabpanel and grid has own scroll. so application has more scroll. for avoid this I plan to set auto height for tab and grid. Tab is working after some css changes. but Grid is not working. properly.

    Is there any way to increase grid height based on grid row

    https://fiddle.sencha.com/?extreact#...or&fiddle/26p6

  4. #4
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    No, grids always need either an explicit height or they need to get a height from the parent container's layout.

  5. #5

    Default

    Hi Mark,

    Is there any possible way to make single scroll application with grid. Just like overriding Grid CSS.

  6. #6
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    Actually, I stand corrected. You can use height="auto" and infinite={false} to have the grid size to content.

    https://fiddle.sencha.com/?extreact#...or&fiddle/26u5

  7. #7

    Default

    Thanks Mark it is looks good

Similar Threads

  1. Setting height of Panel to accomodate Grids
    By harjits in forum Ext: Q&A
    Replies: 14
    Last Post: 2 Nov 2012, 5:42 AM
  2. setting the inner panel height
    By nanich in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 14 Jul 2008, 11:31 PM
  3. Dynamically setting the height of a panel
    By NotChris in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 6 Mar 2008, 8:00 AM
  4. Setting Grid height inside a panel
    By israelws in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 Oct 2007, 5:29 AM

Posting Permissions

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