TabPanel rendering components

#1

How can you render a component contained in a Tab Panel in a different location than the location where the TabPanel is rendered?

#2

What do you mean? Can you provide a drawing of what you want to achieve?
if you’re looking for an example on how to create a tabs then:

            {
                "component": "UIViewTabPanel",
                "id": "FacilityTabPanel",
                "format": "pills",
                "alignment": "left",
                "renderTo": "#TabContent",
                "components": [
                    {
                        "id": "home",
                        "title": "{~EnergyManagement.Facility.FacilityTabPanel.HomeTabTitle~}",
                        "component": "EnergyManagement.FacilityHome",
                        "data": {
                            "record": "record"
                        }
                    },
                   . . .
                ]
            }
#3

Right now, I have something like this. But I would like to move the component, which is displayed through the tab clik, to the right (as shown by the red arrow).

Futhermore, I want the values of the Definitionlist to be displayed on the same line. I tried with “inline”: true, but it doesn’t change anything. thanks

#4

You may modify the template of your component in this case.

#5

Where do the rendered components usually land, simply below the “tabs”? There’s no way to control where the components need to be rendered?

#6

Here is an example of how by default tabs of UIViewTabPanel are displayed, to the left you have the list of your tabs, to the right you have the component attached to this tab.

#7

Many thanks, changing the format to pills solved the problem.

Maybe you can help with this as well? As you can see from the previous image the values (of eg. status & likelihood score) are somehow shifted a bit down with respect to their label.