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

Having trouble with grid css

4 Answers 148 Views
Grid
This is a migrated thread and some comments may be shown as answers.
newbie
Top achievements
Rank 1
newbie asked on 06 Feb 2009, 07:07 PM

Sorry for the big post but I am having some troubles with the css of my grid and I am unable to figure out what is wrong.

when my grid is loaded my mastertable seems to be shifted a little to the right and there seems to be a div underneath. That is I see some empty space before my grid header starts.


Name Employer/Title EMail/Website Phone Preferred Address
Susan (Susan)
Spouse: John (John)
Senior Project Manager abc@gmail.com

Direct Line : (503)414-7082
Business Fax : (503)238-1621


125 NW Couch Street
Portland, OR 97209
 
John (John)
ContactType: Person Type: Staff Spouse: Susan (Susan)
Executive Vice President
abc@gmail.com




Business : (503)276-1592

Business Fax : (503)213-5885
30 NW 11th Avenue
Portland, OR 97209
 



It's not visible in this screen shot but the space is to the left of the header.

Also, all my data is towards the right of the cell ... I want it to be center aligned but unable to achieve that with my css.

My css looks like this

 

/* Telerik RadGrid Telerik / embedded skin */

 

 

 

.RadGrid_MLightning

 

 

 

{

 

 

background: #F9F9F9;

 

 

 

border: solid 1px #b1b1b1;

 

 

 

scrollbar-face-color: #E9E9E9;

 

 

 

scrollbar-highlight-color: white;

 

 

 

scrollbar-shadow-color: #E9E9E9;

 

 

 

scrollbar-3dlight-color: #DBDBDB;

 

 

 

scrollbar-arrow-color: #787878;

 

 

 

scrollbar-track-color: #F5F5F5;

 

 

 

scrollbar-darkshadow-color: #AEAEAE;

 

}

 

 

 

.RadGrid_MLightning

 

,

 

 

 

 

.RadGrid_MLightning

 

table,

 

 

 

 

.GridFilterMenu_MLightning

 

table

 

 

 

 

{

 

 

font: normal 11px Arial, Verdana, Sans-serif;

 

 

}

 

 

 

.MasterTable_MLightning

 

 

 

{

 

 

border: 0px !important;

 

 

 

border-collapse: separate !important;

 

 

 

color: #000;

 

 

 

 

/*-moz-user-select: none;*/ /*disables text selecting in Firefox to combat unpleasant visual appearance*/

 

 

 

 

}

 

 

 

.MasterTable_MLightning

 

th,

 

 

 

 

.MasterTable_MLightning

 

td

 

 

 

 

{

 

 

padding-left:1px;

 

 

 

padding-right:1px;

 

}

 

 

 

.MasterTable_MLightning

 

th

 

 

 

 

{

 

 

text-align: left;

 

}

 

 

 

.RadGrid_MLightning

 

td,

 

 

 

 

.RadGrid_MLightning

 

td a

 

 

 

 

{

 

 

color: #000;

 

}

 

 

 

th.GridHeader_MLightning

 

, th.ResizeHeader_MLightning

 

 

 

 

{

 

 

background: #000033 repeat-x 0 100%;

 

 

 

border-right: solid 1px #FFFFFF;

 

 

 

border-bottom: solid 1px #000033;

 

 

 

height: 16px;

 

}

 

 

 

th.GridHeader_MLightning

 

,

 

 

 

 

th.ResizeHeader_MLightning

 

 

 

{

 

 

padding-left:1px;

 

}

 

 

 

.GridHeader_MLightning

 

a

 

 

 

 

{

 

 

color: #ffffff;

 

 

 

text-decoration: none;

 

}

 

 

 

td.GridHeader_MLightning

 

input

 

 

 

 

{

 

 

float: left;

 

 

 

border: solid 1px #666;

 

 

 

background: #fafafa;

 

 

 

font: bold 10px Verdana, Arial, Sans-serif;

 

 

 

color: #989cb0;

 

 

 

height: 14px;

 

 

 

vertical-align:middle;

 

}

 

 

 

 

 

.GridFilterRow_MLightning

 

td

 

 

 

 

{

 

 

border-left:1px solid #f9f9f9;

 

 

 

background-color: #6dabaa;

 

 

 

/*text-align: center;*/

 

 

 

 

 

 

border-collapse: collapse;

 

 

 

empty-cells: hide;

 

}

 

 

 

.GridRow_MLightning

 

td,

 

 

 

 

.GridAltRow_MLightning

 

td,

 

 

 

 

.SelectedRow_MLightning

 

td,

 

 

 

 

.ActiveRow_MLightning

 

td,

 

 

 

 

.GridEditRow_MLightning

 

td

 

 

 

 

{

 

 

padding-top:4px;

 

 

 

padding-bottom:4px;

 

}

 

 

 

