How to center controls in a LayoutColumn?

[Rob Ainscough]

I'm new to AJAX controls for ASP.NET ... I'm trying out RadPageLayout and can't seem to accomplish the most simple of tasks ... just have a control centered in a column.  In fact I can't find any property in LayoutColumn that has anything to do with alignment?

 

<telerik:RadPageLayout ID="RadPageLayout1" runat="server" GridType="Fluid" BorderWidth="1px" Width="300">
     <Rows>
         <telerik:LayoutRow RowType="Row">
             <Columns>
                 <telerik:LayoutColumn>
                     <telerik:RadLabel ID="rlb_Online" runat="server" Text="Online"/>
                 </telerik:LayoutColumn>
             </Columns>
         </telerik:LayoutRow>
     </Rows>
</telerik:RadPageLayout>

 

Any hints?  I've read thru the documentation on RadPageLayout and LayoutRow and LayoutColumn but NOT a single mention of alignment or setting margins for rows and I can't find any property setting that would accomplish this?  I guess I'm missing something very obvious with this control?

Cheers, Rob.

 

[Tsvetomir]

Hi Rob,

In the code snippet provided, you have included the Label into a RadLayoutColumn. You can use the Push and Pull properties of the column to manipulate the positioning of the column itself. If you are using more than one column, they will be automatically aligned.

A grid based RadPageLayout control has the following elements: 

1. Container – the outer most container (TABLE element)
2. Rows – intermediate containers used for contain columns (TR elements)
3. Columns – the actual content placeholders (TD elements)

In addition to those structural elements, a grid has the following properties:

• Column count – the width in grid units
• Gutters – outer space between columns
• Padding – inner space within columns
• Displacement – shifting the columns left or right

You can find an extensive description of the different elements here: Elements of a Grid System.

