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

Centering a Title in the CommandItemTemplate

6 Answers 138 Views

Grid

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

kencox asked on 26 May 2010, 02:10 AM

commandbar.gif

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

answered on 28 May 2010, 03:28 PM

middleissue.gif

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

answered on 28 May 2010, 03:42 PM

floatedtitle.gif

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

Accepted

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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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.