Results 1 to 4 of 4

Thread: Dashboard Column Alignment Issue

    You found a bug! We've classified it as EXTJS-18754 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2015

    Default Dashboard Column Alignment Issue

    Issue occurs in Ext JS

    Ext version tested:

    • Ext

    Browser versions tested against:
    • FireFox 39

    DOCTYPE tested against:
    • HTML

    • Right side of panels in columns are not aligned.

    Steps to reproduce the problem:

    The result that was expected:
    • Right side of panels in columns are aligned.

    The result that occurs instead:
    • Right side of panels in columns are not aligned.
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Feb 2013


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3

    Default Any solution for this bug?

    Any solution for this bug?

  4. #4
    Sencha User
    Join Date
    Jun 2010
    vancouver, bc, canada

    Default I fixed this bug by using a work around

    The idea is using the margin width when layout and reset the margin width and splitter width after the layout.

    Basicly, you add a margin-left style to all the columns as following:

    .x-dashboard-column {
    padding: 0 0 0 0;
    margin-left: 7px}

    change the function following in the dashboardLayout.js. This will set the columnsplitter width to 0
    when creating it.
    getSplitterConfig: function () {
    return {
    xtype: 'columnsplitter',
    width: 0

    After finishlayout, reset the margin to 0, and set splitter width to the margin width
    finishedLayout: function (ownerContext) {
    var items = ownerContext.childItems,
    len = items.length,
    box, child, i, target, row;


    //set column width
    for (i = 0; i < len; i += 2) {
    //target is the column
    target = (child = items[i]).target;
    box = target.lastBox;
    row = child.row;
    row.maxHeight = Math.max(row.maxHeight, box.height);

    // Put this on the component so that it gets saved (we use this to fix up
    // columnWidth on restore)
    target.width = box.width;

    //reset splitter height
    for (i = 1; i < len; i += 2) {
    target = (child = items[i]).target;
    if (!child.orphan) {

Similar Threads

  1. [CLOSED] GXT 3.0.1 grid has column alignment issue on Chrome
    By henry_x in forum Sencha GXT Bugs
    Replies: 3
    Last Post: 2 May 2017, 5:59 AM
  2. Replies: 1
    Last Post: 10 Sep 2014, 2:53 PM
  3. Column alignment issue in Grid after header re alignment
    By kalel in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 19 Dec 2007, 4:04 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