Question

在Vaadin 13中，我想对HTML样式的TextArea标签使用flex-direction，但是它不起作用

%c

textArea1.addClassName("my-text-area1");
textArea2.addClassName("my-text-area2");

对于第一个文本区域，我希望TextArea Label对齐列/中心，对于第二行/灵活开始。关于如何解决此问题的任何想法？

Answer 1

您试图将flex-direction用于什么？标签部分中没有任何元素可能会受到方向变化的影响...因此，您可能希望将方向应用于其他部分。

如果您希望标签位于值的左侧，则需要执行类似的操作

<dom-module theme-for="vaadin-text-area" id="style-for-text-area">
    <template>
        <style>
            :host(.my-text-area) [part="label"]{
                padding-right: 5px;
            }
            :host(.my-text-area) .vaadin-text-field-container {
                flex-direction: row;
            }    
        </style>
    </template>
</dom-module>

以上样式也可能会更改需要设置组件的宽度和高度以实现最佳外观的方式。

还要注意为标签添加的填充。

如何在Vaadin 13中使用CSS的flex-direction属性？

1 个答案: