Hi,
I seem to be having some difficulties implementing the responsive add-on. Been trying to implement this for quite some time now but cant seem to get it working.
Ive been following this tutorial:
https://vaadin.com/book/-/page/themes.responsive.html
These are the steps that I have compeleted:
- Downloaded and copied the responsive add on JAR files into my WEB-INF/lib
- Added the following lines to my web.xml:
<servlet>
<servlet-name>myapp</servlet-name>
<servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
<init-param>
<param-name>UI</param-name>
<param-value>com.example.myapp</param-value>
</init-param>
<init-param>
<description>myappWidgetset</description>
<param-name>widgetset</param-name>
<param-value>com.example.Myapp.widgetset.MyappWidgetset</param-value>
</init-param
</servlet
3. Modified this line in my Java code:
@VaadinServletConfiguration(productionMode = false, ui = MyappUI.class, widgetset="com.example.Myapp.widgetset.MyappWidgetset");
4. Added this line to my ivy.xml:
<dependency org="com.vaadin.addon.responsive" name="responsive" rev="1.0.0.alpha4" />
- Cleaned server and compiled widgetset
Code:
My Java code:
Label heading = new Label("Welcome to my application");
heading.addStyleName("header1");
heading.addStyleName("h1");
Responsive.makeResponsive(heading);
contentlayout.addComponent(heading);
My myapp.scss code:
.header1 {
text-align: center;
}
.header1[width-range~="0-320px"]
{
font-size: 1000px;
}
But when I resize my browser window nothing happens.
Any help would be appreciated. Thank you!