How to collapse borders

4 posts, 0 answers
  1. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 31 Aug Link to this post

    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)?

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 01 Sep Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 01 Sep in reply to Marin Bratanov Link to this post

    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.

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 01 Sep Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top