This is a migrated thread and some comments may be shown as answers.

javascript error when setting custom css class

3 Answers 89 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Mattias
Top achievements
Rank 1
Mattias asked on 02 Feb 2010, 08:16 AM
Hi,
I have a really strange problem, if I remove the padding-left the page works, else I get javascript error:

 
Användaragent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) 
Tidsstämpling: Tue, 2 Feb 2010 08:11:01 UTC 
 
 
Meddelande: Ogiltigt argument. (invalid argument) 
Rad: 864 
Tecken: 1 
Kod: 0 
URI: http://mysite.se/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3asv-SE%3a0d787d5c-3903-4814-ad72-296cea810318%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2009.3.1314.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3asv-SE%3a603d133a-f943-435d-a80d-57457cc55f4a%3a16e4e7cd%3a11a04f7e 
 
 


<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"
    <title></title
     <style type="text/css">     
        .radSplitterNews 
        { 
            padding-left:5px; 
        } 
     </style> 
    
</head> 
<body> 
    <form id="form1" runat="server"
 
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" OutputCompression="AutoDetect"></telerik:RadScriptManager> 
         
    <telerik:RadSplitter ID="RadSplitter1" Runat="server" 
         ResizeWithParentPane="true" VisibleDuringInit="false" Width="100%" 
        PanesBorderSize="0" BorderSize="0"
        <telerik:RadPane id="MainPane" runat="server" BorderWidth="0" Scrolling="None"
           panel 1 
        </telerik:RadPane> 
        <telerik:RadSplitBar id="RadSplitbar1" runat="server" CollapseMode="Backward"></telerik:RadSplitBar> 
        <telerik:RadPane id="NewsPane" runat="server" width="210" Scrolling="None" BorderWidth="0" CssClass="radSplitterNews"
           panel2 
        </telerik:RadPane> 
    </telerik:RadSplitter> 
 
    </form> 
</body> 
</html> 

Should the splitter breaks just because of some css code?! Strange!
(using version: 2009.3.1314.35)
 
Regards,
Mattias

3 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 04 Feb 2010, 02:15 PM
Hi Mattias,

Would you please explain what is the exact result you want to achieve with this style? Padding means offset of the child elements according to their parent and you cannot offset the RadPanes from the RadSplitter.

If what you want is to have an offset of the content of a pane from the pane, you should nest a DIV element in the pane which is 100% of the pane and set the padding to it - this will display the content in the desired manner. Note, that the correct way is with a wrapper DIV because if you set it directly to the RadPane this might cause problems in the complex calculations the splitter performs.

Sincerely yours,
Svetlina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
0
Mattias
Top achievements
Rank 1
answered on 04 Feb 2010, 03:19 PM
Hi Svetlina,
I want exactly as you describe, offset the content inside the pane.
I tried to add a div as a wrapper and that worked fine...

...but I still think it's a strange behavior!
My padding-left offsets the content inside the parent block which means the radpane (is just a div tag) has the same position even with my padding-left.
If I had set margin-left though then the radpane would change position.
Correct me if I'm wrong!

(and I can't see why any calculation should be necessary inside the pane, it should just calculate the pane itself!?)

Regards,
Mattias
0
Svetlina Anati
Telerik team
answered on 10 Feb 2010, 06:03 AM
Hi Mattias,

The calculations the splitter performs depend a lot on the used configurations and scenario and thus it is not recommended to set styles related to padding, margin, border, etc  the way have done this (it is OK to set colors, fonts, etc in this manner since they cannot affect the control's caluclations).  With the code you have provided the issue you report is not reproduced - please accept my apologies for not mentioning this - I thought that in your original configuration you have additional settings which influence this and thus I thought that providing the correct way to style the content of the pane will be the fastest way to help you solve the problem and also to avoid further problems.

I prepared and attached a sample video capture of the tests of your code - I tested not only under FF but also under IE, with v 2009.3.1314.35 as you have noted and I also resized the browser (since no error was thrown on initial load) but to no avail - I could not get the js error you report. In case you want to further research this, please prepare and send code which is fully runnable and reproduces the issue along with very detailed reproduction steps. If the provided solution with a DIV also does not work for you you can provide more details why and we will think for the best advice we can provide for your specific case. 

Best wishes,
Svetlina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
Tags
Splitter
Asked by
Mattias
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Mattias
Top achievements
Rank 1
Share this question
or