Expand Notification Upwards

[jwhitley]

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.

[Marin Bratanov]

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

[jwhitley]

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!