CODEWITHSUNDEEP
csslistimageiconssapui5
JK97Tae
JK97Tae

Reputation: 28

Change icon image size and border in SAPUI5

Are there any way to change the size and border of this icon (icon="images/{Land}.png")??. I tried with this class "mIcon" but it changes all the list, not only the icon with the image. I don't know if is posible only change the size of icon.

xmlns:html="http://www.w3.org/1999/xhtml"  class="hosp-popup" >

        <List id="idListCounPop"
            width="100%"
            mode="SingleSelectLeft"
            selectionChange="onListChange"
            items="{ path: '/countrySet' }">
            <StandardListItem title="{Landx}" icon="images/{Land}.png" class="mIcon">
                <customData>
                    <core:CustomData key="Land" value="{Landx}" /> 
                    <core:CustomData key="Icon" value="sap-icon://globe"/>
                </customData>
            </StandardListItem>
        </List>

this is a part of the css because is too long:

.hosp-popup {
    height:20em;
    min-height: 15em;
    max-height: 40em;
}

.hosp-popup .mIcon{
    min-height: 4em;
    max-height: 4em;
}

Thank you!!!

Upvotes: 0

Views: 1135

Answers (1)

DarkIceDust
DarkIceDust

Reputation: 241

For the size, try this:

px : give fixed pixels to your icon

em : dimensions with respect to your current font. Say ur current font is 12px then 1.5em will be 18px (12px + 6px).

pt : stands for points. Mostly used in print media

% : percentage. Refers to the size of the icon based on its original size.

Try with width and height until you get the size you want for your icon. Maybe some of this types of setting sizes help you best than others.

For the border, just try adding this line to your existent code:

    .hostp-popup .mIcon {
     text-shadow: 0 0 3px #000;
     }

Upvotes: 1

Related Questions