Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Touchkit Can't change size of icon

Alan Wecker
6 years ago Apr 10, 2016 12:26pm

I increase the size of the navigation button to a height of 75px (or percentage)
I can't get the navigation button icon to make a similar stretch!!!
How do I control the percentage between iMage and text?
How do I get the text to wrap?

If I try to put an Image and navigation button on the same row in a horizontal button group they don't fallout on the same line!! (even if navigationbutton is 50% and Image is 30% width
Thanks

Alan Wecker
5 years ago May 25, 2016 8:59am

Any responses, it is getting to be a crtical issue, for my student project

Henrik Nyman
5 years ago May 26, 2016 11:17am

Hi Alan,

one possible way to do this is using an image as your icon.

http://stackoverflow.com/questions/10724128/icons-resize-or-shrink

This way you can change the size of the image (using your favoured image manipulation program) and have the size of the icon change accordingly. As an example: I created an image 'deer.png' with height and width set to 75px. In my project called 'myproject' I store the image in the folder '/WebContent/VAADIN/themes/myproject/images'. Now I can use the image as an icon for my button 'button' using the code

button.setIcon(new ThemeResource("images/deer.png"));

Best regards,

Henrik

Alan Wecker
5 years ago Jun 08, 2016 12:40pm

Doesn't seem to work with touchkit navifation button.  
Does work with regular button

Henrik Nyman
5 years ago Jun 10, 2016 12:24pm

OK,

I tried the following method on a NavigationButton and it worked for me. I use css styling and an icon from the FontAwesome collection (in this case HOSPITAL_O).

In the code I have the following code snippet:

NavigationButton navigationButton = new NavigationButton();
navigationButton.setIcon(FontAwesome.HOSPITAL_O);
navigationButton.addStyleName("myStyle");

In my style file (myproject.scss) I add the following code:

.myStyle {
    .v-icon.FontAwesome { 
        font-size: 60px;
    }
}

You will probably have to do some tweaking to get the text alligned correctly alongside your icon but hopefully this will work for you as well.

+1