I want to set the meta tag viewport in an XPage application. Therefore I use a theme which needs to extend the Bootstrap3.2.0_flat theme. As a result I get two viewport tags in the final html. But two viewport tags do not make any sense.
Theme:
<theme extends="Bootstrap3.2.0_flat" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
<resources>
<metaData>
<name>viewport</name>
<content>user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi</content>
</metaData>
</resources>
</theme>
html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
It seems the first viewport is derived form the theme. Is there any way to override it? Am thinking of mode="override" as used in controls. Or is the first viewport a result of something else?
With <control> properties in a theme you can use an override="true" attribute to specify that it should override the 'default' value. I don't think you can do that with a <metaData> tag.
What you can do however:
Create a new Bootstrap 3.2.0 base theme in your application that is based on the Bootstrap3.2.0_flat theme. The source for that can be found in the Extension Library.
In that theme you then set the correct value of the <metaData> tag.
In your current theme, you replace the extends="Bootstrap3.2.0_flat" with the name of your the theme you just created/ copied.
(oh and remember that in the latest Extension Library version, the Bootstrap3.2.0 theme has been renamed)
Related
I would like to set the charset on my xpage to utf-8. I tried to do this via the theme design element:
<resources>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</resources>
but it gets completely ignored.
Other meta data settings like:
<metaData name="viewport" content="width=device-width, initial-scale=1.0" />
work fine.
I must have overlooked something?
Add the encoding specification through the xsp.properties file:
xsp.html.page.encoding=utf-8
And to the .theme file you are using add:
<resources>
<metaData>
<name>charset</name>
<content>utf-8</content>
</metaData>
...
I added
<meta name="theme-color" content="#cc3333" />
<link rel="icon" sizes="192x192" href="https://partyfavorz.com/wp-content/uploads/2020/09/2017-Logo-192.png">
to the header file in my child theme to change the color of the address bar in mobile and added the favicon sized at 192x192 but it will not display.
Could something be blocking it?
Adding this to the header file in my child theme has no effect. Adding it to to custom CSS section of my theme for the header does work. Problem solved.
I'm aware that I can create ordinary <meta> tags using my Xpages theme. By "ordinary" I mean <meta> tags consisting of a "name" and a "content" attribute as in
<meta name="author" content="me myself I">.
What I don't know is how I could create different types of meta tags like <meta http-equiv="expires" content="86400"> where we have a "http-equiv" attribute instead of a "name" one.
Any ideas anyone?
Just try this:
<theme>
<resources>
<metaData>
<httpEquiv>expires</httpEquiv>
<content>86400</content>
</metaData>
</resources>
</theme>
The generated HTML code looks like this:
<meta content="86400" http-equiv="expires">
My css are overridden by bootstrap css.
Bootstrap is injecting css after my css.
Is there any why to add my css after injected css.
I know that we can use !important to achieve this, But it is not flexible as I need add it to every property.
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://myapp.com/myapp/css/bootstrap.min.css">
<link rel="stylesheet" href="http://myapp.appspot.com/myapp/css/gwt-bootstrap.css">
<link rel="stylesheet" href="http://myapp.appspot.com/myapp/css/font-awesome.min.css">
is there any way to insert my style sheet after the injected css.
In your gwt.xml check that you add your style sheet file after you inherit the GWT bootstrap module.
The order bellow should fix your issue:
<inherits name='com.github.gwtbootstrap.Bootstrap' />
<stylesheet src='style.css'/>
i have programmed a website, for a client and now im developing a smartphone template.
I used max-device-width as media query to separate smartphone and tablet.
Everythng is working fine, but iphone 4 zooms the website.
I dont know if i defined viewport wrong or is a bug?
Website is:http://mksgmbh.com
I used following Viewport
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi' name='viewport' />
<meta name="viewport" content="width=device-width" />
I tried to set initial-scale to 1 but it doesnt work too.
As I look at the site now you have mulitple viewport tags. Try removing them all and replacing them with either
<meta name="viewport" content="width=device-width, initial-scale=1.0">
or if you want to prevent user zooming:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
UPDATE
Also, in you media queries you use max-device-width, e.g.
#media only screen and (max-device-width: 760px) {
...
}
Unless you are trying to target specific devices, you could try just
#media only screen and (max-width: 760px) {
...
}
Device width and width aren't the same thing and for responsive design, width will usually get the results you want. This link has some more background info about the differences
Hope this helps!