Skip to main content



      Home
Home » Eclipse Projects » Eclipse Scout » Resizing font icon in AbstractImageField
Resizing font icon in AbstractImageField [message #1806897] Fri, 17 May 2019 05:01 Go to next message
Eclipse UserFriend
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 10:10 Go to previous messageGo to next message
Eclipse UserFriend
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;
}
Re: Resizing font icon in AbstractImageField [message #1807026 is a reply to message #1806915] Tue, 21 May 2019 07:04 Go to previous message
Eclipse UserFriend
It did the trick. Thanks!
Previous Topic:Eclipse Scout 8.0 application with two clients
Next Topic:create permission
Goto Forum:
  


Current Time: Fri May 16 20:20:06 EDT 2025

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

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

Back to the top