Problem Vaadin 7 + Vaadin touchkit

Good morning,

I’m with problem in CSS of my project, when load any component of touchkit.

Name of button hide, load of page is unconfigured.

I’m using vaadin 7 + vaadin touchkit.

@SuppressWarnings("serial")
@Theme("mobilegerado")
@Widgetset("com.alivepro.mobilegerado.widgetset.MobilegeradoWidgetset")
public class MobilegeradoUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MobilegeradoUI.class)
public static class Servlet extends TouchKitServlet {
}

@Override
protected void init(VaadinRequest request) {
final VerticalComponentGroup layout = new VerticalComponentGroup();
//layout.setMargin(true);
setContent(layout);


Button button = new Button("Click Me");
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
layout.addComponent(new Label("Thank you for clicking"));
}
});
layout.addComponent(button);
}

}

18551.png
18552.png

Hi
Try to change in the scss. You can find it in /Webcontent/Vaadin/Themes/mobilegerado. At the end it’s a section that says //Your changes goes here.

Try with the following css

.v-button-wrap { display: inline; padding: 0 10px 0 0; } You can also change the button to have smaller padding with this css in the same section
.v-button { padding: 0 10px 0 0; } Ather this recompile theme.

Another thing you can try is to change

@Theme("mobilegerado") to

@Theme("touchkit") But this will change to the touchkit standard theme and maybee you prefer your mobilegerado-theme

Hi,

I had the same problem… button caption is not visible see https://vaadin.com/forum#!/thread/9569417

I just tried the above recommended scss changes - and it not help

adding

.v-button-wrap { display: inline; } to toucht1.scss made the button caption visible

Both Peter and Aron mention SCSS files, and Peter mentions “// Your changes go here” comment. That kind of comment only exists in the Sass theme template for
normal desktop UIs
. That theme template should
NOT
be used in TouchKit UIs. Even though Sass is allowed with TouchKit, you may not use the regular template, because it includes a base theme, which must not be done with TouchKit. The TouchKit base theme is included implicitly. Consequently, you can’t parameterize the TouchKit base theme with Sass, so Sass normally has little use, unless you really want to have a complex theme.

Normally, you just use plain CSS in the styles.css file (and don’t have any .scss files).’ It’s explained in the section
Mobile Theme
.

Hi Marko
Thank you for answer. But why do I have to change in the CSS-files so the caption is visible? I think that this should work “out-of-the-box”. without manually having to go into CSS-files and change. I understand why i should change in the CSS instead of the SCSS,

Hi,

You don’t have to – I’m just suspecting that your use of Sass has broken the theme so that you need to make odd tweaks.

You mentioned trying @Theme(“touchkit”) – if the button captions work with that, it means that the custom theme breaks it somehow.

I’ve tried Button components in a TouchKit 4.0.0 app, and they worked just fine.

Hi,

Sorry, but there is still some confusion is here…

here are my steps I use to create a Mobile app:
-create a vaadin 7 project
-added the following to ivy.xml

<dependency org="com.vaadin.addon" name="vaadin-touchkit-agpl" rev="4.0.0" conf="default->default" /> -chenged code as here:

@Theme("mytouchapp")

public class MytouchappUI extends UI {
    
    final NavigationManager manager = new NavigationManager();
    
    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = MytouchappUI.class
        , widgetset = "com.example.mytouchapp.widgetset.MytouchappWidgetset")
    public static class Servlet extends TouchKitServlet {     }
    
    @Override
    protected void init(VaadinRequest request)  {
    .....

}
-copied vaadin-touchkit-agpl-4.0.0.jar to \web-inf\lib folder
-Compiled WidgetSet and Theme via the eclipse toolbar
-eclipse creates:

C:\work\mytouchapp\WebContent\VAADIN\themes\mytouchapp with following files: addons.scss mytouchapp.scss styles.css styles.scss where the css file has 12k+ rows and it is not really editable, since all edits are removed when widget is compiled…

what is wrong with the above???

Yes, those .scss files are the theme template for desktop browser UIs. They can not be used with TouchKit (except perhaps in a fallback UI), which is probably why your buttons are broken.

Remove all the .scss files, as well as the styles.css file, and create an empty styles.css file. Then that’s where you should write your CSS rules. No theme compilation from Sass to CSS is needed with pure CSS themes.

OR if you really want to use Sass, remove all the .scss and .css files, create an empty styles.scss file, write your Sass rules there. In this case, you need to compile the styles.scss to styles.css with the Compile theme button.

thanks for all your help - this issue is resolved

btw-widget compile for mobile should remove those scss and css files that are not to be used and create an empty styles.css file