How to collapse borders

[Al]

Hi,

Using the css border-collapse:collapse has no effect on the layout. Could you pls give an example how to create a simple grid layout with gridlines where the borders are all the same size (no double-up)?

[Marin Bratanov]

Hi,

You can use the ShowGrid property to toggle the actual grid on and off. You can start by testing the code from the following article: http://docs.telerik.com/devtools/aspnet-ajax/controls/pagelayout/creating-responsive-design/radpagelayout-grid-types.

Apart from that the page layout does not provide its own borders. With this in mind, you may want to look into removing the border in the adjacent direction (e.g., border-right: 0; for certain resolutions, and border-bottom: 0 for others, depending on the layout you implement).

Regards,

Marin Bratanov
Telerik by Progress

[Al]

Hi Marin,

 

When I set 'ShowGrid' equal to true I see no grid lines but I get weird vertical bars about an inch wide in a light colour over my whole page?

Currently I am explicitly setting the individual borders on every LayoutColumn to achieve what I need but ShowGrid would be much easier, except for the weird behaviour I see.

[Marin Bratanov]

Hi Al,

The green columns are the grid that is shown when the property is set to true because they indicate where the grid columns are.

If you want to tweak individual columns, I advise you use their CssClass property and define rules similar to the following:

<style>
    .side
    {
        border-style: solid;
        border-color: green;
        border-width: 2px 1px 2px 2px;
    }

    .main
    {
        border-style: solid;
        border-color: red;
        border-width: 2px 2px 2px 1px;
    }
</style>
<telerik:RadPageLayout ID="RadPageLayout1" runat="server" GridType="Fluid" ShowGrid="true">
    <Rows>
        <telerik:LayoutRow>
            <Content>
                <div class="card">Header</div>
            </Content>
        </telerik:LayoutRow>
        <telerik:LayoutRow>
            <Columns>
                <telerik:LayoutColumn Span="3" CssClass="side">
                    <div class="card" style="height: 300px">Sidebar</div>
                </telerik:LayoutColumn>
                <telerik:LayoutColumn Span="9" CssClass="main">
                    <div class="card" style="height: 300px">Main content</div>
                </telerik:LayoutColumn>
            </Columns>
        </telerik:LayoutRow>
        <telerik:LayoutRow>
            <Content>
                <div class="card">Footer</div>
            </Content>
        </telerik:LayoutRow>
    </Rows>
</telerik:RadPageLayout>

where you can tweak the desired widths and colors and also add @media queries according your layout and the screen breakpoints (see the built-in breakpoints in our documentation) in order to achieve the desired effect.

Regards,

Marin Bratanov
Telerik by Progress