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
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,
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…
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.