Datepicker inline

5 posts, 1 answers
  1. Paul
    Paul avatar
    21 posts
    Member since:
    Sep 2011

    Posted 08 Dec 2011 Link to this post

    I'm new to radcontrols and need to know how to set the date picker to line up with the other controls... It's below the line a the line a little bit from the pictures.  I'm not sure how to correct this error.

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
        <style type="text/css">
        .formLayout
        {
            background-color: #f3f3f3;
            border: solid 1px #a1a1a1;
            padding: 10px;
            width: 300px;
        }
        
        .formLayout label, .formLayout input
        {
            display: block;
            width: 120px;
            float: left;
            margin-bottom: 10px;
        }
     
        .formLayout label
        {
            text-align: right;
            padding-right: 20px;
        }
     
        br
        {
            clear: left;
        }
        </style>
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <div class="formLayout">
            <label>Title</label>
            <select>
                <option>Mr.</option>
                <option>Dr.</option>
                <option>Ms.</option>
                <option>Mrs.</option>
            </select><br />
            <label>First Name</label>
            <input id="name" name="name"><br />
            <label>Last Name</label>
            <input id="Text1" name="name"><br />
            <label>Move in date:</label>
            <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
            </telerik:RadDatePicker><br/>
            <label>Address</label>
            <input id="address1"><br />
    </div>
    </asp:Content>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Dec 2011 Link to this post

    Hello,

    I have tried to reproduce the issue but no avail. Try the following CSS.
    CSS:
    <style type="text/css">
     .RadPicker .rcCalPopup, .RadPicker .rcTimePopup
      {
        height:24px !important;
      }
    </style>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul
    Paul avatar
    21 posts
    Member since:
    Sep 2011

    Posted 09 Dec 2011 Link to this post

    Still having the same issue, it get really weird if I put asp label and asp input.

    See the pictures.
  5. Answer
    Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 12 Dec 2011 Link to this post

    Hello Paul,

    After looking at your page in Chrome, I noticed that the problem with your page is the margin you're applying to the bottom of your input elements. This is what's causing the calendar image to appear lower than usual.

    If you add this style, it should fix you're issue:

    .RadPicker .RadInput .riTextBox
    {
        margin-bottom: 0px !important;
    }

    I hope that helps.

  6. Paul
    Paul avatar
    21 posts
    Member since:
    Sep 2011

    Posted 12 Dec 2011 Link to this post

    Thanks
        I change the html file to for the span and input.

        .RadPicker span, .RadPicker input
        {
            margin-bottom: 5px !important;
            padding-right: 0px !important;
        }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017