I want align my checkbow with my radfilter

5 posts, 0 answers
  1. Alexandre
    Alexandre avatar
    18 posts
    Member since:
    Sep 2013

    Posted 12 Nov 2013 Link to this post

    Hi,

    In my program i want aligned my element checkbox whith my element radfilter but they can't.

    In my internet page we see:

    checkbox
    radfilter

    or the inverse.

    i don't want use <table>.

    My code:
    <telerik:RadFilter ID="RadFilter1" runat="server" Culture="fr-FR" Skin="Metro" FilterContainerID="RGArchives" >  </telerik:RadFilter>
            
           <asp:CheckBox ID="cbxRadFilter" runat="server" AutoPostBack="True" Text="Masquer la gestion des filtres" />

    Thank you :)

    P.S: Sorry for my approximate English
  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 15 Nov 2013 Link to this post

    Hi Alexandre,

    RadFilter is wrapped in a <div> html element. The <div> is a block-level element. As described in W3 standards "In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block". That's why the checkbox is placed under the RadFilter. In order to prevent this behavior you can use floats.

    Here is an example:

    ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <style type="text/css">
            .wrapper {
                border: 1px solid red;
                width: 800px;
            }
     
            .wrapper:after {
                content: "";
                display: block;
                clear: both;
            }
     
            .right {
                float: right;
            }
     
            .left {
                float: left;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" ID="rsm1"></telerik:RadScriptManager>
            <div class="wrapper">
     
                <telerik:RadFilter ID="RadFilter1" runat="server" Culture="fr-FR" Skin="Metro" FilterContainerID="RGArchives" CssClass="left"></telerik:RadFilter>
     
                <asp:CheckBox ID="cbxRadFilter" runat="server" AutoPostBack="True" Text="Masquer la gestion des filtres" CssClass="right" />
     
     
            </div>
        </form>
    </body>
    </html>

    I hope this helps.

    Regards,
    Venelin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alexandre
    Alexandre avatar
    18 posts
    Member since:
    Sep 2013

    Posted 15 Nov 2013 Link to this post

    It 's the same output as if I used a table. I wish the two elements is truly coast to coast. Too bad, it will do I think.

    Thx
  5. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 15 Nov 2013 Link to this post

    Hi,

    If you want the elements close simply adjust their widths:

    CSS:

    .wrapper {
        border: 1px solid red;
        display: inline-block;
    }
     
    .wrapper:after {
        content: "";
        display: block;
        clear: both;
    }
     
    .right {
        float: right;
    }
     
    .left {
        float: left;
    }
     
    div.RadFilter {
        width: 130px;
        min-width: 130px;
    }


    Regards,
    Venelin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Alexandre
    Alexandre avatar
    18 posts
    Member since:
    Sep 2013

    Posted 18 Nov 2013 Link to this post

    Ok thx.


    Regards,
    Alexandre Lelong
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017