.GridRow_MLightning

 

td

 

 

 

 

{

 

 

border-top: solid 1px #ececec;

 

 

 

border-bottom: solid 1px #fff;

 

 

 

border-left: solid 1px #f1f1f1;

 

 

 

white-space: pre;

 

 

 

/*text-align: center;*/

 

 

 

 

}

 

 

 

.GridAltRow_MLightning

 

 

 

{

 

 

background: #f1f1f1;

 

}

 

 

 

.GridAltRow_MLightning

 

td

 

 

 

 

{

 

 

border-top: solid 1px #eaeaea;

 

 

 

border-left: solid 1px #f1f1f1;

 

 

 

border-bottom: solid 1px #fefefe;

 

 

 

white-space: pre;

 

 

 

 

/*text-align: center;*/

 

 

 

 

}

 

 

 

.SelectedRow_MLightning

 

 

 

{

 

 

background: #707070 url( '../../App_Themes/UTC/Grid/selectedRow.gif' ) repeat-x 50% bottom;

 

}

 

 

 

.SelectedRow_MLightning

 

td

 

 

 

 

{

 

 

border-top: solid 1px #eaeaea;

 

 

 

border-left: none;

 

 

 

border-bottom: solid 1px #83c60b;

 

 

 

padding-left:4px;

 

}

 

 

 

.GridEditRow_MLightning

 

 

 

{

 

 

background-color: #ffffe1;

 

}

 

 

 

.GridEditRow_MLightning

 

input

 

 

 

 

{

 

 

font-size: 11px;

 

}

 

 

 

.ActiveRow_MLightning

 

 

 

{

 

 

background: #edf2d9;

 

}

 

 

 

.ActiveRow_MLightning

 

td,

 

 

 

 

.GridEditRow_MLightning

 

td

 

 

 

 

{

 

 

border-top: solid 1px #eaeaea;

 

 

 

border-left: solid 1px #eaeaea;

 

 

 

border-bottom: solid 1px #fefefe;

 

}

 

 

 

.GridRowOver_MLightning

 

 

 

{

 

 

background:none #fff;

 

}

 

 

 

.GridPager_MLightning

 

 

 

{

 

 

background: #707070;

 

 

 

color: #ffffff;

 

 

}

 

 

 

.GridPager_MLightning

 

td

 

 

 

 

{

 

 

border: solid 1px #fff;

 

 

 

border-top: 1px solid #c7c7c7;

 

 

 

border-right:0;

 

 

 

color: #999;

 

 

 

padding-top:2px;

 

 

 

padding-bottom:2px;

 

 

}

 

 

 

.GridPager_MLightning

 

td div

 

 

 

 

{

 

 

padding-left:0px;

 

 

 

color: #ffffff;

 

}

 

 

 

.GridPager_MLightning

 

td a

 

 

 

 

{

 

 

padding-left:1px;

 

 

 

color: #ffffff;

 

}

 

 

 

.GridPager_MLightning

 

td a:hover,

 

 

 

 

.GridFooter_MLightning

 

td a:hover

 

 

 

 

{

 

 

color: #333;

 

}

 

 

 

.PagerLeft_MLightning

 

*,

 

 

 

 

.PagerRight_MLightning

 

*,

 

 

 

 

.PagerCenter_MLightning

 

*

 

 

 

 

{

 

 

vertical-align:middle;

 

}

 

 

 

.PagerLeft_MLightning

 

,

 

 

 

 

.PagerRight_MLightning

 

,

 

 

 

 

.sliderPagerLabel_MLightning

 

 

 

{

 

 

line-height:17px;

 

 

 

padding-top:2px;

 

}

 

 

 

.PagerLeft_MLightning

 

 

 

{

 

 

float:left;

 

}

 

 

 

.PagerRight_MLightning

 

,

 

 

 

 

.sliderPagerLabel_MLightning

 

 

 

{

 

 

float:right;

 

 

 

padding-right:4px;

 

}

 

 

 

.GridPager_MLightning

 

.radslider

 

 

 

 

{

 

 

float:left;

 

}

 

 

 

.GridPager_MLightning

 

img

 

 

 

 

{

 

 

border:0;

 

}

 

 

 

.GridPager_MLightning

 

.radInput_MLightning

 

 

 

 

{

 

 

vertical-align:middle;

 

}

 

 

 

.PagerCenter_MLightning

 

 

 

{

 

 

display:block;

 

 

 

text-align:center;

 

}

 

 

 

.GridFooter_MLightning

 

 

 

{

 

 

background: #6dabaa;

 

 

 

height: 16px;

 

 

 

color: #666;

 

 

 

line-height: 10px;

 

}

 

 

 

.GridFooter_MLightning

 

td

 

 

 

 

