[Solved] CSS of RadGrid shifts everything to the right

[Brett]

I am having a problem with my RadGrid control.  It appears that the header line, one of the rows and some of the text is shifted all the way over to the right to the point where it's past the right border area.  How can I fix that?  See the link for a picture.  Thanks!

http://img198.imageshack.us/img198/6192/cssmessedup.jpg

[Brett]

Please pay no attention to where it says Home/Personal.  That is not part of the grid, that is in fact a navigation bar.  Thanks!

[Dimo]

Hello Brett,

Probably a 100% wide RadGrid is placed inside a container with padding. Hence, the observed issue is normal and according to the CSS specification.

Either remove the 100% width, or the padding.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Brett]

I'm not sure I'm getting you.  No matter how much the width of my Radgrid, everything gets shifted to the right.  This has been very frustrating because I do not know what else to use, my final solution will be to remove the grid and just use text boxes but I do not want to do that.  Here is my asp.net code for the grid control, see below.  There has to be some kind of solution to this problem.  Setting width for this control does nothing to alleviate the problem, I have already tried.  So what exactly do I have to do to get rid of this weird problem?

<%

@ Control Language="VB" AutoEventWireup="false" CodeFile="AddorEditFamilyMember.ascx.vb" Inherits="Member_AddorEditFamilyMember" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

 

<style type="text/css">

 

 

 

 

</style>

 

 

<div id="accountinfo">

 

 

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"

 

 

GridLines="None" Skin="Black">

 

<

 

MasterTableView AutoGenerateColumns="False" CellSpacing="-1" DataKeyNames="MemberFamilyId"

 

 

DataSourceID="SqlDataSource1">

 

<

 

RowIndicatorColumn>

 

<

 

HeaderStyle Width="20px"></HeaderStyle>

 

</

 

RowIndicatorColumn>

 

<

 

ExpandCollapseColumn>

 

<

 

HeaderStyle Width="20px"></HeaderStyle>

 

</

 

ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridBoundColumn DataField="MemberFamilyId" DataType="System.Int32"

 

 

HeaderText="MemberFamilyId" ColumnEditorID="MemberFamilyIDEditor" ReadOnly="True" Visible="false" SortExpression="MemberFamilyId"

 

 

UniqueName="MemberFamilyId">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="EmployeeId" Visible="false" DataType="System.Int32"

 

 

HeaderText="EmployeeId" SortExpression="EmployeeId" UniqueName="EmployeeId">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="MemberFamilyNumber" Visible="false" DataType="System.Int32"

 

 

HeaderText="MemberFamilyNumber" SortExpression="MemberFamilyNumber"

 

 

UniqueName="MemberFamilyNumber">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Allergies" HeaderText="Allergies"

 

 

SortExpression="Allergies" UniqueName="Allergies">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Weight" DataType="System.Int32"

 

 

HeaderText="Weight" SortExpression="Weight" UniqueName="Weight">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Age" DataType="System.Int32"

 

 

HeaderText="Age" SortExpression="Age" UniqueName="Age">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="DateOfBirth" DataType="System.DateTime"

 

 

HeaderText="DateOfBirth" SortExpression="DateOfBirth" UniqueName="DateOfBirth">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn Visible="false" DataField="MemberFamilyCreatedDate"

 

 

DataType="System.DateTime" HeaderText="MemberFamilyCreatedDate"

 

 

SortExpression="MemberFamilyCreatedDate" UniqueName="MemberFamilyCreatedDate">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn Visible="false" DataField="MemberFamilyCreatedBy"

 

 

HeaderText="MemberFamilyCreatedBy" SortExpression="MemberFamilyCreatedBy"

 

 

UniqueName="MemberFamilyCreatedBy">

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

</

 

MasterTableView>

 

 

</telerik:RadGrid>

 

 

</div>

 

<

 

asp:SqlDataSource ID="SqlDataSource1" runat="server"

 

 

ConnectionString="<%$ ConnectionStrings:EmployeeScreeningConnectionString %>"

 

 

SelectCommand="SELECT [MemberFamilyId], [EmployeeId], [MemberFamilyNumber], [Allergies], [Weight], [Age], [DateOfBirth], [MemberFamilyCreatedDate], [MemberFamilyCreatedBy] FROM [MemberFamilyInfo] WHERE ([EmployeeId] = @EmployeeId)">

 

 

<SelectParameters>

 

 

<asp:SessionParameter DefaultValue="2" Name="EmployeeId"

 

 

SessionField="EmployeeId" Type="Int32" />

 

 

</SelectParameters>

 

</

 

asp:SqlDataSource>

 

[Dimo]

OK, so you don't have a 100% width for RadGrid. In this case maybe the RadGrid wrapper (which is a <div> element) inherits some padding style from your website. Please check that with Firebug.

Generally, in such cases we need a runnable sample in order to reproduce the problem locally and give specific instructions. Runnable samples can be attached to formal support tickets.

Regards,
Dimo
the Telerik team

[Brett]

So if you wanted to change the CSS for the radcontrols, how would you do so?  Please give me an example of how I would change the RadControl for the black RadGrid header and rows please. 

[Dimo]

Hi Brett,

If you only want to change some minor things in the RadControls' skins, then you can override the embedded skins:

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

If you need to make a lot of changes, then it is better to create custom skins:

http://www.telerik.com/help/aspnet-ajax/createcustomskin.html

More help resources on skinning are available in each RadControl's documentation, e.g. :

http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html


Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Brett]

I don't need all of that.  All I want to know is if how I can shift certain things in my radgrid to the left or to the right.  Apparently no matter how many threads I create about the same problem no single person has a CLUE?

[Dimo]

Hi Brett,

I am afraid that your questions are not very descriptive, hence my answers provide general guidelines only. Usually, things are shifted to the left or right with CSS (e.g. by using the text-align and float CSS properties), but you have to specify what exactly.

I have replied to another thread of yours, which contains a related question. If you need further assistance, I recommend you to open a formal support ticket, attach a runnable sample and tell us what exactly is bother you. We will run the sample and give you exact instructions what to change.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brett]

Thank you very much!