This is a migrated thread and some comments may be shown as answers.

Grid CommandItem alignment

6 Answers 34 Views
Grid
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 1
Veteran
MBEN asked on 02 Dec 2011, 06:07 AM
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;
}

6 Answers, 1 is accepted

Sort by
0
Mira
Telerik team
answered on 06 Dec 2011, 10:25 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
MBEN
Top achievements
Rank 1
Veteran
answered on 06 Dec 2011, 10:15 PM
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.
0
Mira
Telerik team
answered on 07 Dec 2011, 03:22 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
MBEN
Top achievements
Rank 1
Veteran
answered on 07 Dec 2011, 07:14 PM
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.
0
Galin
Telerik team
answered on 09 Dec 2011, 11:45 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
MBEN
Top achievements
Rank 1
Veteran
answered on 12 Dec 2011, 08:03 PM
Thanks.
That helped.
Tags
Grid
Asked by
MBEN
Top achievements
Rank 1
Veteran
Answers by
Mira
Telerik team
MBEN
Top achievements
Rank 1
Veteran
Galin
Telerik team
Share this question
or