Hi,
I have problem with combobox in Vaadin 7, when I use it, i have component who appear but i don’t have the arrow who appear.
Which are the causes of problem please ?
PS : I have this problem when I use https in url when i use http, all it work (arrow). Maybe the problem is with https ?
Sounds like the font icon doesn’t get loaded for some reason. Just to double check, did you clear your browser’s cache when loading the page on HTTPS?
yes
Have you any idea ?
I have another problem, when i want click on checkbox, to check it, i don’t see the check.
But the checkbox is checked because I receive an message than checkbox is checked but i can’t see it.
No ideas other than it sounds like it’s the same issue - the font icon of the checkmark on the checkbox is not getting loaded for some reason or another. Maybe you can find a hint from your browser’s developer tools?
Hi,
I have found another solution, but i don’t know if it correct.
I want to change header of response and put pragma and cache-control in value no-cache with Vaadin.
So i have created a new class who implements Filter like this
public class MyHeadersFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Pragma", "no-cache");
httpResponse.setHeader("Cache-Control", "private, max-age=0, no-store, no-cache");
//httpResponse.setDateHeader("Expires", System.currentTimeMillis());
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
In my web.xml of my project, i add this code
<?xml version="1.0" encoding="UTF-8"?><filter>
<filter-name>MyHeadersFilter</filter-name>
<filter-class>com.example.myapplication.MyHeadersFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>MyHeadersFilter</filter-name>
<url-pattern>/*</url-pattern>
The problem is i don’t know if it work and if it change header of response and change pragma and cache-control in value no-cache with Vaadin.
I have my principal class who extends VaadinServlet.
Can you help me please ?
You should be able to see the headers of the response with e.g. Chrome’s developer tools - the Network tab shows all requests and responses.
Hi,
I founded a solution for my problem with arrow combobox, when i change the theme of Vaadin, I put another theme like reindeer, runo or liferay, the arrow combobox work, but when I use the valo theme, arrow combobox don’t show.
For me the problem is the valo theme in Vaadin.
For problem with valo theme do you have idea ?
I have created two users in Windows, one is administrator and another is not and I saw the administrator user can see arrow in combobox but the other user can’t see arrow combobox.
Is it possible its a problem of right from the fontawesome in valo theme ?
Did you manage to determine if the custom headers are getting applied correctly? Also, are you on the latest Vaadin 7 release (7.7.17)?
Yes I use the last version of Vaadin 7 (7.7.17).
I’m not sure if it correct, but when I check on the navigator Chrome, the network, i don’t see any changement.
I created an class who implements Filter and in web.xml in my Tomcat 9, i put this code
<filter>
<filter-name>MyHeadersFilter</filter-name>
<filter-class>com.example.myapplication.MyHeadersFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>MyHeadersFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
But i don’t see changement.
Can you tell me how in Vaadin we can change the custom headers please ?
I managed to change response headers with Vaadin.
@Override
public void modifyBootstrapPage(BootstrapPageResponse response) {
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-control", "no-cache, no-store, must-revalidate");
response.setDateHeader("Expires", new Date ().getTime() - 86400000L);
}
In my navigator, i have this response headers (see screenshot).
But it doesnt work, I don’t see arrow in combobox.
I saw we need to put <meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1">in the first line on the head. How can I put it on the first line with Vaadin ?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1">
<style type="text/css">html, body {height:100%;margin:0;}</style>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/mytheme/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/mytheme/favicon.ico">
</head>
HTTP header order should not matter according to RFC2612: https://tools.ietf.org/html/rfc2616#section-4.2 - "The order in which header fields with differing field names are received is not significant. " must be something else.
Ok maybe it can be problem with valo theme because in my code css I see this :
@font-face {
font-family: ThemeIcons;
font-weight: normal;
font-style: normal;
src: url(../valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.eot);
src: url(../valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.eot?#iefix) format("embedded-opentype"), url(../valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.woff) format("woff"), url(../valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.ttf) format("truetype"), url(../valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.svg#ThemeIcons) format("svg");
}
.ThemeIcons {
font-family: ThemeIcons;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
text-align: center;
}
Maybe the problem is with the url /valo/util/bourbon/css3 with https ?
Can we change this url ?
You can certainly try overriding it in your own theme; you can try using the absolute path with the protocol defined instead of relative, like src: url(https://your-domain/something)
I have use absolute path but it doesn’t work.
In my theme.scss, I added this code and put !important because i want use this property of css and not the property of css valo theme.
@font-face {
font-family: ThemeIcons !important;
font-weight: normal !important;
font-style: normal !important;
src: url(https://servdevtest/myapplication/VAADIN/font/themeicons-webfont.eot) !important;
src: url(https://servdevtest/myapplication/VAADIN/font/themeicons-webfont.eot?#iefix) format("embedded-opentype"), url(https://servdevtest/myapplication/VAADIN/font/themeicons-webfont.woff) format("woff"), url(https://servdevtest/myapplication/VAADIN/font/themeicons-webfont.ttf) format("truetype"), url(https://servdevtest/myapplication/VAADIN/font/themeicons-webfont.svg#ThemeIcons) format("svg") !important;
}
.ThemeIcons {
font-family: ThemeIcons !important;
font-style: normal !important;
font-weight: normal !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
display: inline-block !important;
text-align: center !important;
}
I have download all the font (themeicons-webfont.eot .svg .ttf and .woff) and i placed them in my project
When i check in the navigator in network, in the request url, the path is not correct : https://servdevtest/myapplication/VAADIN/themes/base/fonts/themeicons-webfont.woff
I found the problem is when I use this code in css
@mixin valo-combobox-button-icon-style {
font-family: MyFontThemeIcons !important;
content: "\f078" !important;
}
When I use content: “\f078”, the icon doesn’t appair. I found how create my own theme, I created an MyFontThemeIcons who content this line
@include font (MyFontThemeIcons,'../../../../mytheme/fonts/themeicons-webfont');
But icon doesn’t appair, do you have idea ?
Hi,
I have another question for my problem, I see in the navigator, the themeicons-webfont.eot is always charged from cache and other font like OpenSans-Regular-webfont.eot is not charged from cache. Maybe the problem is this ?
How can I change it ?
I added this code but didn’t work (It never enter on the method doFilter)
public class NoCacheHeaderFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
// TODO Auto-generated method stub
System.out.println("1000");
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
// TODO Auto-generated method stub
System.out.println("2");
}
@Override
public void destroy() {
// TODO Auto-generated method stub
System.out.println("3");
}
}
How can I change information header (cache-control, pragma) for the font themeicons-webfont.eot.
Okay, maybe stupid question, but did you do Empty Cache and Hard Reload the page in your browser?
Yes.
Have you an idea ?
In the navigator, I have this response headers for themeicons-webfont.woff
How can I add Pragma and Cache-control = no-cache for themeicons-webfont.woff
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: Access-Control-Allow-Origin "*"
Cache-Control: max-age=3600
Connection: keep-alive
Date: Tue, 29 Sep 2020 08:00:44 GMT
Expires: Tue, 29 Sep 2020 09:00:44 GMT
Keep-Alive: timeout=60
Last-Modified: Wed, 23 Sep 2020 12:50:42 GMT
vary: Origin