1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    17
    Vote Rating
    0
    Answers
    1
    XPEHBAM is on a distinguished road

      0  

    Default Unanswered: Adjusting text margins on panel header

    Currently, I have my headers styled like this:

    header.png

    The issue here is that there is space at the bottom and left of the text. I would like to have there be no space on left and about 5px at the bottom. I cannot find a way to do this. The margins and padding seem to already be at 0. I tried experimenting with
    Code:
    top: 10px
    , however it only works when editing the CSS in Chrome developer tools. The header does not pick it up from the CSS and reverts to auto. Moreover, adjusting top seems to mess other alignments up somewhat.

  2. #2
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    313
    Vote Rating
    35
    Answers
    35
    EPV has a spectacular aura about EPV has a spectacular aura about

      1  

    Default

    Something like this?

    http://jsfiddle.net/EmilPennlov/7QCSt/1/

    Good luck / E

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    17
    Vote Rating
    0
    Answers
    1
    XPEHBAM is on a distinguished road

      0  

    Default

    I took your advice and used:

    Code:
    .myPanel.x-panel-header-horizontal {   padding: 0 0 0 0;
    }
    header.png

    However, there is some space vertically. I am using size 10px font, so it isn't as filled as yours. Is there a way to adjust height?

    Code:
    .myPanel.x-panel-header {    background-color:#FFFFFF; 
        background-image:none;
        height: 14px;
    }
    is not doing it for me.

  4. #4
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    313
    Vote Rating
    35
    Answers
    35
    EPV has a spectacular aura about EPV has a spectacular aura about

      0  

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    17
    Vote Rating
    0
    Answers
    1
    XPEHBAM is on a distinguished road

      0  

    Default

    For some reason adjusting line-height only works when it's done in real time (developer tools). When I set line-height to the proper amount in the css file, the text gets drawn in the exact same place. Increasing the the line-height further in real time then adjusts it down.

  6. #6
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    313
    Vote Rating
    35
    Answers
    35
    EPV has a spectacular aura about EPV has a spectacular aura about

      0  

    Default

    What is the difference with your code and the Fiddle above?

    Maybe "important" can help you:
    Code:
    line-height:10px !important!

  7. #7
    Sencha User
    Join Date
    Mar 2013
    Posts
    17
    Vote Rating
    0
    Answers
    1
    XPEHBAM is on a distinguished road

      0  

    Default

    Unfortunately,
    Code:
    !important
    does not help.

    My code is like this:

    Code:
    Ext.define('mytype', {    extend: 'Ext.panel.Panel',
    
    
        initComponent: function() {
            Ext.apply(me, {
                title: 'NOTIFICATION SUBSCRIPTION',
                cls: 'myPanel',
                height: 125,
                resizeable: 'false',
                items: this.createItems(),
                border: false
            });
    
    
            me.callParent();
        },
        
        createItems: function() {
            ...
        }
    
    
    });
    I have several of those panels in a VBOX layout.

    Code:
    .myPanel .x-panel-body {    border-top-color:#000000;
    }
    
    
    .myPanel .x-panel-header {
        background: none;
        background-image:none;
    }
    
    
    .myPanel .x-panel-header-horizontal {
       padding: 0 0 0 0;
    }
    
    
    .myPanel .x-panel-header-text {
       font-size: 12px; font-weight: normal; color: #b5b5b5;
       line-height: 25px; !important; 
    }
    Copying code for the single panel into JSfiddle renders it correctly there... Perhaps I have some inherited CSS that is preventing it from being rendered correctly.

Thread Participants: 1

Tags for this Thread