Spacing in XML View in WebIDE

[Former Member]

Hi Experts,

I am trying to create SAPUI5 Mobile Kapsel App Project. I have selected XML view. When I tried to drag and drop the elements, all the elements are coming adjacent to each other. Meaning to say, if I drag and drop two buttons it is coming like ButtonButton. I want like Button    Button. How to add spacing in xml view? I tried adding Horizontal layout and adding buttons to it, but it is coming like Horizontal LayoutButtonButton. I am not able to drag and drop button inside the Horizontal Layout. 

How to give X and Y coordinates for elements in XML view?

Regards,

Dhani

[Former Member · Accepted solution]

Can you please provide some input for solving this?

Regards,

Dhani

[Virinchy · Accepted solution]

Hi Dhani Sebastian ,

Can you please share your screenshots of , what it(UI) looks like and the code snippets ?

Regards

Virinchy

[Former Member · Accepted solution]

Hi Viru,

This is the screenshot of the UI which I gets in the xml view.

The code snippet is :

<sap.ui.core.mvc:View controllerName="view.MainMenu"
    xmlns="sap.m"
    xmlns:sap.ui.layout="sap.ui.layout"
    xmlns:sap.ui.core.mvc="sap.ui.core.mvc" >
    <Page title="mDepot">
        <content>

            <sap.ui.layout:HorizontalLayout width = "300px">
                <Button text="Button" width="100px"></Button>
                <Button text="Button1" width="100px"></Button>
            </sap.ui.layout:HorizontalLayout>

        </content>
    </Page>
</sap.ui.core.mvc:View>

What I want to get is :

Regards,

Dhani.

[Former Member · Accepted solution]

Please help.

Regards,

Dhani.

[Qualiture · Accepted solution]

As with any web technology, use CSS to change the spacing / margin the way you want

EDIT: Since you are using the HorizontalLayout, this is also described in the API doc:

Spacing between the items is currently not adjustable in the HorizontalLayout and has in this case been added with the following CSS:


#myTextField { margin: 0 4px; }

See also https://sapui5.hana.ondemand.com/sdk/#test-resources/sap/ui/layout/demokit/HorizontalLayout.html

[Former Member · Accepted solution]

Hi,

At the moment there is no way to manipulate styles via the layout editor.

You can either use any way that UI5 offers to deal with spaces between controls or you can also use Toolbar control that is available in the layout editor and offers also ToolbarSpacer control.

Regards,

Meir.

[Former Member · Accepted solution]

Hi

Can I use CSS with XML? Could you please provide me a simple code snippet of the same?

Regards,

Dhani

[Qualiture · Accepted solution]

Yes of course

You can use a custom class as follows:

<Button text="Click me" icon="sap-icon://save" class="yourCustomClass" />

[Former Member · Accepted solution]

Hi

Sorry if my question is stupid. As I am a newbie to UI5, I am finding it little difficult.

Please confirm whether I am using correct code.

I have given the following code in XML file

<sap.ui.core.mvc:View controllerName="com.arteria.view.MainMenu"
    xmlns="sap.m"
    xmlns:sap.ui.core="sap.ui.core"
    xmlns:sap.ui.core.mvc="sap.ui.core.mvc" >
    <Page title="mDepot">
        <content>
           <Button text=" " id="customerBtn" class="MainMenu.css" />
            <Button text=" " id="soCreateBtn" class="MainMenu.css" />
        </content>
    </Page>
</sap.ui.core.mvc:View>

In MainMenu.css  file, I have given as follows:

#customerBtn 
{
    background-color:transparent;
    background-image:url(../img/Distributor.png);
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:0px solid #566963;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    padding:28px 24px;
    text-decoration:none;
    text-shadow:-4px -10px 0px #2b665e;
    position: absolute;
    left: 20px;
    top: 5px;
}
#soCreateBtn 
{
    background-color:transparent;
    background-image:url(../img/SOOrder.jpeg);
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:0px solid #566963;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    padding:28px 24px;
    text-decoration:none;
    text-shadow:-4px -10px 0px #2b665e;
    position: absolute;
    left: 130px;
    top: 5px;
}

I am trying to achieve the screen as shown in the reply comment above.

But still I am getting the button adjacent to each other(without spacing)

Where I am going wrong?

Regards,

Dhani.

[santhu_gowdaz · Accepted solution]

1.   <content> 
2.            <Button text=" " id="customerBtn" class="MainMenu.css" /> 
3.      <ToolbarSpacer width="10%"></ToolbarSpacer>
4.             <Button text=" " id="soCreateBtn" class="MainMenu.css" /> 
5.         </content>

[Qualiture · Accepted solution]

You're mixing a few things up here:

1. in the 'class' property of the xml control, reference the css class name, not the CSS file. But you could also do it not by class name but control id. However, since XML view controls are different than DOM id's, this is generally not a good solution!
   Better to reference by class name:
   
   <Button id="someBtn" class="customerButton">
   
   Your class selector should then not be named #customerBtn but .customerBtn (note the preceding dot!)
   
   
2. In your index.html file, add a normal css link reference to your stylesheet file
   
   
   
   

[Former Member · Accepted solution]

That worked Robert.

Thanks for your help.

Regards,

Dhani

[Former Member · Accepted solution]

Tried this.

But the elements came down vertically.

Regards,

Dhani

[santhu_gowdaz · Accepted solution]

reduce the width or give 2em or 3px to ToolbarSpacer.