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

Centering a Title in the CommandItemTemplate

6 Answers 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
kencox
Top achievements
Rank 1
kencox asked on 26 May 2010, 02:10 AM
Hi folks,

I need some CSS help within the grid's CommandItemTemplate. I'm trying to center some title text in the command bar while right-aligning a couple of linkbuttons.

Up til now, I've been using margin spacing to achieve this. It's a trial and error thing, adding the number of pixels to make the heading text ("Contact Events") appear centered.
 
The attached graphic shows roughly what I'm trying to achieve. The following code is what I have now. It's getting difficult to maintain as I add more screens to the app:

<CommandItemTemplate> 
    <span style="margin-right: 280px; font-size: 21px; vertical-align: bottom; font-weight: bold;">  
        Contact Events</span> 
    <asp:LinkButton CssClass="rgCommandButton" ID="btnResetCommand" runat="server" Text="Reset Filters" 
        ToolTip="Removes all filters" /> 
    <asp:LinkButton CssClass="rgCommandButton" ID="btnAddCommand" runat="server" Text="New Event" 
        ToolTip="Adds an Event" /> 
</CommandItemTemplate> 

Is there a way to automatically center "Contact Events" while keeping the two link buttons right-aligned?

Thanks for any guidance!

Ken
Microsoft MVP [ASP.NET]

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 26 May 2010, 04:28 PM
Hi Ken,

You can set display:block; and margin:0 auto; styles to the title element (span or whatever) and float the other LinkButtons to the right.

http://www.google.com/search?q=horizontal+centering+css

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
kencox
Top achievements
Rank 1
answered on 28 May 2010, 03:28 PM
Thanks for the tips, Dimo.

I've managed to get the horizontal layout working, but now the vertical alignment is all messed up, as shown in the attached image.

Here's the semi-working version of the markup... How do I get all text to center vertically?

<CommandItemTemplate> 
    <div style="width: 100%; text-align: center;">  
        <div style="display: block; font-size: 21px; vertical-align: middle; font-weight: bold;">  
            Events</div> 
        <div style="float: right; vertical-align: middle;">  
            <asp:LinkButton CssClass="rgCommandButton" ID="btnResetCommand" runat="server" Text="Reset Filters" 
                OnClick="btnResetCommand_Click" ToolTip="Removes all filters" /> 
            <asp:LinkButton CssClass="rgCommandButton" ID="btAddCommand" runat="server" Text="New Event" 
                CommandName="InitInsert" ToolTip="Adds a new Event" /></div>  
    </div> 
</CommandItemTemplate> 

Thanks,

Ken
0
Dimo
Telerik team
answered on 28 May 2010, 03:36 PM
Hi Ken,

Place the floated elements before the centered title.

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
kencox
Top achievements
Rank 1
answered on 28 May 2010, 03:42 PM
Thanks Dimo, but that doesn't work. The title text is no longer centered across the entire width of the grid. Here's the code that's still not right and a screenshot to show the misalignment.

<CommandItemTemplate> 
    <div style="width: 100%; text-align: center;">  
        <div style="float: right; vertical-align: middle;">  
            <asp:LinkButton CssClass="rgCommandButton" ID="btnResetCommand" runat="server" Text="Reset Filters" 
                OnClick="btnResetCommand_Click" ToolTip="Removes all filters" /> 
            <asp:LinkButton CssClass="rgCommandButton" ID="btAddCommand" runat="server" Text="New Event" 
                CommandName="InitInsert" ToolTip="Adds a new Event" /></div>  
        <div style="display: block; font-size: 21px; vertical-align: middle; font-weight: bold;">  
            Events</div> 
    </div> 
</CommandItemTemplate> 

Ken
0
Accepted
Dimo
Telerik team
answered on 28 May 2010, 03:54 PM
Ken,

You have not included the margin:0 auto style, which was suggested in my first reply?

Also note that defining layout for templates is a question of general HTML/CSS knowledge and is not related to RadGrid.

<%@ Page Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<div style="border:1px solid red"
        <asp:LinkButton CssClass="rgCommandButton" ID="btnResetCommand" runat="server" Text="Reset Filters"
            ToolTip="Removes all filters" style="float:right" />
        <asp:LinkButton CssClass="rgCommandButton" ID="btAddCommand" runat="server" Text="New Event"
            CommandName="InitInsert" ToolTip="Adds a new Event" style="float:right" />
    <div style="width:64px;font-size: 21px; vertical-align: middle; font-weight: bold;margin:0 auto"
        Events</div>
</div>
 
</form>
</body>
</html>



Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
kencox
Top achievements
Rank 1
answered on 28 May 2010, 04:00 PM
Oops! Works now!

Thanks for your help,

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