Grid CommandItem alignment

[MBEN]

I am having trouble getting the commanditem to align with the rest of the grid.
Please see the attached screenshot.

Below is my grid css

/*Telerik RadGrid Telerik Skin*/

/*global*/

.RadGrid_MBen
{
    border:0px !important;
    background:#fff;
    color:#000;
}

.RadGrid_MBen, .RadGrid_MBen .rgMasterTable, .RadGrid_MBen .rgDetailTable, .RadGrid_MBen .rgGroupPanel table, .RadGrid_MBen .rgCommandRow table, .RadGrid_MBen .rgEditForm table, .RadGrid_MBen .rgPager table, .GridToolTip_MBen
{
    font: 10px/16px Verdana, Arial, Helvetica, sans-serif;
    border-right: 1px;
    border-left: 1px;
    border-bottom: 0px;
    border-top: 0px;
    border: thin solid #FFF;
}

.rgCommandRow table
{
    border-bottom: thin none #FFF;
    border-bottom-width: 0px !important;
}

.RadGrid_MBen .rgAdd,
.RadGrid_MBen .rgRefresh,
.RadGrid_MBen .rgEdit,
.RadGrid_MBen .rgDel,
.RadGrid_MBen .rgFilter,
.RadGrid_MBen .rgPagePrev,
.RadGrid_MBen .rgPageNext,
.RadGrid_MBen .rgPageFirst,
.RadGrid_MBen .rgPageLast,
.RadGrid_MBen .rgExpand,
.RadGrid_MBen .rgCollapse,
.RadGrid_MBen .rgSortAsc,
.RadGrid_MBen .rgSortDesc,
.RadGrid_MBen .rgUpdate,
.RadGrid_MBen .rgCancel,
.RadGrid_MBen .rgUngroup,
.RadGrid_MBen .rgExpXLS,
.RadGrid_MBen .rgExpDOC,
.RadGrid_MBen .rgExpPDF,
.RadGrid_MBen .rgExpCSV
{
    background-image:url('Grid/sprite.gif');
}

/*header*/

.RadGrid_MBen .rgHeaderDiv
{
    background:#eee 0 -8050px repeat-x url('Grid/sprite.gif');
}
.rgTwoLines .rgHeaderDiv
{
    background-position:0 -7550px;
}

.RadGrid_MBen .rgHeader, .RadGrid_MBen th.rgResizeCol
{
    background-position: 0 100%;
    background: #4c6696 repeat-x 0 100%;
    height: 16px;
    color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 1px 2px 1px 2px !important;
    font-size: 10px;
    border-top-color: #4c6696;
    border-right-color: #ffffff;
    border-bottom-color: #4c6696;
    border-width: 0px 1px 0px 0px;
    border-right-style: solid;
}

.RadGrid_MBen th.rgSorted
{
    background-color:#a6e193;
    background-position:0 -2600px;
}

.RadGrid_MBen .rgHeader, .RadGrid_MBen .rgHeader a
{
    color: #ffffff;
    font-weight:bold;
}

/*rows*/

.RadGrid_MBen .rgRow td,
.RadGrid_MBen .rgAltRow td,
.RadGrid_MBen .rgEditRow td,
.RadGrid_MBen .rgFooter td
{
    border-style:solid;
    border-width:0 0 1px 0;
    padding: 2px 2px 2px 2px;
}

.RadGrid_MBen .rgRow td
{
    border-color:#fff;
}

.RadGrid_MBen .rgAltRow
{
    background: #b3bdd2;
}

.RadGrid_MBen .rgAltRow td
{
    border-color:#b3bdd2;
}

.RadGrid_MBen .rgRow .rgSorted,
.RadGrid_MBen .rgAltRow .rgSorted
{
    border-color:#d7f8cc;
    background-color:#d7f8cc;
}

.RadGrid_MBen .rgSelectedRow .rgSorted,
.RadGrid_MBen .rgActiveRow .rgSorted,
.RadGrid_MBen .rgHoveredRow .rgSorted,
.RadGrid_MBen .rgEditRow .rgSorted
{
    background-color:transparent;
}

.RadGrid_MBen .rgRow a, .RadGrid_MBen .rgAltRow a, .RadGrid_MBen .rgEditRow a, .RadGrid_MBen .rgEditForm a
{
    color: #005BE6;
}


.RadGrid_MBen .rgFooter a
{
    color: #ffffff;
    font-weight:bold;
}

