CODEWITHSUNDEEP
javascriptcssheightsencha-touch-2
Jez D
Jez D

Reputation: 1489

sencha touch: container height needs to fit content

I have the following view in Sencha Touch. The view creates a popup box, which appears from the right when a button in the bottom toolbar is clicked:

Ext.define('TheApp.view.PopupTablet',{  
 extend: 'Ext.form.Panel',  
    xtype: 'popupbox',  
    config:{  
        itemId: 'popbox',  
        floating: true,  
        centered: true,  
        modal: true,  
        layout: {
            type: 'vbox'
        },
        id: 'popup',  
        showAnimation: { type: 'slide', direction: 'left'},  
        styleHtmlContent: true,  
        html: 'Please select',  
        items:[{  
            xtype: 'button',  
            action: 'hide',  
            text: 'Close',  
            ui: 'confirm',  
            docked: 'bottom',  
        }]  
    }  
});

In the controller, I have the following code, which created the popup, adds it to the view port and then adds its content before 'showing' it:

showPopup: function(){  
         var popup = this.getPopup();  
          Ext.Viewport.add(popup); 
          Ext.getCmp('popup').add(siteButts); 
          popup.show();  
      },

Now, this all works as required. The content is contained in an array called siteButts which is created in a different script. This bit works fine.

Where I am having problems is that I need to popup box heigh to expand with the content. I have tried not setting the height, and I have tried:

#popup{
    height: auto;
}

but neither does the trick - in fact, both seem to collapse the container.

If I set the height to a fixed value (eg height: 10em), then that does set the height to the specified value. However, as we cannot determine the amount of data being used in the content, I need to have the height to stretch.

I want the entire content to be visible, without a scrollbar on the popup

Suggestions will be most welcome.

Upvotes: 1

Views: 994

Answers (1)

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

This can be done if its config property 'scrollable' is set to false.And using the following css code

#popup .x-scroll-scroller,#popup .x-scroll-container{
position:relative;
}

Upvotes: 2

Related Questions