Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Eclipse Scout » Resizing font icon in AbstractImageField
Resizing font icon in AbstractImageField [message #1806897] Fri, 17 May 2019 09:01 Go to next message
Krzysztof Leja is currently offline Krzysztof LejaFriend
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?
Re: Resizing font icon in AbstractImageField [message #1806915 is a reply to message #1806897] Fri, 17 May 2019 14:10 Go to previous messageGo to next message
Andre Wegmueller is currently offline Andre WegmuellerFriend
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
Re: Resizing font icon in AbstractImageField [message #1807026 is a reply to message #1806915] Tue, 21 May 2019 11:04 Go to previous message
Krzysztof Leja is currently offline Krzysztof LejaFriend
Messages: 55
Registered: April 2019
Member
It did the trick. Thanks!
Previous Topic:Eclipse Scout 8.0 application with two clients
Next Topic:create permission
Goto Forum:
  


Current Time: Sun Nov 03 00:32:58 GMT 2024

Powered by FUDForum. Page generated in 0.03093 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top