PDA

View Full Version : [CLOSED] Problem on Tooltip's padding after updating from SVN



RCN
Apr 16, 2013, 5:16 PM
After updating from SVN i realized some changes on rendering of UL elements inside a ToolTip. It's easy to see on the following image a strong padding left.

6033


<ext:FormPanel ID="FormPanel1" Title="Ext.Net" Width="350" Height="100" BodyPadding="5"
Layout="Form" Margin="10" runat="server">
<FieldDefaults LabelAlign="Top" />
<Items>
<ext:TextField ID="DateField1" FieldLabel="Mouse Over Me " AnchorHorizontal="100%"
runat="server">
<ToolTips>
<ext:ToolTip ID="ToolTip1" Title="Tooltip" runat="server">
<Content>
<ul>
<li>Ext.Net</li>
<li>Ext.Js</li>
<li>Eco Ray Tango</li>
</ul>
</Content>
</ext:ToolTip>
</ToolTips>
</ext:TextField>
</Items>
</ext:FormPanel>


It's possible to overcome this issue by setting the UL's Padding Left property, as shown below (Line 10):

6034


<ext:FormPanel Title="Ext.Net" Width="350" Height="100" BodyPadding="5" Layout="Form"
Margin="10" runat="server">
<FieldDefaults LabelAlign="Top" />
<Items>
<ext:TextField ID="DateField1" FieldLabel="Mouse Over Me" AnchorHorizontal="100%"
runat="server">
<ToolTips>
<ext:ToolTip Title="Tooltip" runat="server">
<Content>
<ul style="padding-left: 15px !important;">
<li>Ext.Net</li>
<li>Ext.Js</li>
<li>Eco Ray Tango</li>
</ul>
</Content>
</ext:ToolTip>
</ToolTips>
</ext:TextField>
</Items>
</ext:FormPanel>


I would like to know whether this is a bug, and if it is the expected behaviour, whether my approach to overcome this issue is acceptable.

Thanks in advance

Vladimir
Apr 16, 2013, 7:04 PM
ExtJS 4.2.0 doesn't reset global css styles (default browser styles) anymore therefore you see such padding
So, it is expected behaviour

You can set css reseting via ResetStyles property of ResourceManager or via web.config

RCN
Apr 16, 2013, 8:56 PM
Do you know the costs associated with performing this operation? i become afraid about performing it, once Ext.Js not longer does it.

Vladimir
Apr 16, 2013, 9:03 PM
What do you mean under "cost" term?
Reseting styles is just applying special css rules to base html tags
You can read about it in the following article
http://meyerweb.com/eric/tools/css/reset/

RCN
Apr 16, 2013, 9:28 PM
Than you Vladmir.

I meant performance ... I wonder why Ext.Net team stopped performing this operation.

I will read more about it. I will update this task if i find anything interesting

Daniil
Apr 17, 2013, 5:10 AM
I meant performance ... I wonder why Ext.Net team stopped performing this operation.


There is the following in the Release Notes for Ext JS 4.2.0 RC 1.

EXTJSIV-8383 Themes should not use resetCSS and related scopeResetCSS and styleHtmlContent

So, it comes to Ext.NET from ExtJS.

I found the following discussion regarding that and asked the question.
http://www.sencha.com/forum/showthread.php?257223

RCN
Apr 17, 2013, 5:59 AM
Thank you Daniil. Your question on Ext.Js forum is exactly what i am expecting to know. Let's gonna wait to hear something from them.

Daniil
Apr 17, 2013, 6:51 AM
Geoffrey answered:
http://www.sencha.com/forum/showthread.php?257223#post958165

RCN
Apr 17, 2013, 11:39 AM
Thank you Daniil, Geoffrey and Vladmir.


ExtJS 4.2.0 doesn't reset global css styles (default browser styles) anymore therefore you see such padding
So, it is expected behaviour

You can set css reseting via ResetStyles property of ResourceManager or via web.config

Thinking about everything discussed, i arrived at the conclusion that it's better to use Ext.Js new "default" behaviour.

Daniil
Apr 17, 2013, 11:43 AM
A good choice.

Do you mind we close the thread?

RCN
Apr 17, 2013, 11:44 AM
I have two more questions: as far as i understood, now it's no longer necessary to set !important to override a style set by Ext.Js, is it ok? In other words, it's possible to set any style to any Ext.Js element, ok?

Thank you guys. Once again, thumbs up to both of you.

RCN
Apr 17, 2013, 11:55 AM
Sure Daniil, please mark this thread as closed