Results 1 to 4 of 4

Thread: Header Layout only works if resized

  1. #1
    Sencha User
    Join Date
    Aug 2016
    Posts
    14
    Answers
    1

    Default Header Layout only works if resized

    Hi everybody!

    I'm quite new to Sencha and I'm still doing some tests with it, so... I'm probably making many mistakes

    I'm trying to create a header with a logo, but it doesn't quite fit the screen when it loads. After I resize (ctrl + mouse wheel up and down) it goes back to normal.

    Here is what happens:

    before resize:
    before resize.jpg
    after resize:
    after resize.jpg


    I really don't know why it happens...
    Here is my code:

    Main.js
    Code:
    Ext.define('PlataformaAvaliacao.view.main.Main', {
        extend: 'Ext.container.Viewport',
        xtype: 'app-main',
    
    
        requires: [
               'Ext.button.Segmented',
               'Ext.list.Tree',
               'PlataformaAvaliacao.view.main.MainController',
               'PlataformaAvaliacao.view.main.MainModel'
        ],
    
    
        controller: 'main',
        viewModel: 'main',
    
    
        cls: 'sencha-dash-viewport',
        itemId: 'mainView',
        
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
       
       
        items: [
                
            //cabeçalho com logo da fazenda e título
            {
                xtype: 'toolbar',
                cls: 'toolbar-titulo-logo',    
                itemId: 'headerBar',
                height: 120,
                items: [
                    {
                        xtype: 'component',
                           reference: 'fazendaLogo',
                           cls: 'fazenda-logo-principal',
                           html: '<div class="main-logo"><img src="resources/images/logo_fazenda.png" style="height:80px"></div>'      
                    },
                    {
                        xtype: 'component',
                           reference: 'fazendaTitulo',
                           cls: 'fazenda-titulo',
                           html: '<div class="main-titulo"><h1>Secretaria da Fazenda</h1><h2>Plataforma de Avaliação</h2></div>'      
                    },
                    '->',
                    {
                        xtype: 'component',
                           reference: 'fazendaLogoMenor',
                           cls: 'fazenda-logo-menor',
                           html: '<div class="right-logo"><img src="resources/images/logoEstado.png"></div>'      
                    }
                 ]
            },


    Main.scss
    Code:
    // cabeçalho
    .toolbar-titulo-logo {
        background-color:#ffd400;
        margin: 2px 0;
    }
        
    .fazenda-logo-principal .main-logo img {
        margin-left:8px;
        margin-right:22px;
        top:8px;
        bottom:8px;
    }
    
    
    .fazenda-titulo h1 {
        padding: 15px 0 0 0px;
        font-size: 1.4em;
        margin: 0;
        line-height: 1em;
    }
    
    
    .fazenda-titulo h2 {
        padding: 5px 0 0 0px;
        font-size: 1.4em;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: -.5px;
        color: #000;
        margin: 0;
        line-height: 1em;
    }

    Thanks a lot!

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Browser zoom is not supported in Ext JS, I believe due to some browsers' tendency to misreport sizes. Perhaps you are starting at a zoom level other than 100%?

  3. #3
    Sencha User
    Join Date
    Aug 2016
    Posts
    14
    Answers
    1

    Default

    Thanks!
    I found a solution. If I set a width value for the logo component it stops.

    Thanks for your answer!

  4. #4
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    The problem is that if it's auto width, when the component lays out it doesn't know the size of the image until it loads. That's why setting a fixed width works.

Similar Threads

  1. Column width is not adjusted when grid header is resized in IE8
    By DroidIn.net in forum Sencha Architect 2.x: Bugs
    Replies: 0
    Last Post: 18 Jun 2012, 2:05 PM
  2. [CLOSED] Border layout panels can't be resized in IE9
    By LisburnLad in forum Ext:Bugs
    Replies: 1
    Last Post: 19 Nov 2011, 3:10 PM
  3. Replies: 2
    Last Post: 14 Sep 2011, 7:45 AM
  4. How to get notification when Layout is resized
    By kitepad in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 27 Mar 2007, 12:44 AM
  5. Grid header vanish when region is resized
    By rodiniz in forum Ext 1.x: Bugs
    Replies: 0
    Last Post: 7 Nov 2006, 4:20 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
  •