cancel
Showing results for 
Search instead for 
Did you mean: 

SAP UI5 - HBox not fitting screen horizontally

I'm trying to place two panels horizontally so that they fit the screen.

I've tried with HBox but I didn't got the result I want.

What I want:

What I've got:

This is the XML code of the View:

<mvc:View controllerName="com.demetrio.dconcessionario.controller.Dashboard" 
    xmlns:mvc="sap.ui.core.mvc" 
    displayBlock="true" 
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:f="sap.f"
    xmlns:grid="sap.ui.layout.cssgrid">
    <App id="dashboard">
        <pages>
            <Page>
                <content>
                    <HBox>
                        <Panel
                        headerText="Marche"
                        expandable="true"
                        expanded="true"
                        class="sapUiResponsiveMargin">
                            <f:GridList
                                items="{path: 'marche>/'}"
                                mode="SingleSelectMaster">
                                <f:customLayout>
                                    <grid:GridBoxLayout boxWidth="80px"/>
                                </f:customLayout>
                                <f:GridListItem>
                                    <VBox>
                                        <OverflowToolbar design="Solid" class="sapUiSmallMarginBottom">
                                            <Text text="{marche>nome}" class="marcaNome"/>
                                        </OverflowToolbar>
                                        <VBox alignItems="Center">
                                            <Image src="data:image/png;base64,{marche>immagine}" width="60px" height="auto"/>
                                        </VBox>
                                    </VBox>
                                </f:GridListItem>
                            </f:GridList>
                        </Panel>
                        
                        <Panel
                            headerText="Analisi"
                            expandable="true"
                            expanded="true"
                            class="sapUiResponsiveMargin">
                            <Text text="Esempio"/>
                        </Panel>
                    </HBox>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

I'm new to UI5 so I don't know how to solve.

Thanks in advance.

Accepted Solutions (1)

Accepted Solutions (1)

maheshpalavalli
Active Contributor

Check this plnkr example I created, i used flexitem data and grow factor to adjust the widths

https://plnkr.co/edit/poNHSA1fn4nC1ubh

It worked!!

Thanks for the help!

Answers (0)