TreeView展开/折叠图像未与节点文本对齐 [英] TreeView expand/collapse images aren't aligned with node text

问题描述

我已经在ASP.NET 3.5中构建了一个TreeView，它工作得很好，除了展开和折叠图像(20px x 20px)不能与节点中的文本正确对齐.

下面是适用树的屏幕截图的链接，其中所有项目均已选中，以使您能够看到项目在何处排列.我需要将文本垂直居中(通过一种或多种方式)，以便使其与展开/折叠图像的中心对齐.

我尝试了许多技巧来实现这一目标，包括CSS，但似乎找不到正确的技术.特别是我的CSS似乎被忽略了.

任何和所有建议将不胜感激.

http://lifetimelegacies.com/TreeView.png

I''ve built a TreeView in ASP.NET 3.5 and it works great, except the expand and collapse images (which are 20px by 20px) do not align properly with the text in the nodes.

Below is a link to the screen shot of the applicable tree, with all items selected to allow you to see where the items are lined up. I need the text to be vertically centered (by one means or another) so it lines up with the center of its expand/collapse image.

I''ve tried numerous tricks to make this happen, including CSS, but can''t seem to find the right technique. In particular, my CSS seems to be ignored.

Any and all suggestions will be appreciated.

http://lifetimelegacies.com/TreeView.png

推荐答案

感谢Sandeep-

我已经尝试了数十种变体来应用CSS，但是到目前为止还没有运气.我同意看起来像是垂直对齐:中间应该可以工作，但是如何应用它呢?

TreeView中的CSSStyle属性似乎仅适用于节点文本.

我什至尝试用样式树形图将整个树包装在div标签中，如下所示:

.treestick td {vertical-align:middle！important;}，但这也不起作用.到目前为止，也没有设置边框-它只是没有显示出来.当我在Firefox中查看div的CSS时，它表明它正在使用中，但没有显示出来.

难道是TreeView控件本身以某种方式覆盖了我的所有尝试?我知道它们在渲染时会创建自己的ID，并且包含内嵌样式-但我无法对其进行修改.

真正奇怪的是，每当您看到一棵树时，+/-就会与文本完美对齐，而我的却不是.因此，我正在某处做某事来影响这一点很有意义.

我正在使用嵌套的母版页，并且在布局的左栏中有树.它也在面板内，因此我可以管理自动滚动条.我的CSS文件在顶级母版页中被引用，并且所有样式在该页中的其他任何地方都可以正常工作-只是树有问题.

除了内置属性之外，是否真的可以将样式应用于树?

谢谢-史蒂夫(Steve)

Thanks Sandeep -

I''ve tried dozens of variations to get the CSS applied, but so far with no luck. I agree that it looks like vertical-alignment:middle should work but how to get it applied?

The CSSStyle attributes in the TreeView seem to apply to the node text only.

I even tried wrapping the whole tree in a div tag with a style treestick as:

.treestick td {vertical-align:middle !important;} but that has no effect either. Nor, so far, has putting up a border - it just doesn''t show up. When I look in Firefox at the CSS for the div, it shows that it''s being used, but yet it doesn''t show up.

Could it be that the TreeView control itself somehow overrides all my attempts? I know that they create their own id''s when rendered and they include inline styling - but I haven''t been able to get that modified.

The really strange thing is that every time you see a tree the +/- are aligned perfectly with the text, yet mine isn''t. So it makes sense that I''m doing something somewhere to affect this.

I''m using nested master pages and have the tree in the left column of the layout. It''s also inside a Panel so I can manage the auto scroll bars. My CSS file is referenced in the top master page and all that styling works fine everywhere else in the page - just have a problem with the tree.

Is it really possible to apply styles to the tree other than the built-in attributes?

Thanks - Steve

问题是控件生成的td标签具有vertical-align:baseline.发生这种情况的原因是，在我的CSS文件的顶部，我进行了一次大重置"，将59个标记的样式设置为默认值-从而使任何浏览器的行为与其他浏览器的行为相同. />
但是，那时我无法覆盖这些标签以使其具有vertical-align:middle. TreeView控件中没有内置样式会影响td标签.

因此，我在TreeView周围应用了Panel控件，并在VS中设置了高度，宽度和溢出属性，并添加了CSSClass文件"tree".这似乎也没有达到预期的效果.然后，我从Microsoft获得的信息表明，在单个控件中同时使用内联样式和外部样式可能会产生不可预测的"结果.

我删除了内联样式，并将它们包括在CSSClass文件中，如下所示:

.tree {高度...宽度...溢出...}和.tree td {vertical-align:middle;}

最初，此样式也未应用，因此我尝试了另外两个步骤.

1)我重建了整个网站

2)我清除了Firefox中的缓存

样式已正确应用，并且树现在在浏览器中按预期显示.

问题解决了！

The problem was that the td tags generated by the control had vertical-align:baseline. This occurred because at the top of my CSS file I have a "big reset" that sets the style of 59 tags to default values - having the effect of making any browser''s behavior the same as any other''s.

But, then I was not able to override that to have vertical-align:middle for these tags. There are no built-in styles in the TreeView control that affect td tags.

So I applied a Panel control around the TreeView and set the height, width, and overflow attributes from within VS, and added a CSSClass file ''tree''. This didn''t seem to have the desired effect either. Then I found info from Microsoft that using both inline and external styles in a single control could produce "unpredictable" results.

I removed the inline styles and included them in the CSSClass file as follows:

.tree {height... width... overflow...} and .tree td {vertical-align:middle;}

Initially, this styling didn''t get applied either, so I tried two further steps.

1) I rebuilt the entire site

2) I cleared the cache in Firefox

The styles were applied correctly and the tree now displays as expected in the browser.

Problem solved!

这篇关于TreeView展开/折叠图像未与节点文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！