As mentioned above, you can use specific properties to manipulate the alignment of the columns. The Push property is used to move the column element to the right without affecting other content. While, the Pull property is used to move the column element to the left without affecting other content (more information on the column's properties: Columns in RadPageLayout). As a side note, here is a link to the row's properties as well: Rows.

If need further information, do not hesitate to contact us. 

Kind regards,
Tsvetomir
Progress Telerik

[Rob Ainscough]

Hi Tsvetomir,

Still having issues with RadPageLayout ... in the articles you linked they actually don't show any sample of Pull or Push, just Span.

What I've noticed is that the RadPageLayout will have a huge "gap" between columns when using span.  So it appears a default of 15px per column ... so the documentation mentions "Gutter" but doesn't provide any sample usage.  So I experimented with Gutter in my RadPageLayout and doesn't seem to matter what value I set Gutter the gap between columns is always the same.

Could I get some samples on how to use RadPageLayout with Push, Pull, Span and Gutter?  As of right now nothing I've tried will remove the space between columns unless I go to a fixed (rather than fluid) and provide a hard width.

Cheers, Rob.

 

[Peter Milchev]

Hello Rob,

To center the Label in the cell, the text-align CSS property of the cell should be set to center. 

Attached is a sample project that achieves the following output and shows how to center the label in the cell and use Push, Pull, and Span with GridType Fluid. 

<style>
    .center-content{
        text-align: center
    }
    .t-col {
        border:1px solid green;
    }
</style>

<telerik:RadPageLayout ID="RadPageLayout1"  runat="server" GridType="Fluid" BorderWidth="1px" Width="300">
    <Rows >
        <telerik:LayoutRow RowType="Row">
            <Columns>
                <telerik:LayoutColumn CssClass="center-content">
                    <telerik:RadLabel ID="rlb_Online" runat="server" Text="Online" />
                </telerik:LayoutColumn>
            </Columns>
        </telerik:LayoutRow>
        <telerik:LayoutRow RowType="Row">
            <Columns>
                <telerik:LayoutColumn CssClass="center-content" Push="3">
                    <telerik:RadLabel ID="RadLabel1" runat="server" Text="Push 3" />
                </telerik:LayoutColumn>
            </Columns>
        </telerik:LayoutRow>
         <telerik:LayoutRow RowType="Row">
            <Columns>
                <telerik:LayoutColumn  CssClass="center-content" Pull="3">
                    <telerik:RadLabel ID="RadLabel2" runat="server" Text="Pull 3" />
                </telerik:LayoutColumn>
            </Columns>
        </telerik:LayoutRow>
         <telerik:LayoutRow RowType="Row">
            <Columns>
                <telerik:LayoutColumn Span="4" CssClass="center-content" >
                    <telerik:RadLabel ID="RadLabel3" runat="server" Text="Col 1" />
                </telerik:LayoutColumn>
                 <telerik:LayoutColumn Span="4" CssClass="center-content" >
                    <telerik:RadLabel ID="RadLabel4" runat="server" Text="Col 2" />
                </telerik:LayoutColumn>
                 <telerik:LayoutColumn Span="4" CssClass="center-content" >
                    <telerik:RadLabel ID="RadLabel5" runat="server" Text="Col 3" />
                </telerik:LayoutColumn>
            </Columns>
        </telerik:LayoutRow>
    </Rows>
</telerik:RadPageLayout>

If that does not help, please modify the attached project so that it better represents your case and send it back to us in an official support ticket. That would allow us to investigate locally and provide more specific and accurate suggestions. 

Regards,
Peter Milchev
Progress Telerik

[Rob Ainscough]

Hi Peter,

Thanks for the example.  However, using your same sample with minor change to left and right content alignment and you'll see my problem, the spacing between the content text and the border is far too big.  This is why I mentioned "Gutter", but that seems to have NO impact on reducing the gap. 

From my .CSS file:

.center-content{
    text-align: center;
}
.t-col {
    border: 1px solid green;
}
.left-content{
    text-align: left;
}
.right-content{
    text-align: right;
}

From my .aspx file:

<link rel="stylesheet" runat="server" media="screen" href="DCStyles.css" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="frmDEVTest" runat="server">

        <!-- RadScriptManager is required for all AJAX based controls -->
        <telerik:RadScriptManager ID="rsmDEV_Test" runat="server" EnableHandlerDetection="false" EnableScriptCombine="false">
            <Scripts>
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
           </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadSkinManager ID="rskmDEV_Test" runat="server" Skin="Web20"></telerik:RadSkinManager>
        <telerik:RadInputManager ID="rimDEV_Test" runat="server"></telerik:RadInputManager>
        <telerik:RadWindowManager ID="rwmDEV_Test" runat="server"></telerik:RadWindowManager>

        <telerik:RadPageLayout ID="RadPageLayout1"  runat="server" GridType="Fluid" BorderWidth="1px" Width="300">
             <Rows >
                <telerik:LayoutRow RowType="Row">
                    <Columns>
                        <telerik:LayoutColumn CssClass="center-content">
                            <telerik:RadLabel ID="rlb_Online" runat="server" Text="Online" />
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Row">
                    <Columns>
                        <telerik:LayoutColumn CssClass="center-content" Push="3">
                            <telerik:RadLabel ID="RadLabel1" runat="server" Text="Push 3" />
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                 <telerik:LayoutRow RowType="Row">
                    <Columns>
                        <telerik:LayoutColumn  CssClass="center-content" Pull="3">
                            <telerik:RadLabel ID="RadLabel2" runat="server" Text="Pull 3" />
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                 <telerik:LayoutRow RowType="Row">
                    <Columns>
                        <telerik:LayoutColumn Span="4" CssClass="right-content" >
                            <telerik:RadLabel ID="RadLabel3" runat="server" Text="Col 1" />
                        </telerik:LayoutColumn>
                         <telerik:LayoutColumn Span="4" CssClass="left-content" >
                            <telerik:RadLabel ID="RadLabel4" runat="server" Text="Col 2" />
                        </telerik:LayoutColumn>
                         <telerik:LayoutColumn Span="4" CssClass="center-content" >
                            <telerik:RadLabel ID="RadLabel5" runat="server" Text="Col 3" />
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
             </Rows>
        </telerik:RadPageLayout>

    </form>
</body>
</html>

Results:

https://drive.google.com/uc?id=1B7_zybr1k7TuEt5JQIatNA4GLt6-ZUdI

As you can see I have a "gap" between the Col 1 and Col 2 (even with their content alignment right/left settings) that I'm trying to reduce (appears to be about 15px) ... "Gutter" setting doesn't seem to work at removing this gap ... any suggestions?

Cheers, Rob.

 

[Peter Milchev]

Hello Rob,

This gap you are observing is actually the padding-left and padding-right of the .t-col elements. You can inspect the generated HTML and CSS by following the first two points of the following blog post: 

• Improve Your Debugging Skills with Chrome DevTools;

Regarding the padding, you can fix it with the following styles: 

html div.t-col {
    border: 1px solid green;
    padding-left: 0;
    padding-right: 0;
}

html span.RadLabel {
    padding-right: 0px;
}

Regards,
Peter Milchev
Progress Telerik

[Rob Ainscough]

Hi Peter,

Thanks for the response.  "div.t-col" with padding defined resolved my issue.  The span.RadLabel definition in the CSS was not required for my use cases.

Thanks for the link to debug tools in Chrome ... I'm not a big UI/front end developer, more out of necessity (small programming team) ... I focus more on middle tier and back-end and overall design/implementation.

Cheers, Rob.