When I embed the WebBrowser control in a window using either Active-X or the .NET WebBrowser control (thin wrapper around the Active-X) control, it doesn't seem to respect #media css attributes such as max-width. Given {fiddle}:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- necessary for tablets -->
<style>
#redBox {
background-color: red;
}
#blueBox {
background-color: blue;
}
#media (max-width: 1000px) {
#redBox {
display: none;
height: 0px;
}
}
</style>
</head>
<body>
<div id="redBox"> Red Box </div>
<div id="blueBox"> Blue Box </div>
</body>
</html>
The red box should disappear when you make the window smaller than 1000px.
This works in Chrome, Firefox and IE. However, when I load the page in a WebBrowser control using the .NET WebBrowser control, or a unmanaged application using the Shell.Explorer Active-X control, the change doesn't work. It doesn't matter if I load it using a file:/// attribute or with http.
Any idea how to make it work?
Try to add:
<meta http-equiv="X-UA-Compatible" content="IE=9">
in html.
Make sure you have IE9 or higher version.
WebBrowser control has all the functionality of Ie that is set up on local PC.
I have a similar Problem...
The only solution I can think of is a JavaScript-workaround, setting the desired CSS-attributes via JS depending on screen-width, for example screen.availWidth or such.
Related
I have been looking into this issue and found no solution at all. Not even background color in Gmail (website from desktop) and in Gmail app. I have tried the following things.
add viewport
add screen key like this #media screen and (max-width) {}. event with 'only' keyword
I have seen the links (i.e; https://www.caniemail.com/search/?s=media) which show Gmail support only a few properties. but those properties also not working.
So I need to know whether we can use media queries or not? So I can stop using it if it won't work.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>
<%=content_for(:title) %>
</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
#media screen and (max-width: 400px) {
#root, .upper-bar {
padding: 0 !important;
}
#child-cont {
border: none !important;
}
.upper-bar .slogan-text-cont {
text-align: center !important;
}
.pre-footer-section .steps-icon-cont {
width: 100% !important;
}
}
</style>
Found the problem that, Gmail, Outlook, and similar mail provider, has some limitations on how much CSS you can add. After that particular limit, your CSS won't work at all. So you have removed some CSS. So I did remove some CSS and automatically all my CSS and media queries start working. Unfortunately, I cannot find out any specific limit in any article for these mail providers.
I found myself that the Gmail CSS limit is more than outlook. Because when Gmail shows proper styling and sends the same mail to outlook, it didn't work for it. So, I further reduce the styling content, then CSS worked for both Gmail and Outlook.
I was looking into MDN Docs for media queries and it says that:
The #media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.
Then I tried to test that with the following code:
#media (min-width: 375px) {
.main {
border: 5px dashed lightcoral;
}
}
.main {
height: 500px;
border: 5px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Document</title>
</head>
<body>
<div class="main"></div>
</body>
</html>
It just works when I set the media query after the .main class. I understand this happens due to the cascade flow in the document, but if that, why the docs says to place it at the top level of my css code?
The #media at-rule may be placed at the top level of your code or
nested inside any other conditional group at-rule.
Top level code means the code is not nested inside a CSS class.
That statement from MDN docs means the media queries can be nested in the class or just at the bottom of the file to ensure cascade flow (Top level).
I feel like a complete idiot...
This is the simplest of things but it doesn't work in any browser with the exception of Firefox.
I'm declaring it in the head / style section of the html
Any help will be greatly appreciated - CES
body {
background-color: yellow;
font-size: 1vw;
}
#media screen and (max-width: 800px) {
body{
background-color: red;
}
}
The issue is in the head and a missing meta tag... in order for you to use the Developer Tools Device Spacific breakpoints in Chrome, Edge and Safari you MUST include:
meta name="viewport" content="width=device-width, initial-scale=1.0"
While it works without including it when you View the page in the browser, in order to use the Developer Tools it has to be in the head.
I'm trying to add content to a printed webpage using an #page block. I've seen plenty of examples of this but it doesn't seem to work
Using the html below I expect to see the word "Hello" in the top left corner of the page when I do a Print Preview... can anyone tell me why this isn't working?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#media print {
#page {
size: 8.5in 11in;
margin: 0.5in;
#top-left {
content: "Hello";
}
}
}
</style>
</head>
<body>
<p>Page content</p>
</body>
</html>
It looks like this functionality probably used to work... I'm not really sure on that though. There are enough examples around the internet to suggest that it has been in use.
The current specification does not allow for this sort of functionality so I guess that's that.
The current working draft does support content being added through the page block but it hasn't made it into the specification so is not currently supported by any browsers.
Table bug fixed: I was missing thead and tbody tags!
I have a weird problem with Bootstrap. Everything works perfectly fine, but when I try to use table-hover class it just does not work. Also, the table has upper border: http://gyazo.com/796c5bb99058c0d07e8ece8f54790399.png
Also, when I resize the Chrome browser, the navigation bar looks like this:
http://gyazo.com/cb7842b71d7a6e63eb0d5ce3f0b52902.png
instead of normal 'mobile' look on getbootstrap.com site.
I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
Code:
<table id='keytable' class='table table-hover'>
<tr><th>sv_licensenum</th><th>Type</th><th>Key</th><th>Description</th></tr>
<tr><td>0</td><td>Ranked</td><td>alrCOdo8PsFUur6iZmIlESd7</td><td>test2</td></tr>
<tr><td>1</td><td>Ranked</td><td>VLnNg25kSZRB4IzNpufu0qIs</td><td>test456</td></tr>
</table>
id="keytable" is not specified in any external non-Bootstrap CSS file/code. it is only used for Javascript.
After inspecting the file carefully I have figured the reason for this weird behavior.
You need to remove the style you have defined in you html. This is the reason the navbar gets a padding when you reach 979px or less. You can consider defining this through #media or media-query
body {
padding-top: 60px;
background-color: #f5f5f5;
}
And then you have to remove the style
nav-collapse collapse
This will hide whatever you put inside this.
Read http://getbootstrap.com/2.3.2/components.html#navbar
Hope this solves your problem.
I hope you have also included the required bootstrap js files. I did not get any issues when I tested the code you provided.