{

 

 

border: solid 2px #6dabaa;

 

 

 

border-top: 1px solid #6dabaa;

 

 

 

border-left: 7px solid #6dabaa;

 

 

 

border-right: 7px solid #6dabaa;

 

}

 

 

 

.GridFooter_MLightning

 

td a

 

 

 

 

{

 

 

color: #666;

 

}

 

 

 

tr.GroupHeader_MLightning

 

 

 

{

 

 

background: white;

 

 

 

height: 22px;

 

}

 

 

 

tr.GroupHeader_MLightning

 

td

 

 

 

 

{

 

 

border-left:1px solid #fff;

 

 

 

border-right:0;

 

 

 

border-bottom: solid 1px #c2c2c2;

 

}

 

 

 

.GroupHeader_MLightning

 

td div div{top:-0.5em;}

 

 

 

 

*

 

html .GroupHeader_MLightning td div div{top:0.4em;}

 

 

 

 

*+html

 

.GroupHeader_MLightning td div div{top:0.4em;}

 

 

 

 

.GroupHeader_MLightning

 

td div div div{top:0;}

 

 

 

 

 

 

.GroupPanel_MLightning

 

 

 

{

 

 

background-color: #e8e8e8;

 

 

 

width: 100%;

 

 

 

border-collapse: collapse;

 

 

 

border-bottom: 1px solid #b1b1b1;

 

}

 

 

 

.GroupPanel_MLightning

 

td

 

 

 

 

{

 

 

padding: 2px 4px;

 

}

 

 

 

.GroupPanelItems_MLightning

 

 

 

{

 

 

background: #efefef;

 

 

 

color: #999999;

 

 

 

border: solid 1px white;

 

 

 

border-right: solid 1px #c6c6c6;

 

 

 

border-bottom: solid 1px #c6c6c6;

 

 

 

white-space: nowrap;

 

 

 

font-size: 11px;

 

}

 

 

 

.TopReorderIndicator_MLightning

 

 

 

{

 

 

background: url('../../App_Themes/UTC/Grid/MoveDown.gif') no-repeat;

 

}

 

 

 

.BottomReorderIndicator_MLightning

 

 

 

{

 

 

background: url('../../App_Themes/UTC/Grid/MoveUp.gif') no-repeat;

 

}

 

 

 

.GridFilterMenu_MLightning

 

 

 

{

 

 

cursor:default;

 

 

}

 

 

 

.GridFilterMenu_MLightning

 

.GridFilterMenuSelectColumn_MLightning,

 

 

 

 

.GridFilterMenu_MLightning

 

.GridFilterMenuTextColumn_MLightning

 

 

 

 

{

 

 

padding:3px 4px;

 

}

 

 

 

.GridFilterMenu_MLightning

 

.GridFilterMenuSelectColumn_MLightning

 

 

 

 

{

 

 

background:#f9f9f9;

 

 

 

text-align:center;

 

}

 

 

 

.GridFilterMenu_MLightning

 

.GridFilterMenuTextColumn_MLightning

 

 

 

 

{

 

 

background:#fff;

 

 

 

color:#333;

 

}

 

 

 

.GridFilterMenu_MLightning

 

.GridFilterMenuHover_MLightning

 

 

 

 

{

 

 

background:#c1f320;

 

}

 

 

 

/*AJAX Loading*/

 

 

 

.GridLoadingTemplate_MLightning

 

 

 

{

 

 

background:#fff !important;

 

 

 

font:normal 24px/54px arial,sans-serif;

 

 

 

color:#b5ea0e;

 

}

 

 

 

/* rtl support */

 

 

 

.RadGridRTL_MLightning

 

th,

 

 

 

 

.RadGridRTL_MLightning

 

td

 

 

 

 

{

 

 

text-align:right;

 

}

 

 

 

.RadGridRTL_MLightning

 

.PagerLeft_MLightning,

 

 

 

 

.RadGridRTL_MLightning

 

.GridPager_MLightning .radslider

 

 

 

 

{

 

 

float:right;

 

}

 

 

 

.RadGridRTL_MLightning

 

.PagerRight_MLightning,

 

 

 

 

.RadGridRTL_MLightning

 

.sliderPagerLabel_MLightning

 

 

 

 

{

 

 

float:left;

 

}

 

 

 

.GridCommandRow_MLightning

 

 

 

{

 

 

background-color: #6dabaa;

 

 

 

Color: #ffffff;

 

 

}

Can you tell me what's wrong?

 

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Feb 2009, 08:23 AM
Hello,

I tried your custom skin and everything seemed OK. The problem may be caused by some other styles on the page or some declarative style settings (e.g. alignment) in RadGrid.

Please try removing temporarily some styles and settings in order to find out what causes the issue.

If the problem persists, please send us a simple runnable web page, which reproduces it.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
newbie
Top achievements
Rank 1
answered on 10 Feb 2009, 09:14 PM
Hello ,

