Expand Notification Upwards

3 posts, 1 answers
  1. jwhitley
    jwhitley avatar
    41 posts
    Member since:
    Oct 2006

    Posted 07 Aug 2013 Link to this post

    I want to display a single notification at the lower right of the browser window. Within this notification is an expandable DIV element.

    When the DIV is expanded, the notification height changes OK, but it expands downwards off the screen. I want it to expand upwards, so the lower position of the notification remains constant.

    How would I achieve this?

    Thanks.
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 09 Aug 2013 Link to this post

    Hi,

     An HTML element has its top fixed and when its height expands it grows downward. The RadNotification control is no exception - it has position: fixed then the top and left properties are calculated according to the browser viewport.

    What I can suggest is that you use the control's client-side API and set its width and height accordingly (i.e. increase the height as much as you need).
    <telerik:RadNotification ID="RadNotification1" runat="server" VisibleOnPageLoad="true"
        AutoCloseDelay="0" Position="BottomRight" Width="200px" Height="150px">
        <ContentTemplate>
            <div class="test">
                <asp:Button ID="Button1" Text="change div height" OnClientClick="changeDivHeight(); return false;"
                    runat="server" />
            </div>
        </ContentTemplate>
    </telerik:RadNotification>
    function changeDivHeight()
    {
        var heightDiff = 100;
        var theDiv = $telerik.$(".test");
        theDiv.height(theDiv.height() + heightDiff);
        var notification = $find("<%=RadNotification1.ClientID %>");
        notification.setSize(notification.get_width(), notification.get_height() + heightDiff);
        notification._show();
    }
    .test
    {
        background-color: Yellow;
        height: 100px;
    }


    Regards,
    Marin Bratanov
    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. jwhitley
    jwhitley avatar
    41 posts
    Member since:
    Oct 2006

    Posted 09 Aug 2013 Link to this post

    Thanks for the reply Marin.

    I wasn't sure how to calculate the increase in DIV height accurately (it expands based in dynamic content), but based on your example, I simply added the code:

    [code]

    notification.setSize(notification.get_width(), notification.get_height());

    notification._show();
    [/code]

    and it works perfectly.

    Thanks again!

Back to Top