Skip to Content
0
Oct 05, 2020 at 05:49 PM

How to center VLayout inside Hbox

49 Views

I'm triying to center a list, in fact it's centered but ineed to reduce de width of my verticallayout but if i reduced it is not centered, take a look of my view:

<FlexBox alignContent="Center" alignItems="Center" justifyContent="Center"> 
        <l:VerticalLayout width="70%">                                    
             <IconTabBar
                    id="idIconTabBar"
                    select="onClickBarra"
                    class="sapUiResponsiveContentPadding"
                    items="{/items}"
                    expandable="false"
                    backgroundDesign="Transparent">
                    <items>
                        <IconTabFilter
                            icon="{icon}"
                            iconColor="{iconColor}"
                            showAll="{showAll}"
                            count="{count}"
                            text="{text}"
                            key="{text}" />
                    </items>
            </IconTabBar>
            
              <List 
                    id="listHU"
                    items="{/items}">       
                     <ObjectListItem
                            title="HU: {EXIDV}"
                            type="Active"
                            press="onClickItemHU"  >    
                     
                            <ObjectAttribute text="Posicion: {POSICION}" />                 
                            <firstStatus>
                                <ObjectStatus text="{descripcion}" state="{estado}"  />
                            </firstStatus>
                    </ObjectListItem>
              </List>   
              
              <List id="listaFotos" headerText="Custom Content" items="{patronFotos>/}" mode="Delete" visible="false">
                <CustomListItem>
                    <HBox justifyContent="SpaceBetween" class="sapUiTinyMargin">
                        <HBox>
                            <core:Icon size="2rem" src="sap-icon://attachment-photo" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" />
                            <VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
                                <Link  text="{patronFotos>desc}" press="abrirImagen"/>
                                <Label text="{patronFotos>id}"/>
                            </VBox>
                        </HBox>
                        <Button press="takePicture" icon="sap-icon://add-photo" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"/>
                    </HBox>
                </CustomListItem>
            </List>

            <l:VerticalLayout id="f_humedad" visible="false">
                <HBox>
                    <Label text="Registro de humedad 1" class="sapUiSmallMargin"/>
                    <Input id="i_humed1" placeholder="Ejemplo 4.7" type="Number"/>
                </HBox>
                <HBox>
                    <Label text="Registro de humedad 2" class="sapUiSmallMargin"/>
                    <Input id="i_humed2" placeholder="Ejemplo 4.7" type="Number"/>
                </HBox>
                <HBox>
                    <Label text="Registro de humedad 3" class="sapUiSmallMargin"/>
                    <Input id="i_humed3" placeholder="Ejemplo 4.7" type="Number"/>
                </HBox>
                <HBox>
                    <Label text="Registro de humedad 4" class="sapUiSmallMargin"/>
                    <Input id="i_humed4" placeholder="Ejemplo 4.7" type="Number"/>
                </HBox>
                <Button text="Promediar" press="onPromediarHumedad"/>
            </l:VerticalLayout>
            
       </l:VerticalLayout>          
  </FlexBox

but if the width of my verticallayout is set to 100% it's centered , what's wrong with my code ?

Attachments

not-centered.png (21.5 kB)