Text hidden by scrollbar

[Herve]

Hello,

I'm using a RadSplitter containing a RadPane and I only want a Scrolling="Y" in case of need.

My problem is that when a long text is posted, the Y scrollbar appears but hide a few characters at the right of the text (see attached shot), and the following demo has the same issue (1st column 2nd line).

I was thinking that adding a div with a smaller width and/or a padding right should fix the problem but this is not the case, when I load a new message my content takes the 100% of the Radpane and a part of the text is hidden.

I do not want to us an horizontal scrollbar because this isn't really nice and a text should be easily included in a container, is there a way to do it ?

Also, is it possible to give a style to the scrollbar ?

Thanks,


Herve

<telerik:RadSplitter ID="Radsplitter" Height="100%" Width="520px" Orientation="Horizontal" runat="server">

<!-- Top Pane -->

 <telerik:RadPane ID="Rp1" runat="server" Width="100%"  Height="300"  Scrolling="Y">

<asp:Panel ID="PnlMessage" Width="500px" runat="server" >

<div  class="MessageSubject">

<div class="MessageSubjectTxt">

<asp:Literal ID="LitSubject" runat="server" />

</div>

<div  class="MessageSubjectBtn">

<telerik:RadButton ID="BtnReply" runat="server" Text="Reply" />

<telerik:RadButton ID="BtnNew" runat="server" Text="New" />

</div>

</div>

 

<div style="width: 500px; padding-right:20px;">

<asp:Literal ID="LitMessage" runat="server" />

</div>

 

</asp:Panel>

[Vessy]

Hi Herve,

The issue in the linked demo is caused by a the table configuration - the width set to the RadPane's nested  table is set to be bigger, than the width of the RadPane itself:

<telerik:RadSplitter ID="RadSplitter3" runat="server" Width="340px" Height="150px">
    <telerik:RadPane ID="RadPane3_1" runat="server" Width="160px" Scrolling="Y">
        <table style="width: 200px; height: 300px">
            ...

Setting the table's width to 100% fixes the issue in this scenario:

<telerik:RadSplitter ID="RadSplitter3" runat="server" Width="340px" Height="150px">
    <telerik:RadPane ID="RadPane3_1" runat="server" Width="160px" Scrolling="Y">
        <table style="width: 100%; height: 300px">
        ..

Since this does not seem to be the case in the provided by you code, though, I tried to reproduce the issue with it but to no avail, everything behaves properly on my side - video. Could you please provide more details regarding the specific scenario?

• Could you verify that you are using the 2013.3.1114 version of the controls like stated into the ticket info?
• Does the problem occurs in all browsers or only in a specific one?
• How are you adding the text to the literals? In my test I am doing it in the server page load event. I am attaching my test page to this message - could you modify it up to a point where the problem occurs and send it for a further investigation?

Looking forward to hearing from you,
Veselina Raykova
Telerik

[Herve]

Hello and thanks for you support.

I confirm you that I am using the version 2013.3.1114.40 version of the controls, the problem occurs in all the browsers.

I'm loading the literal text by clicking a message information into a RadGrid located in the bottom RadPan and ajaxified with a RadAjaxManagerProxy.

Isolating the problem is not really easy but let's say for example that I want to add a margin of 10px before the scrollbar or the end of the area if there is no need of a scrollbar, why in that case a div can't stop the text at the right size ?

I have added a border to the Div and made 2 shots (attached), the 1st is ok because at the load of the page no message is selected, the after clicking on any message (short or long) the border isn't shown because the div doesn't respect the given size anymore.

Again thanks,


Herve

<telerik:AjaxSetting AjaxControlID="RadGrid1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadGrid1"  LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
        <telerik:AjaxUpdatedControl ControlID="PnlMessage"></telerik:AjaxUpdatedControl>
        <telerik:AjaxUpdatedControl ControlID="PnlWriteMessage"></telerik:AjaxUpdatedControl>
    </UpdatedControls>

[Vessy]

Hi Herve,

Could you try to disable the Ajax and see whether the problem still occurs? I am asking you that because from the AJAX configuration provided in you previous reply I can see that you are updating different RadPanes, not Splitters. Note, that updating directly a RadPane is highly not recommended and not supported scenario. If you want to achieve a similar functionality you have to either update the content of the Pane or its parent Splitter. Please, refer this help article for more information on the subject: AJAX updates.

If the Splitter is configured properly, you can easily set margin to its child element in a standard way, as the width of the div + its padding should be equal to its parent pane:

<telerik:RadPane ID="Rp1" runat="server" Width="100%" Height="300" Scrolling="Y">
    <asp:Panel ID="PnlMessage" Width="500px" runat="server">
        <div class="MessageSubject">
            <div class="MessageSubjectTxt">
                <asp:Literal ID="LitSubject" runat="server" />
            </div>
            <div class="MessageSubjectBtn">
                <telerik:RadButton ID="BtnReply" runat="server" Text="Reply" />
                <telerik:RadButton ID="BtnNew" runat="server" Text="New" />
            </div>
        </div>
        <div style="width: 480px; padding-right: 20px;">
            <asp:Literal ID="LitMessage" runat="server" />
        </div>
    </asp:Panel>
</telerik:RadPane>

Hope this helps.

Regards,
Veselina Raykova
Telerik

[Herve]

Hello,

I have removed the ajax proxy and the result is the same both in IE and Firefox.

I'm going to edit the ajax as you have advised me to refresh the parent splitter.

Thanks for your support,


Herve

[Dobromir]

Hi Herve,

I hope the AjaxSettings modifications solved the case.

I will close the thread for now, if you need additional assistance you can reopen it again.

Regards,
Dobromir
Telerik

[Herve]

Hello,

Removing the ajax didn't fix the problem as mentioned in my previous post.

I have checked the ajax and it update only the content of the Panel.

Have also tried to apply a margin to its child elements but have the same problem when a message in opened.

Thanks,


Herve

[Marin Bratanov]

Hello Herve,

This seems to be quite a peculiar case, and at this point I can advise the following:
- try adding padding as my colleague Veselina suggested on the 23rd of January, so that this accommodates the presence of a scrollbar. You can try to increase this padding a little
- look for CSS rules that may be causing the div to be too wide, you could try temporarily removing all CSS from the page to see if this makes a difference with this particular element
- if neither helps, please try to send us a sample where we can see the problem and inspect it locally, so that we can offer a more concrete response instead of just guessing. Actual layout, data and logic are not needed, just remove pieces of the page until only the problem remains. It is likely that in the process you will find the problematic control/element even without going to the end.


Regards,
Marin Bratanov
Telerik