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.

CssImport when using Component Exporter by Mikhail Shabarov, 4 weeks ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

How do I put the names of the buttons below the images?

Alexey Bykov
1 decade ago Dec 26, 2011 1:31pm

I welcome!

if for button's i use .setStyleName(BaseTheme.BUTTON_LINK); as a place name under the image?

...
        Button helpButton = new Button(CAPTIONHELP);
        helpButton.setIcon(new ThemeResource(Theme.help32x32));
        helpButton.setStyleName(BaseTheme.BUTTON_LINK);        
        helpButton.setDescription(TOOLTIPHELP);
        
        Button aboutSysButton = new Button(CAPTIONABOUTSYS);
        aboutSysButton.setIcon(new ThemeResource(Theme.document32x32));
        aboutSysButton.setStyleName(BaseTheme.BUTTON_LINK);        
        aboutSysButton.setDescription(TOOLTIPABOUTSYS);
        
        Button reviewSysButton = new Button(CAPTIONREVIEWSYS);
        reviewSysButton.setIcon(new ThemeResource(Theme.folder32x32));
        reviewSysButton.setStyleName(BaseTheme.BUTTON_LINK);        
        reviewSysButton.setDescription(TOOLTIPREVIEWSYS);
        
        Button mailSysButton = new Button(CAPTIONFEEDBACK);
        mailSysButton.setIcon(new ThemeResource(Theme.email32x32));
        mailSysButton.setStyleName(BaseTheme.BUTTON_LINK);        
        mailSysButton.setDescription(TOOLTIPFEEDBACK);

...

I would be grateful for the information!

Alexey Bykov
1 decade ago Dec 27, 2011 9:16am

I think I've figured out -

this Java code -

...
        HorizontalLayout hLayoutBtnLgn = new HorizontalLayout();
        hLayoutBtnLgn.setStyleName("v-horizontallayout-logonbtn-line");
        hLayoutBtnLgn.setWidth("100%");
        hLayoutBtnLgn.setMargin(true);
        hLayoutBtnLgn.setSpacing(false);
...

..and css -

...
.v-horizontallayout-logonbtn-line {
	  background-color: #4172AE;	  
}

.v-horizontallayout-logonbtn-line .v-button-link {
      display: block;
      background: transparent;
      border: none;
      text-align: center;
}

.v-horizontallayout-logonbtn-line .v-button-link .v-button-caption {
	color: #fff; 
	font-weight:bold;
	text-decoration: none;
}

.v-horizontallayout-logonbtn-line .v-button-link .v-button-caption:hover {
	color: #39849d; 
	text-decoration: underline;
}

.v-horizontallayout-logonbtn-line .v-button {
      display: block;
      background: transparent;
      border: none;
      text-align: center;
}
 
.v-horizontallayout-logonbtn-line .v-button img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;
}

.v-horizontallayout-logonbtn-line .v-button span {
      /*font-size: x-small;*/
      text-shadow: #fafafa 1px 1px 0;
}

...