Here there is an example of my problem:
http://asdcastelli.altervista.org/test-bootstrap/
In the head i have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
but the responsive works only if i resize the window browser, not in mobile
Why?
This is the page in the resized windows browser
This is the page in the mobile view (chrome inspector)
You have to include table into a div.
<div class="responsive_table">
<table id="pubblicazioni_table">
/*your content*/
</table>
</div>
and on your css, you have to paste this line:
.responsive_table { overflow-x: scroll; width: 100%; }
Related
I have the following page where I added the css:
body{
height:100%;
overflow:hidden;
}
which stops the page from moving up and down on a mobile device. However, when I focus on one of the inputs the page can then move around (up and down). How do I prevent that?
body {
height: 100%;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Login</title>
</head>
<body>
<div class='container'>
<form>
<input type='text'>
</form>
</div>
</body>
</html>
Use this:
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
I noticed, you already have it set. But I had the same problem and it was because my meta tag at first didn’t have it initially and when I did implement it, it was messy. I cleaned it up, as above and now it works.
In my case I didn’t like the x-overflow on mobile.
Credit to this article where it states setting the user-scalable =no. That is the source of your problem.
How to prevent zooming and moving page on mobile browsers?
I am currently working on a node app using express, and rendering html page using ejs.
When I used bootstrap in my .ejsfile, the .col-xs-*, .col-sm-* breakpoints worked well, but the breakpoints for the larger width cannot work as expected.
While I used bootstrap in the .html file and opened it in the browser, all breakpoints worked fine. And I've tried include bootstrap from both CDN and local, it resulted in the same situation. Can't figure what went wrong.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' type='text/css' href='/bootstrap.min.css'>
<title>
TEST
</title>
<style>
.eight{
background-color: red;
}
.four{
background-color: blue;
}
</style>
</head>
<body class='container-fluid'>
<article class='row'>
<div class='col-sm-8 eight'>
8
</div>
<div class='col-sm-4 four'>
4
</div>
</article>
</body>
</html>
I want the red div to occupy three-fourths of the row, the blue one occupy the rest.
Suggestions and solutions to the problem are appreciated.(Not a native English speaker, sorry for the unclear expression if any.)
I am running an app with bootstrap 3.3.7 and have an issue with resizing on a scaled screen.
When setting a width of $container-width - 1px, all visible-* and hidden-* get ignored. It works on 100% scaling but with 125% and upwards it fails.
I have the following demo code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrapd/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div>SM=768,MD=992,LG=1200</div>
<span class="visible-xs">XS</span>
<span class="visible-sm">SM</span>
<span class="visible-md">MD</span>
<span class="visible-lg">LG</span>
<hr>
<span class="hidden-xs">XS</span>
<span class="hidden-sm">SM</span>
<span class="hidden-md">MD</span>
<span class="hidden-lg">LG</span>
</body>
</html>
Way to reproduce:
Set the scale to 125%.
Set the window width to 766px (e.g. with key F12) => OK (XS).
Set the width to 767px => bug appears (no display).
Set the width to 768px => OK (SM).
Another way on FHD-Screen:
Set the scale to 125%.
Pin the browser window to a side (half screen)
Environment: Win10, Chrome latest version (bug also appears on Firefox)
How can I fix this?
Just found a solution! Since I'm working with SASS, I added the following to my _variables.scss:
$screen-xs-max: $screen-sm-min - 0.1;
$screen-sm-max: $screen-md-min - 0.1;
$screen-md-max: $screen-lg-min - 0.1;
I am trying to enter some text in text-box which is inside iframe. I am able to identify the text-box by switching to iframe, but not able to type in text.
Here, is the html code:
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" style="width: 100%; height: 100%;" aria-describedby="cke_50" title="Rich Text Editor,missionStatementText" src="" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title data-cke-title="Rich Text Editor,missionStatementText">Rich Text Editor,missionStatementText</title>
<style data-cke-temp="1">
<link href="http://localhost:8080/sowodemo/js/ckeditor/contents.css" rel="stylesheet" type="text/css">
<style data-cke-temp="1">
</head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="false">
http://l
<br type="_moz">
</body>
</html>
</iframe>
My Selenium Code:
driver.switchTo().frame(driver.findElement(By.tagName("iframe")));
driver.findElement(By.tagName("body")).clear();
driver.findElement(By.tagName("body")).sendKeys("type text");
driver.switchTo().defaultContent();
try to use actions class, we got success when we have used actions class
WebElement we = driver.findElement(By.xpath("xpath of the element"));
new Actions(driver).moveToElement(we).click().sendKeys("bfsdjkf").build().perform();
This is driving me nuts — I cannot place the image in src="", because border-radius will then fail. So, I moved it to background: url(), but then Safari keeps pushing this annoying border towards my face. How can I get rid of it ...?!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img style="width: 500px; height: 500px">
</body>
</html>
Are you sure about the border radius? This works for me:
<!DOCTYPE html>
<html lang="en">
<body>
<img src="test.png" style="border-radius: 10px"/>
</body>
</html>
Rendering:
Safari 5.0.3 (6533.19.4), the default 10.6.5 browser.
If you want to get rid of the border set it in CSS file, do something like:
set all the images borderless
img {border:none}
or using a CSS class
img.nobrdr {border:none}
or specifying the container like on of these
#container img {border:none}
.container img {border:none}
also specifying a class inside the container
.container img.nobrdr {border:none}