+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Need to set height in control editor dialog

Need to set height in control editor dialog

4 posts, 0 answered
  1. Harry
    Harry avatar
    3 posts
    Registered:
    02 May 2011
    03 Aug 2011
    Link to this post
    I have implemented a solution following the example code in the developers manual for adding complex properties to a user control and managing them with a radgrid.
    http://www.sitefinity.com/help/developer-manual/controls-adding-controls-type-editors.html

    My problem is that if the user adds more than a certain number of property instances, the grid rows disappear out  of the bottom of the dialog window and there is no scroll bar.

    I would like to be able to BOTH set the height of this dialog window, AND optionally specify scroll bars.  How can I do this?

    Thanks - Harry Poulter, CDM

    Update: I thought I had it when I discovered the "PopupSettings" element in the type editor template.  But changing this seems to have no effect.  I know it is loading the changed template, because I added some test text, but the the dialog is still the same height and has no scroll bars.  That is the popup for the radgrid, not the dialog the radgrid is in, I realize now.

    Update 2 - I realized I can use the radgrid's ClientSettings-Scrolling-AllowScroll and ClientSettings-Scrolling-ScrollHeight properties to make the grid scroll. which solves my major problem.  I would still like to make the continuing form larger, if possible.



  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    08 Aug 2011
    Link to this post
    Hi Harry,
    div.Dialog {
        background: none repeat scroll 0 0 #EDEDED;
        border: 1px solid #666666;
        margin: 0 !important;
        padding: 10px 15px 15px;
        position: absolute;
        width: 80%;
        z-index: 10000;
    }
    div.Dialog {
        background: none repeat scroll 0 0 #F0F3F4 !important;
        border: 1px solid #666666;
        height: 450px !important;
        left: 230px;
        margin-right: 0;
        overflow: hidden;
        padding: 10px 15px 15px;
        position: absolute;
        top: 10px;
        width: 600px !important;
        z-index: 15000;
    }


    The sizes of the dialogs are set in the CSS file ~/Sitefinity/Admin/Themes/Default/PropertyDlg.css. For the selectors the rules are applied to div with class Dialog. Below is a portion of this file:

    To override this you have to add rules in your dialog that will override the default ones. You should use the !important directive.

    Greetings,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Harry
    Harry avatar
    3 posts
    Registered:
    02 May 2011
    08 Aug 2011
    Link to this post
    "To override this you have to add rules in your dialog that will override the default ones. You should use the !important directive"

    Could you give me a little more detail?  It's not really my dialog, it is launched by the framework when a user clicks on the Select button for the property.  Where exactly can I put the stylesheet code to overrule the size on this dialog, and not on all dialogs?  I tried adding a <STYLE> block inline in my ascx file for the "item editor" control which contains the content of the dialog, but it doesn't seem to have any effect.






  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    11 Aug 2011
    Link to this post
    Hi Harry,

    Lets take for example the Lists type editor. I have added the style tag to its template and the custom width rule I set gets applied, please review the attached image. You should do the same in your template. Bellow is the template markup I have used:
    <%@ Control Language="C#" %>
    Test
    <style type="text/css">
    div.Dialog {
        background: none repeat scroll 0 0 #EDEDED;
        border: 1px solid #666666;
        margin: 0 !important;
        padding: 10px 15px 15px;
        position: absolute;
        width: 80%;
        z-index: 10000;
    }
    div.Dialog {
        background: none repeat scroll 0 0 #F0F3F4 !important;
        border: 1px solid #666666;
        height: 450px !important;
        left: 230px;
        margin-right: 0;
        overflow: hidden;
        padding: 10px 15px 15px;
        position: absolute;
        top: 10px;
        width: 800px !important;
        z-index: 15000;
    }
    </style>
     
    <asp:DropDownList ID="providersList" runat="server" AutoPostBack="true"></asp:DropDownList>
    <h4 class="multyhead"><asp:Literal runat="server" Text="<%$Resources:AllLists %>"/></h4>
    <div class="configTools multy">
    <asp:GridView ID="lists" runat="server"
                  AllowPaging="true"
                  DataKeyNames="ID"             
                  AutoGenerateColumns="false"
                  PageSize="30"             
                  AllowSorting="true"
                  GridLines="none"
                  CssClass="listItems"
                  >
        <Columns>
            <asp:ButtonField ButtonType="link" Text="<%$Resources:Select %>" CommandName="select"><ItemStyle CssClass="gridActions" /></asp:ButtonField>
            <asp:BoundField DataField="Name" HeaderText="<%$Resources:Name %>" SortExpression="Name" />       
        </Columns>
    </asp:GridView>
    </div>
    <h4 class="multyhead"><asp:Literal runat="server" Text="<%$Resources:SelectedLists %>"/></h4>
    <div class="configTools multy">
    <asp:GridView ID="selectedLists" runat="server"
                  AllowPaging="true"
                  DataKeyNames="ID"             
                  AutoGenerateColumns="false"
                  PageSize="30"             
                  AllowSorting="true"
                  GridLines="none"
                  CssClass="listItems"
                  >
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="<%$Resources:List %>" />
            <asp:ButtonField ButtonType="link" Text="<%$Resources:Up %>" CommandName="moveUp" HeaderText="<%$Resources:Move %>"><ItemStyle CssClass="gridActions" /></asp:ButtonField>
            <asp:ButtonField ButtonType="link" Text="<%$Resources:Down %>" CommandName="moveDown" HeaderText="<%$Resources:Move %>"><ItemStyle CssClass="gridActions" /></asp:ButtonField>
            <asp:ButtonField ButtonType="link" Text="<%$Resources:Remove %>" CommandName="remove"><ItemStyle CssClass="gridActions" /></asp:ButtonField>
             
        </Columns>             
    </asp:GridView>
    </div>


    Kind regards,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
4 posts, 0 answered