Results 1 to 6 of 6

Thread: Can't add border to docked bottom toolbar

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member MichaelOstrovsky's Avatar
    Join Date
    May 2008
    Location
    Tel Aviv, Israel
    Posts
    144

    Default Can't add border to docked bottom toolbar

    Hi,
    I can't add top border to a docked bottom bar.

    I created a new ui :


    // UI for window bottom toolbar
    @include extjs-toolbar-ui (
    $ui: 'cp-window-bbar',
    $background-color: transparent,
    $border-color: $cp-border-color,
    $border-width: 1px 0 0 0
    );

    and add it to window during initComponent:


    this.dockedItems = Ext.Array.push(this.dockedItems, {
    xtype: 'toolbar',
    dock: 'bottom',
    ui: 'cp-window-bbar',
    items: buttons
    });

    But no border is shown. The reason is that theme-base enforces zero borders on docked items :

    ext\classic\theme-base\sass\src\layout\component\Dock.scss

    .#{$prefix}docked-bottom {
    border-top-width: 0 !important;
    }

    I'll have to forcefully override this rule to add the top-border to a docked toolbar, and I think this forced rule in ExtJS classic theme-base is incorrect and should be removed.

    ExtJS version: 6.0.2 Classic
    Environment: Any

    Thanks!

  2. #2
    Sencha Premium Member
    Join Date
    Mar 2015
    Location
    Raleigh, NC
    Posts
    47

    Default

    I'm having this exact same issue. Can't get borders to show up in a docked panel.
    Not sure what is triggering this .x-noborder-trbl CSS class.

    /* ext/classic/theme-base/sass/src/layout/component/Dock.scss:101 */
    .x-noborder-trbl {
    border-width: 0 !important;
    }

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    914

    Default

    Check Panel override in Neptune theme (overrides/panel/Panel.js).

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2015
    Location
    Raleigh, NC
    Posts
    47

    Default

    Quote Originally Posted by hakimio View Post
    Check Panel override in Neptune theme (overrides/panel/Panel.js).
    This override appears to be only for a panel, and doesn't have an effect on docked items that are marked with !important flags.
    Code:
    /* ext/classic/theme-base/sass/src/layout/component/Dock.scss */
    .#{$prefix}docked-bottom {
        border-top-width: 0 !important;
    }
    Anyone have an override that can cancel out this !important designation or any of them?

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    914

    Default

    Have you checked Toolbar override?

  6. #6
    Sencha User
    Join Date
    Apr 2013
    Posts
    914

    Default

    Here are a couple of overrides for Neptune/Triton derived themes which will reintroduce all the missing borders:
    PHP Code:
    Ext.define('Ext.theme.MyTheme.panel.Panel', {
        
    override'Ext.panel.Panel',
        
        
    bordertrue,
        
    bodyBordertrue,
        
        
    initBorderProps: function() {
            var 
    me this;

            if (
    me.frame && me.border && me.bodyBorder === undefined) {
                
    me.bodyBorder false;
            }
            if (
    me.frame && me.border && (me.bodyBorder === false || me.bodyBorder === 0)) {
                
    me.manageBodyBorders true;
            }
        },
        
        
    initBodyBorder: function() {
            var 
    me this;

            if (
    me.frame && me.bodyBorder) {
                if (!
    Ext.isNumber(me.bodyBorder)) {
                    
    me.bodyBorder 1;
                }
                
    me.getProtoBody().setStyle('border-width'this.unitizeBox(me.bodyBorder));
            }
        }
    }); 
    PHP Code:
    Ext.define('Ext.theme.MyTheme.toolbar.Toolbar', {
        
    override'Ext.toolbar.Toolbar',

        
    usePlainButtonsfalse,
        
    bordertrue
    }); 

Similar Threads

  1. [RC1] bottom border of toolbars docked 'top'
    By slemmon in forum Ext: 4.x Beta
    Replies: 10
    Last Post: 18 Apr 2012, 9:00 PM
  2. Toolbar not shown when docked at bottom
    By santiago in forum Sencha Touch 2.x: Q&A
    Replies: 7
    Last Post: 27 Mar 2012, 12:03 PM
  3. Panel does not resize after hiding toolbar docked at the bottom
    By sench23 in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 11 Feb 2011, 1:33 PM
  4. 1.0 - toolbar docked to bottom too low in iOS 4.2 when compiled in PhoneGap
    By mherger in forum Sencha Touch 1.x: Discussion
    Replies: 13
    Last Post: 7 Jan 2011, 3:50 PM

Posting Permissions

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