Auto-size standard dialogs of RadAlert, RadPrompt and RadConfirm

43 posts, 0 answers
  1. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 20 Jun Link to this post

    Sorry I was not clear. The loaded form is an aspx but it is not a content of a master page. I did a little more testing of my test application to see why it appeared to work when the script was in the main wrapper page. What I found when I passed a lot of text as my message and made sure my radalert would need sizing was that the mainwrapper page script had no effect. It was not being used. I only used your script when I put it in my loaded page. In general, I lose the bottom border if my height for the RadAlert is not big enough. I think something similar is happening here. Although when I tried giving it a large height, I got a lot of blank lines but still lost the bottom border.
  2. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 20 Jun in reply to Ruth Goldberg Link to this post

    If the loaded form is an asp.net page, then you can easily use the code-behind approach to load the auto sizing script, but do it in loaded form page and not in wrapper page.  I had mentioned this in my last post on Friday last week.

    What is the problem if you just use the above approach in the loaded form only? All your other forms will not be affected and also you don't need to change anything in wrapper forms.

  3. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 20 Jun Link to this post

    I had tried the code-behind approach. I got the same result as just putting it in the markup, i.e. no bottom border. I plan to only put it in this form but it would be nice to get the border. It looks weird without it.
  4. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 20 Jun Link to this post

    I did try the code behind approach. It gave the same results as putting it in the markup, i.e. no bottom border.
  5. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 20 Jun in reply to Ruth Goldberg Link to this post

    Do you have a RadWindowManager in the loaded form aspx? If not then please make sure that it's there since the auto sizing script needs it.
  6. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 20 Jun in reply to Ruth Goldberg Link to this post

    Do you have a RadWindowManager in loaded form markup? This needs to be there for auto sizing script to work.
  7. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 21 Jun in reply to Ruth Goldberg Link to this post

    I think you should create a sample that closely reflects your situation and then post the code here. That way I can suggest a solution quickly rather than trying to intelligently guess.
  8. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 22 Jun Link to this post

    I have attached a sample. Not everything in it will be used. It was created for a support ticket and then modified to add what I needed. The files you will be concerned with are MainWrapper.aspx and mntThirdPartySpend.aspx. Open MainWrapper and click on the link on the bottom "Show Qlikview Add Group". That will call the function ShowGroup in mntThirdPartySpend.aspx. The hidden fields displayed are created in the code behind function GetUserGroup. The commented lines can expand the data so a vertical scroll bar will appear. All this is working fine. The only problem is the missing bottom border.

    You will have to add the Telerik dll files into the Bin folder. The only way I was able to get the zip file under 2MB was to remove them.

  9. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 22 Jun in reply to Ruth Goldberg Link to this post

    I found the problem.  You can see a video of how this works at https://goo.gl/i6kwTF. Also, a working project is attached which you can verify on your end.

    There are two issues being introduced by your code.

    • You have specified a CSS rule of overflow-y:hidden for a div element that is causing bottom border to be hidden. RadAlert has multiple div elements in its rendered html and this CSS rule therefore gets applied to each div element in radalert. Suc a CSS rule clips the bottom content of radalert div causing the bottom border to be not visible.  In  this case, you need to remove this style in mntThirdPartySpend.aspx as shown below. Remember never to hide overflow when using RadAutoSizing library since content is then clipped. So whichever page you include this library, all overflow hidden should be removed.
    • Also, when showing radalert from JavaScript you must make sure that the page does not post back. In your case, the page was posting back. You specified AutoPostback="false" for link button that opens the radalert, but this does not work since there is no AutoPostback property on asp linkbutton ( you can check this on MSDN documentation at MSDN documentation for LionkButton class). The correct way to prevent a page postback when using a link button is by returning false as in OnClientClick="ShowGroup(); return false;". I have provided the corrected code for this below.

    The way you have used RadScriptManager is correct since it needs to be included for each aspx page and you are not using user controls. So if you want to have radalert autosized in mainwrapper also on all pages of your app then just include the script in all pages within RadScriptManager and everything will work, but keep above two points in mind.

    Make sure when opening Radalert from client-side that page does not post back

    <asp:LinkButton ID="btnShowGroup" Text="Show QlikView Add Group" OnClientClick="ShowGroup(); return false;"  TabIndex="1"
                             CausesValidation="false" ToolTip="Show user's Qlikview group and user's domain" runat="server" Font-Size="XX-Small"></asp:LinkButton>

    Remove overflow hidden CSS rules when using autosizing library

    <style type="text/css">
         body, div, html
         {
             margin-top: 0px;
             margin-left: 0px;
             margin-right: 0px;
             margin-bottom: 0px;
             /*overflow-y: hidden;*/
         }
        
      </style>

     

  10. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 22 Jun Link to this post

    Thanks. It looks great now.
  11. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 22 Jun Link to this post

    Great. Let me know if you run into any other issues. 
  12. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 22 Jun in reply to Ruth Goldberg Link to this post

    In case you must include the CSS rule of overflow-y:hidden  for div elements, then you need to add another CSS rule as shown below to exclude all divs within radalert from using overflow-y:hidden.

    I tested with below CSS, and it worked as well as when you comment out overflow-y:hidden.

     

    <style type="text/css">
        body, div, html
        {
            margin-top: 0px;
            margin-left: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
           overflow-y: hidden;
        }
         
        /*All divs under radlert should have their overflow-y NOT set*/
          .RadWindow div {
            overflow-y:initial;
        }
     </style>

  13. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 22 Jun in reply to Ruth Goldberg Link to this post

    To support IE, you should replace initial with inherit.  This is related to an alternate solution I posted in my previous message.

     

    <style type="text/css">
        body, div, html
        {
            margin-top: 0px;
            margin-left: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
           overflow-y: hidden;
        }
         
        /*All divs under radlert should not have their overflow-y NOT set*/
          .RadWindow div {
            overflow-y:inherit;
        }
     </style>

Back to Top