I have submitted a working project to illustrate my problem.
The ticket ID number is :190346

Please help
0
Dimo
Telerik team
answered on 11 Feb 2009, 08:38 AM
Hello Anumeha,

Thanks for sending a sample project. The problem is caused by

table
{
  margin-left:      20px;
  margin-right:     20px;

  /*border:           thin solid black;*/
  caption-side:     bottom;
  border-collapse:  collapse;
  background-color: #ffffff;
  font-size: 70%;
  text-align: center;
  }

Generally, using global styles such as the above is not recommended because it leads to unexpected results.

You can override the above global CSS rule like this:

.RadGrid  table
{
      margin: 0;
}


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
newbie
Top achievements
Rank 1
answered on 11 Feb 2009, 06:56 PM
Thank you so much for helping me out.
I was really stuck on that one.

There's one more issue that I hope you can help me with.
In the screen shot that I've posted in my first post, My Policies and the KeyRelations button is visible under the second column of the grid.
I want it to be under the first column.
On click of that button i show a second grid and I want that grid header to be aligned with the main grid header. Both the grid2 and the buttons are in a nestedviewtemplate.

I am unable to do this. I am posting my grid declaration here again.

<

telerik:RadGrid ID="RadGrid1" runat="server" GridLines="Vertical" AllowPaging="true"

 

 

AutoGenerateColumns="False" EnableLinqExpressions="false" AllowSorting="true"

 

 

Width="1150px" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemDataBound="RadGrid1_ItemDataBound"

 

 

OnColumnCreated="RadGrid1_ColumnCreated" OnItemCreated="RadGrid1_ItemCreated"

 

 

PageSize="10">

 

 

<MasterTableView TableLayout="Fixed" HierarchyDefaultExpanded="true" DataKeyNames="ContactID, Name"

 

 

Name="Contact">

 

 

<Columns>

 

 

<telerik:GridTemplateColumn HeaderText="Name" Visible="false" UniqueName="ContactID">

 

 

<ItemTemplate>

 

<%

# Eval("ContactID")%>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Name" UniqueName="ContactName" HeaderStyle-Width="23%">

 

 

<ItemTemplate>

 

 

<b>

 

<%

# Eval("Name")%></b>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Employer/Title" UniqueName="Employer" HeaderStyle-Width="19%">

 

 

<ItemTemplate>

 

 

<b>

 

<%

# Eval("Employer")%></b></ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Email/Website" UniqueName="Email"

 

 

HeaderStyle-Width="22%">

 

 

<ItemTemplate>

 

<%

# Eval("WebAddress")%>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Phone" UniqueName="Phone" HeaderStyle-Width="18%">

 

 

<ItemTemplate>

 

<%

# Eval("Phone")%>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Preferred Address" UniqueName="Address" HeaderStyle-Width="18%">

 

 

<ItemTemplate>

 

<%

# Eval("Address")%</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

</Columns>

 

 

<NestedViewTemplate>

 

 

<asp:ImageButton ID="btnKeyRel" runat="server" CommandName="ShowRel" ImageUrl="~/App_Themes/MLightning/Layout/Key_Select1.bmp" />

 

 

<asp:ImageButton ID="btnPol" runat="server" CommandName="ShowPol" ImageUrl="~/App_Themes/MLightning/Layout/Pol_Select1.bmp" />

 

 

<telerik:RadGrid ID="RadGrid2" runat="server" Visible="false" AllowPaging="true"

 

 

AutoGenerateColumns="false" PageSize="10">

 

 

<MasterTableView Name="KeyRelations">

 

 

<Columns>

 

 

<telerik:GridTemplateColumn HeaderText="Name" UniqueName="KeyRelName" HeaderStyle-Width="30%">

 

 

<ItemTemplate>

 

 

<asp:Label ID="Label1" runat="server" Visible='<%# !Convert.IsDBNull(Eval("Relationship")) %>'><b>Relationship:</b>&nbsp;</asp:Label><%# Eval("Relationship")%>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Employer/Title" UniqueName="Employer" HeaderStyle-Width="12%">

 

 

<ItemTemplate>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Preferred Email" UniqueName="PreferredEmail"

 

 

HeaderStyle-Width="12%">

 

 

<ItemTemplate>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Preferred Phone" UniqueName="Phone" HeaderStyle-Width="27%">

 

 

<ItemTemplate>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Remarks" UniqueName="Remarks" HeaderStyle-Width="19%">

 

 

<ItemTemplate>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

</telerik:RadGrid>

 

 

</NestedViewTemplate>

 

 

</MasterTableView>

 

 

</telerik:RadGrid>

Can you suggest what I am doing wrong here.

 

Tags
Grid
Asked by
newbie
Top achievements
Rank 1
Answers by
Dimo
Telerik team
newbie
Top achievements
Rank 1
Share this question
or