textArea Component is not showed under accordion -> tab layouts

Support
#1

Hi,
I not understood why I not see textArea component under accordion → tab layouts, the code:

...
 <accordionPanel id="commentsImages" summaryText="msg://commentsImages.summaryText">
                <tabs id="extendetInformationTabs" height="100%" width="100%">
                    <tab id="descriptionTab" label="msg://descriptionTab.label">
                        <hbox id="contentTextArea" width="100%">
                            <textArea id="commentsField"
                                      height="100%"
                                      width="100%"
                                      dataContainer="pasaportDc"
                                      property="comments"/>
                        </hbox>
                    </tab>
                    <tab id="probeImages" label="msg://probeImages.label"/>
                </tabs>
            </accordionPanel>
...

I have:
image

If I move outside tab component works:

...
  <accordionPanel id="commentsImages" summaryText="msg://commentsImages.summaryText">
                <hbox id="contentTextArea" width="100%">
                    <textArea id="commentsField"
                              height="100%"
                              width="100%"
                              dataContainer="pasaportDc"
                              property="comments"/>
                </hbox>
                <tabs id="extendetInformationTabs" height="100%" width="100%">
                    <tab id="descriptionTab" label="msg://descriptionTab.label">

                    </tab>
                    <tab id="probeImages" label="msg://probeImages.label"/>
                </tabs>
            </accordionPanel>
...

textArea component is displayed:

image

but I need to work under accordion->tab layout.

Where is my mistakes or how I do that. :thinking:

#2

Hi!

Tabs and TabSheet are different components. This is how it became in Vaadin Flow.
Most likely you need a tabsheet.

The nested tabs component loads it directly into the tab. The nested tabsheet component loads it as display content.

See docs: tabs :: Jmix Documentation, tabSheet :: Jmix Documentation
See UI samples:
https://demo.jmix.io/ui-samples/sample/tabs-simple
https://demo.jmix.io/ui-samples/sample/tabsheet-simple

#3

Dmitriy,
Thank you!
Work now:

...
<accordionPanel id="commentsImages" summaryText="msg://commentsImages.summaryText" width="100%">
                <tabs id="extendetInformationTabs" height="100%" width="100%">
                </tabs>
                <tabSheet id="tabSheet" width="100%" height="100%">
                    <tab id="descriptionTab" label="msg://descriptionTab.label">
                        <hbox id="contentTextArea" width="100%" height="100%">
                            <textArea id="commentsField"
                                      height="100%"
                                      width="100%"
                                      dataContainer="pasaportDc"
                                      property="comments"/>
                        </hbox>
                    </tab>
                    <tab id="probeImages" label="msg://probeImages.label">
                        <hbox>

                        </hbox>
                    </tab>
                </tabSheet>
            </accordionPanel>
...

is displayed OK
image

I used tabs because I have errors with child permission, now I saw on documentation:
" Each tab can contain only one child component." for tabSheet.

1 Like