.RadGrid_MBen .rgSelectedRow
{
    background:#63ac38 0 -3900px repeat-x url('Grid/sprite.gif');
}
*+html .RadGrid_MBen .rgSelectedRow .rgSorted{background-color:#63ac38}
* html .RadGrid_MBen .rgSelectedRow .rgSorted{background-color:#63ac38}

.RadGrid_MBen .rgActiveRow,
.RadGrid_MBen .rgHoveredRow
{
    background:#a2ea8b 0 -2900px repeat-x url('Grid/sprite.gif');
}
*+html .RadGrid_MBen .rgActiveRow .rgSorted,
*+html .RadGrid_MBen .rgHoveredRow .rgSorted{background-color:#a2ea8b}
* html .RadGrid_MBen .rgActiveRow .rgSorted,
* html .RadGrid_MBen .rgHoveredRow .rgSorted{background-color:#a2ea8b}

.RadGrid_MBen .rgEditRow
{
    background:#fff 0 -4900px repeat-x url('Grid/sprite.gif');
}
*+html .RadGrid_MBen .rgEditRow .rgSorted{background-color:#fff}
* html .RadGrid_MBen .rgEditRow .rgSorted{background-color:#fff}

.RadGrid_MBen .rgActiveRow td,
.RadGrid_MBen .rgActiveRow td.rgSorted,
.RadGrid_MBen .rgHoveredRow td,
.RadGrid_MBen .rgHoveredRow td.rgSorted
{
    border-bottom-color:#28a800;
}

.RadGrid_MBen .rgSelectedRow td,
.RadGrid_MBen .rgSelectedRow td.rgSorted
{
    border-bottom-color:#155800;
}

.RadGrid_MBen .rgEditRow td,
.RadGrid_MBen .rgEditRow td.rgSorted
{
    border-bottom-color:#333;
}

.RadGrid_MBen .rgDrag
{
    background-image:url('Grid/rgDrag.gif');
}

/*footer*/

.RadGrid_MBen .rgFooterDiv, .RadGrid_MBen .rgFooter
{
    background-position: #4c6696;
    background: #4c6696;
}

.RadGrid_MBen .rgFooter td
{
    border-top:1px solid #828282;
    border-bottom:1px solid #fff;
}

/*status*/

.RadGrid_MBen .rgStatus
{
    border:1px solid;
    border-color:#828282 #c9c9c9 #eee #c9c9c9;
    border-left-width:0;
}

.RadGrid_MBen .rgStatus div
{
    background-image:url('Common/loading_small.gif');
}

/*pager*/

.RadGrid_MBen .rgPager
{
    background:#eee;
}

.RadGrid_MBen td.rgPagerCell
{
    border:1px solid;
    border-color:#828282 #eee #eee;
    border-right-width:0;
}

.RadGrid_MBen .rgInfoPart
{
    color:#8a8a8a;
}

.RadGrid_MBen .rgInfoPart strong
{
    color:#4c4e54;
}

.RadGrid_MBen .rgPageFirst
{
    background-position:0 -550px;
}
.RadGrid_MBen .rgPageFirst:hover
{
    background-position:0 -600px;
}
.RadGrid_MBen .rgPagePrev
{
    background-position:0 -700px;
}
.RadGrid_MBen .rgPagePrev:hover
{
    background-position:0 -750px;
}
.RadGrid_MBen .rgPageNext
{
    background-position:0 -850px;
}
.RadGrid_MBen .rgPageNext:hover
{
    background-position:0 -900px;
}
.RadGrid_MBen .rgPageLast
{
    background-position:0 -1000px;
}
.RadGrid_MBen .rgPageLast:hover
{
    background-position:0 -1050px;
}

.RadGrid_MBen .rgPager .rgPagerButton
{
    border-color:#d0d0d0 #aeaeae #8b8b8b;
    background:#eee repeat-x 0 -1550px url('Grid/sprite.gif');
    color:#000;
    font:12px/12px Verdana, Arial, Helvetica, sans-serif;
}

.RadGrid_MBen .rgNumPart a:hover,
.RadGrid_MBen .rgNumPart a:hover span,
.RadGrid_MBen .rgNumPart a.rgCurrentPage,
.RadGrid_MBen .rgNumPart a.rgCurrentPage span
{
    background:no-repeat url('Grid/sprite.gif');
}

.RadGrid_MBen .rgNumPart a
{
    color:#000;
}

.RadGrid_MBen .rgNumPart a:hover
{
    background-position:100% -1250px;
}

.RadGrid_MBen .rgNumPart a:hover span
{
    background-position:0 -1150px;
}

.RadGrid_MBen .rgNumPart a.rgCurrentPage,
.RadGrid_MBen .rgNumPart a.rgCurrentPage:hover
{
    background-position:100% -1450px;
}

.RadGrid_MBen .rgNumPart a.rgCurrentPage span,
.RadGrid_MBen .rgNumPart a.rgCurrentPage:hover span
{
    background-position:0 -1350px;
}

/*sorting, reordering*/

.RadGrid_MBen .rgHeader .rgSortAsc
{
    background-position:3px -248px;
    height:10px;
}

.RadGrid_MBen .rgHeader .rgSortDesc
{
    background-position:3px -198px;
    height:10px;
}

.GridReorderTop_MBen,
.GridReorderBottom_MBen
{
    background:0 0 no-repeat url('Grid/sprite.gif');
}

.GridReorderBottom_MBen
{
    background-position:0 -50px;
}

/*filtering*/

.RadGrid_MBen .rgFilterRow
{
    background:#eee;
}

.RadGrid_MBen .rgFilterRow td
{
    border-bottom:1px solid #828282;
    padding:2px;
}

.RadGrid_MBen .rgFilter
{
    background-position:0 -300px;
}

.RadGrid_MBen .rgFilter:hover
{
    background-position:0 -350px;
}

.RadGrid_MBen .rgFilterActive,
.RadGrid_MBen .rgFilterActive:hover
{
    background-position:0 -400px;
}

.RadGrid_MBen .rgFilterBox
{
    border-color:#8e8e8e #c9c9c9 #c9c9c9 #8e8e8e;
    font:10px Verdana, Arial, Helvetica, sans-serif;
    color:#333;
}

/*filter context menu*/

.RadMenu_MBen .rgHCMClear,
.RadMenu_MBen .rgHCMFilter
{
    border-color:#ccc #999 #a8a8a8;
    background:#eee center -23px repeat-x url('FormDecorator/ButtonSprites.png');
    color:#000;
    font-family:"segoe ui",arial,sans-serif;
}

.RadMenu_MBen .rgHCMClear:hover,
.RadMenu_MBen .rgHCMFilter:hover
{
    border-color:#2ebf00 #2bb500 #28a800;
    background-position:center -67px;
    background-color:#a2ea8b;
}

/*context menu*/

.GridContextMenu_MBen .rmLeftImage
{
    background-image:url('../Common/Grid/contextMenu.gif');
}

.GridContextMenu_MBen .rgHCMSortAsc .rmLeftImage
{
    background-position:0 0;
}

.GridContextMenu_MBen .rgHCMSortDesc .rmLeftImage
{
    background-position:0 -40px;
}

.GridContextMenu_MBen .rgHCMUnsort .rmLeftImage
{
    background-position:0 -80px;
}

.GridContextMenu_MBen .rgHCMGroup .rmLeftImage
{
    background-position:0 -120px;
}

.GridContextMenu_MBen .rgHCMUngroup .rmLeftImage
{
    background-position:0 -160px;
}

.GridContextMenu_MBen .rgHCMCols .rmLeftImage
{
    background-position:0 -200px;
}

.GridContextMenu_MBen .rgHCMFilter .rmLeftImage
{
    background-position:0 -240px;
}

.GridContextMenu_MBen .rgHCMUnfilter .rmLeftImage
{
    background-position:0 -280px;
}

/*grouping*/

.RadGrid_MBen .rgGroupPanel
{
    border:0;
    border-bottom:1px solid #828282;
    background:#eee 0 -1900px repeat-x url('Grid/sprite.gif');
}

.RadGrid_MBen .rgGroupPanel td
{
    border:0;
    padding:3px 4px;
}

.RadGrid_MBen .rgGroupPanel td td
{
    padding:0;
}

.RadGrid_MBen .rgGroupPanel .rgSortAsc
{
    background-position:4px -143px;
}

.RadGrid_MBen .rgGroupPanel .rgSortDesc
{
    background-position:4px -93px;
}

.RadGrid_MBen .rgUngroup
{
    background-position:0 -7498px;
}

.RadGrid_MBen .rgGroupItem
{
    border:1px solid;
    border-color:#d0d0d0 #bdbdbd #8a8a8a;
    background:#e8e8e8 0 -6500px repeat-x url('Grid/sprite.gif');
}

.RadGrid_MBen .rgMasterTable td.rgGroupCol, .RadGrid_MBen .rgMasterTable td.rgExpandCol
{
    background-position: #FFFFFF none;
    background: #FFFFFF none;
}

.RadGrid_MBen .rgGroupHeader,
.RadGrid_MBen .rgGroupHeader td.rgGroupCol
{
    background:#d2f8c5 0 -7000px repeat-x url('Grid/sprite.gif');
}

.RadGrid_MBen .rgGroupHeader
{
    font-size:1.1em;
    line-height:21px;
}

.RadGrid_MBen .rgGroupHeader td
{
    border-bottom:1px solid #98ec7d;
}

.RadGrid_MBen .rgExpand
{
    background-position:5px -496px;
}

.RadGrid_MBen .rgCollapse
{
    background-position:3px -444px;
}

/*editing*/

.RadGrid_MBen .rgEditForm
{
    border-bottom:1px solid #828282;
}

.RadGrid_MBen .rgUpdate
{
    background-position:0 -1800px;
}

.RadGrid_MBen .rgCancel
{
    background-position:0 -1850px;
}

/*hierarchy*/

.RadGrid_MBen .rgDetailTable
{
    border-color:#828282;
}

/*command row*/

.RadGrid_MBen .rgCommandRow
{
    background:#b5b5b5 0 -2099px repeat-x url('Grid/sprite.gif');
    color:#000;
}

.RadGrid_MBen .rgCommandCell
{
    border:0;
    padding:0;
}

.RadGrid_MBen thead .rgCommandCell
{
    /*border-bottom:1px solid #8b8b8b;*/
}

.RadGrid_MBen tfoot .rgCommandCell,
.RadGrid_MBen .rgMasterTable>tbody>tr.rgCommandRow .rgCommandCell
{
    border-top:1px solid #a1a1a1;
}

.RadGrid_MBen .rgCommandTable td
{
    border:0;
    padding:2px 7px;
}

.RadGrid_MBen .rgCommandTable
{
    border:1px solid;
    border-color:#f5f5f5 #e4e4e4 #d5d5d5;
}

.RadGrid_MBen .rgCommandRow a
{
    color:#000;
    text-decoration:none;
}

.RadGrid_MBen .rgAdd
{
    margin-right:3px;
    background-position:0 -1650px;
}

.RadGrid_MBen .rgRefresh
{
    margin-right:3px;
    background-position:0 -1600px;
}

.RadGrid_MBen .rgEdit
{
    background-position:0 -1700px;
}

.RadGrid_MBen .rgDel
{
    background-position:0 -1750px;
}

.RadGrid_MBen .rgExpXLS,
.RadGrid_MBen .rgExpDOC,
.RadGrid_MBen .rgExpPDF,
.RadGrid_MBen .rgExpCSV
{
    background-image:url('../Common/Grid/export.gif');
}

.RadGrid_MBen .rgExpXLS
{
    background-position:0 0;
}
.RadGrid_MBen .rgExpDOC
{
    background-position:0 -50px;
}
.RadGrid_MBen .rgExpPDF
{
    background-position:0 -100px;
}
.RadGrid_MBen .rgExpCSV
{
    background-position:0 -150px;
}

/*multirow select*/

.GridRowSelector_MBen
{
    background:#155800;
}

/*row drag n drop*/

.GridItemDropIndicator_MBen
{
    border-top:1px dashed #155800;
}

/*tooltip*/

.GridToolTip_MBen
{
    border:1px solid #828282;
    padding:3px;
    background:#fff;
    color:#000;
}

/*rtl*/

.RadGridRTL_MBen .rgPageFirst
{
    background-position:0 -1000px;
}
.RadGridRTL_MBen .rgPageFirst:hover
{
    background-position:0 -1050px;
}
.RadGridRTL_MBen .rgPagePrev
{
    background-position:0 -850px;
}
.RadGridRTL_MBen .rgPagePrev:hover
{
    background-position:0 -900px;
}
.RadGridRTL_MBen .rgPageNext
{
    background-position:0 -700px;
}
.RadGridRTL_MBen .rgPageNext:hover
{
    background-position:0 -750px;
}
.RadGridRTL_MBen .rgPageLast
{
    background-position:0 -550px;
}
.RadGridRTL_MBen .rgPageLast:hover
{
    background-position:0 -600px;
}

.RadGridRTL_MBen .rgExpand
{
    background-position:-20px -496px;
}

[Mira]

Hello Mben,

I have tested your skin and I cannot see any problems with it - the output is the same as in the picture.
Please let me know whether this is the desired look and if it is not - what do want to achieve?

I am looking forward to your reply.

Kind regards,
Mira
the Telerik team

[MBEN]

When you look at the picture the header looks a pixel to the right of the rest of the grid.
I want my header to be aligned well with the grid.

[Mira]

Hello Mben,

If the problems are the parentheses pointed out below, please increase the width of the corresponding column:


I hope this helps.

Regards,
Mira
the Telerik team

[MBEN]

I am sorry I did not mean the header.
I meant the commanditem display. So in the picture the commanditemdisplay looks a pixel off from the left.
It does not align with the rest of the grid.

[Galin]

Hello Mben,

This space comes from the border-right of the commandTable. Therefore, reset it with the following CSS:

.RadGrid_MBen .rgClipCells .rgCommandTable
{
    border-left: 0;
}

I hope it helps.

Regards,
Galin
the Telerik team

[MBEN]

Thanks.
That helped.