[CLOSED] Button Display Issue - TreePanel Buttons within a DropDownField used as a Grid Editor

[baeseuser]

Hi,

I think we have come across a css issue with the classic theme but want to post here to verify.

When using buttons in a treepanel within a dropdownfield, we are seeing background grid text in the area around the buttons for classic...



...where using a theme like triton seems to handle this case.



If this is an issue is there a best way to remedy this?


The basic layout for reference:

<ext:Column runat="server" Text="Column Editor" DataIndex="ourdata" Width="300">
																	
                                                                    <Editor>
                                                                        <ext:DropDownField ID="dd1" runat="server" Editable="false" Width="400" MaxHeight="300" Scrollable="Both">
                                                                            <Component>
                                                                                <ext:TreePanel
                                                                                    ID="tree1"
                                                                                    runat="server"
                                                                                    Title="Replacements"
                                                                                    Height="300"
                                                                                    UseArrows="true" AutoScroll="true" Animate="true" ContainerScroll="true" RootVisible="false">
                                                                                    <Root>
                                                                                        <ext:Node NodeID="-1" Text="testnode" />
                                                                                    </Root>
                                                                                    <Buttons>
                                                                                        <ext:Button ID="ButtonReplaceAll" runat="server" Text="Replace Always" Icon="Connect">
                                                                                            <Listeners>
                                                                                                <Click Handler="#{DirectMethods}.DoStuff(1); #{dd1}.collapse();" />
                                                                                            </Listeners>
                                                                                        </ext:Button>
                                                                                        <ext:Button ID="ButtonReplaceSingle" runat="server" Text="Replace" Icon="Accept">
                                                                                            <Listeners>
                                                                                                <Click Handler="#{DirectMethods}.DoStuff(0); #{dd1}.collapse();" />
                                                                                            </Listeners>
                                                                                        </ext:Button>
                                                                                    </Buttons>
                                                                                    <Listeners>
                                                                                        <Show Handler="dosomething(#{tree1});" />
                                                                               
                                                                                    </Listeners>
                                                                                    <Tools>            
                                                                                        <ext:Tool Type="Refresh" Handler="domorestuff(#{tree1});" />
                                                                                    </Tools>
                                                                                </ext:TreePanel>
                                                                            </Component>
                                                                        </ext:DropDownField>
                                                                    </Editor>
												                </ext:Column>

[fabricio.murta]

Hello @baeseuser!

It really looks like this level of recursion of the dropdown field leads to a scenario where perhaps the inherited CSS settings means as much as the toolbar background being transparent in some themes.

To diagnose this we'd need to reproduce in our end. You can probably avoid the issue with a simple CSS override that could even work regardless of the current theme -- that is, it wouldn't break already working themes. If you want us to take a look on what's going on, please provide a runnable test case.

I don't remember seeing this specific issue elsewhere, from other threads or in examples. But it does really push a little the recursion when, for what I can see, you have a grid, with a cell editor that is a dropdown and which its inner component is a tree panel... with a toolbar with buttons!.. :) So it's really possible that some "style" would "cascade" through its "sheets" into something unintended.

Looking forward to your follow-up!

[baeseuser]

Does look like a css issue but a simple style override to set background:white for specific ids was an acceptable fix in our case. Thanks!

[fabricio.murta]

Thanks for the feedback, I agree this looks like a CSS issue, especially as it happens for some themes and not other ones.

I will mark this as closed for now, but if you want further assistance with this issue, let us know.