How to Adjust Alignment of RadWindow Title?

3 posts, 1 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 17 Sep 2013 Link to this post

    I've tried several things in the CSS file to move a RadWindow's title further to the left.  But can't figure out how to do it.

    Here's my layout code:

    <telerik:RadWindow ID="rwDeleteMuckMoves" runat="server" Behaviors="Move" EnableShadow="true" VisibleStatusbar="false" VisibleTitlebar="true"
                       Title="Confirm Deletion" BorderColor="Black" AutoSize="true" Modal="true" IconUrl="">
      <ContentTemplate>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
          <ContentTemplate>
            <div class="dialogMain smallText" style="width:280px; padding:5px 0 0 0">
              <div style="margin-left:auto; margin-right:auto; padding-bottom:5px; text-align:center">
                <div style="text-align:left; padding:0 0 10px 12px">
                  <asp:Label ID="labelDeleteMuckMovesIntro" runat="server" />
                </div>
     
                <%--OnClientItemChecked="ControlButtonFromRadListBoxCheckboxes(this, 'buttonDeleteMMTaskOK')"--%>
                <telerik:RadListBox ID="rlbDeleteMMTasks" runat="server" Width="90%" OnItemCreated="rlbDeleteMMTasks_ItemCreated" EnableDragAndDrop="false" CheckBoxes="true">
                  <ItemTemplate>
                    <div class="smallText" style="text-align:left">
                      <table style="width:100%">
                        <tr>
                          <td class="muckListPrimary" style="width:68%">
                            <asp:Label ID="labelMMtitle" runat="server" />
                          </td>
                          <td style="text-align:right; width:32%">
                            <asp:Label ID="labelMMunits" runat="server" />
                          </td>
                        </tr>
                        <tr>
                          <td style="width:60%">
                            <asp:Label ID="labelMMequip" runat="server" />
                          </td>
                          <td style="text-align:right; width:40%">
                            <asp:Label ID="labelMMdist" runat="server" />
                          </td>
                        </tr>
                      </table>
                    </div>
                  </ItemTemplate>
                </telerik:RadListBox>
              </div>
     
              <div style="float:right; padding:5px 12px 5px 0">
                <asp:Button ID="buttonDeleteMMTaskOK" runat="server" Text="OK" Width="50" CssClass="smallText" Enabled="false" OnClick="buttonDeleteMMTaskOK_Click" />
                   
                <asp:Button ID="buttonDeleteMMTaskCancel" runat="server" Text="Cancel" Width="50" CssClass="smallText" OnClientClick="HideDialog('rwDeleteMuckMoves')" />
              </div>
     
              <div style="height:20px">
                  
              </div>
            </div>
          </ContentTemplate>
        </asp:UpdatePanel>
      </ContentTemplate>
    </telerik:RadWindow>
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Sep 2013 Link to this post

    Hi Robert,

    You can reduce the space allocated for the RadWindow icon and move the title to the left by setting its margin-left CSS property. Please have a look at the following CSS I tried which works fine at my end.

    CSS:
    <style type="text/css">
        .RadWindow .rwIcon
        {
            width: 0px !important;
        }
        .RadWindow_Default .rwTable .rwTitlebarControls em
        {
            margin-left: -5px !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 18 Sep 2013 Link to this post

    Thank you, Shinu!  I had to make one adjustment to what you presented but otherwise followed your lead.

    Your use of a -5px shift cut off the first letter of the RadWindow title (on my IE9 in IE7 Compatibility mode) so I changed it to -1px instead.

    Robert
Back to Top