Eclipse Community Forums: Eclipse Scout » Resizing font icon in AbstractImageField

Help

Home

Home » Eclipse Projects » Eclipse Scout » Resizing font icon in AbstractImageField

Show: Today's Messages :: Show Polls :: Message Navigator

Resizing font icon in AbstractImageField [message #1806897]

Fri, 17 May 2019 09:01

Krzysztof Leja

Messages: 55
Registered: April 2019

Member

Hi,

By using the example of the PictureField field in the PersonForm class of the Contacts project, I try to perform a similar function in my application, i.e. display the icon from the "fontawesome" font. In addition, I would like to give it a dedicated color and size. For this purpose:

In the * .less file file from the * .ui.html module I added such a CSS class:
```
.bigIcon {
	font-size: 50px;
	color: red;
}
```

In the PictureField field definion I added implementation of this method:

@Override
protected String getConfiguredCssClass() {
          return "bigIcon";
}

Everything works (i.e. a red icon is displayed) except for the size of the icon. It still has a default, small size. As if the css font-size attribute has been ignored...

Am I doing something wrong, or is there a different, more appropriate way to change the size of the icon in the above case?

Report message to a moderator

Re: Resizing font icon in AbstractImageField [message #1806915 is a reply to message #1806897]

Fri, 17 May 2019 14:10

Andre Wegmueller

Messages: 204
Registered: September 2012
Location: Baden-Dättwil, Switzerla...

Senior Member

For issues like that, you need to start the dev-tools (F12) of your browser. Most likely your CSS selector is not selective enough, which means a selector from the default Scout CSS is "stronger" than yours.

When you inspect your icon in the dev-tools, you'll see which styles are applied to your icon (and also which are overridden). Also you must check, on which DOM element exactly Scout adds the CSS class, because your selector must match that hierarchy. See the screenshot here.

This should work:

.image-field.bigIcon > .field > .font-icon {
    color: red;
    font-size: 50px;
}

Eclipse Scout Homepage | Documentation | GitHub

Report message to a moderator

Re: Resizing font icon in AbstractImageField [message #1807026 is a reply to message #1806915]

Tue, 21 May 2019 11:04

Krzysztof Leja

Messages: 55
Registered: April 2019

Member

It did the trick. Thanks!

Report message to a moderator

Previous Topic:	Eclipse Scout 8.0 application with two clients
Next Topic:	create permission

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Fri Apr 19 08:15:58 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter