Is there an easy way to disable the styling provided by the Intel XDK? Specifically from af.ui.css.
The styling causes problems, especially when you are using external libraries. It would be nice to do something like jQuery Mobile's data-role='none'
e.g. I am trying to use a CSS style for star rating where the user can rate by touching or clicking on stars. This works fine on a normal HTML JavaScript page but somehow the af.ui.css gives one of the elements a width of 60%. These are the lines from af.ui.css which do that:
#afui input[type="radio"] + label,
#afui input[type="checkbox"] + label {
display: inline-block;
width: 60%;
float: right;
position: relative;
text-align: left;
padding: 10px 0 0 0;
}
This is the HTML it is acting on:
<label for="Ans_1" class="star rb0l" onclick=""></label>
If I comment the width statement in af.ui.css, it messes up other checkboxes. I tried to force a width in the label by using at style="width:.." but that doesn't work either.
Any suggestions?
Without more code structure it is hard to know exactly what could be going wrong.
In general if you use style="width:..." it should override afui.ui.css unless the css is being loaded after your inline styles and clobbers them. You can try to force your css style by using CSS '!important'
.star {
width: 20px !important;
}
either in an external CSS file or in style tags in your html file that load after the afui.ui.css file. You could even try style="width: 20px !important;". Some more info on this: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
In general I would use images or css for a star rating not checkbox or radio buttons. Here is a good example: http://css-tricks.com/star-ratings/
Let me know if that works for you or if you could include a screenshot or more html structure I can try to help.
You should be able to create your own id and then as long as you apply your styles after afui.ui.css is loaded it should keep the app framework styles but only override your star checkbox.
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
</head>
<body>
<label id="idname"></label>
</body>
<style>
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
</style>
OR...
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="star.css">
</head>
<body>
<label id="idname"></label>
</body>
star css file:
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
We set the overflow-x values to hidden on both the body and scrollable elements, but mobile Safari ignores these values. On the desktop, the overflow values work fine.
Relevant code:
body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); }
.page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch }
#catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; }
catalog_page is what sits outside the viewport, sliding into view only after someone does a gesture.
To reproduce:
1) Visit www.tekiki.com on your iPhone (not iPad). Scroll to the right, and you'll see how catalog_page extends the site's width, even though we fixed the body width.
Add html { overflow: hidden; } to your CSS and it should fix it.
It's 2020 but I am still trying to find an answer for this.
After many experiments, I found that this answer was actually the only working one.
However, it does create an odd black bar across the whole page in all browsers. Also, you should not use units for zero values.
Therefore, my final solution is this: (any transform function should do the trick, just remember to set zero values.)
html, body {
... (font, background, stuff)
overflow-x: hidden;
/* Safari compatibility */
height: 100%;
width: 100%;
transform: translate3d(0,0,0);
}
Be aware, this solution may influence on your navigation.
"position: fixed;" will not work on children because of "transform" property set something other than "none"
https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed
Tested with Mobile Safari on iOS 7.1/8.2
Following code didn't work for me neither.
html { overflow: hidden; }
I believe it's a bug/feature of Mobile Safari, other browsers, including Safari on OSX works well. But the overflow:hidden works on iPhone/iPad if you also set position:fixed to HTML element. Like this:
html { overflow: hidden; position: fixed; }
Add html { overflow: hidden; } to your CSS and it should fix it.
This solution didn’t work for me.
Instead, i create a wrapper div inside the body and apply the overflow-x:hidden to the wrapper :
CSS
#wrapper {
overflow-x: hidden;
}
html
<html>
...
<body>
<div id="wrapper">
...
</div>
</body>
</html>
I had the following code to disable double-tap to zoom:
* {
touch-action: none;
}
This broke overflow scrolling though. Here’s how I fixed it:
pre {
overflow-x: scroll;
touch-action: pan-x;
}
in my case, the following did solve the problem
body, html {
overflow-x: hidden;
}
I actually gave up on css overflow-x in IOS safari.
I used script instead
$(window).scroll(function ()
{
if ($(document).scrollLeft() != 0)
{
$(document).scrollLeft(0);
}
});
It's 2022. Mobile safari can still be quirky. But it seems for me the way to get overflow-x working on the body is to do the following:
html,
body {
height: 100%;
overflow-x: hidden;
transform: translate3d(0, 0, 0);
}
I wish I understood the transform, but it seems necessary. The other way was to set the body to position of relative, but this seems safer.
OR
Another way thats definitely safe, and future proof, is to place everything in body directly into a div and give that div an overflow of hidden and make sure it has a min-height of 100vh. Like so:
<body>
<div class="page">
everything...
</div>
</body>
Then in CSS:
.page {
min-height: 100vh;
overflow: hidden;
position: relative;
}
In order to solve the issue on older devices (iphone 3) as well I had to mix the solutions, because they didn't work singularly.
I ended up adding a wrapper div to the html body:
<html>
<body>
<div id="wrapper">....</div>
</body>
</html>
and styling it with:
#wrapper {
overflow: hidden
}
and it finally worked.
If html, body overflow-x: hidden; is not working for you try looking for text-indent. The default settings of flexslider for example have some elements set to text-indent -9999px. I found this was overriding html overflow rules.
I have a basic HTML page with a header that is fixed. When I pinch-zoom in to the page on an iPad or iPhone the header flows off the edge of the page and I can not drag the page to see it all.
I can prevent the whole page from being zoomable, but I would like just this fixed header to not zoom and the rest of the page to be zoomed as normal.
Is there any way to do this?
EDIT:
Here's my CSS/HTML
body {
margin:0;
padding:0;
}
.nozoom {
width:100%;
position:fixed;
top:0px;
margin:0 auto;
}
.nozoom > div {
width:1008px;
margin:0 auto;
background-color:#444;
height:100px;
}
.yeszoom {
width:1008px;
margin:100px auto 0;
background-color:#096;
}
and...
<div class="nozoom"><div>This must not zoom and if you look carefully you'll see that you can never see the content of this which is completely over to the left - one two three four five six seven eight nine ten eleven twelve thirteen... dfgkjhdfsklhj dsfkjghl sdflghsdfklg sdfklg dsfkgh skdlfgh ksdlf ghskdlfgh jklsdfhg jklsdfg hsdfghj sdflkg hlsdf sdfg kljsdf jksdf sdfkjg sdfg ksdjfl gjkldsfg klsdfhgljksdf gsd kjlsdfh glskjdfhg jsdf hsdflk gsdf</div></div>
<div class="yeszoom">
<p>sdfgdsfgdsfgdfsga gsdf gsdf </p>
<p>fhgdfgh dffhgdfghdfgh dfg......</p>
<!-- Loads more content here-->
</div>
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}
I'm working on some Google Web Toolkit Code that places an AbsolutePanel on top of an image. The way I'm doing this is to:
wait until the image is loaded (i.e. width/height are >0)
get the absolute coordinates of the image in the viewport using image.getAbsoluteLeft() and image.getAbsoluteTop
Set the position of the AbsolutePanel (a direct child of the RootPanel) to the same coordinates using RootPanel.get().setWidgetPosition(myPanel, imageAbsLeft, imageAbsTop);
This works in Chrome and IE. Strangely, though, Firefox always positions the AbsolutePanel "a few" pixels (I'd say between 1 and approx 10? But it varies from page load to page load) above the image. I'm clueless as to what's causing this. Any hints much appreciated!
A live example of this is here: http://yuma-js.github.com. If you click the "Add Annotation" there's a draggable box, which movement is constrained by the AbsolutePanel. You'll notice that the constraining works perfect for Chrome, but is off for FireFox.
Morning,
well, I did some research how I could overlay an image with a another object too, and found this article: How to overlay one div over another div.
Based on that I made a similar example using SVG and drawing example, where I draw a rectangle around a space station. What I can tell you is, that you don't want to mix pixel and percentage positioning, and if you can, you should use percentage positioning!
Hope this helps somehow.
Here is my example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>SVG Example</title>
<style>
html, body {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
#navi img {
}
</style>
</head>
<body>
<div id="container">
<div class="navi"><img src="http://www.bing.com/fd/hpk2/SpaceStation_ROW1605701719.jpg" width="100%" height="100%"/></div>
<div id="infoi"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="65%" y="40%" width="20%" height="30%"
fill="none" stroke="red" stroke-width="2"/>
</svg>
</div>
</div>
<p>This example draws a fullscreen image and places a fullscreen svg element above it. The svg element then draws a rectangle based on percentage sizes,
which is around the space Station. If the browser window resizes, the size of the drawn rectanlge changes as well, to always be on top of the space
station.</p>
<p>Resources for this example where the following links:</p>
<ul>
<li><a href="https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div" >How to overlay one div over another div</a>
<li><a href="http://de.wikipedia.org/wiki/Svg" >Wikipedia: Scalable Vector Graphics</a>
<li><a href="http://www.w3.org/TR/SVG/shapes.html" >W3C Recommendation: 9 Basic Shapes</a>
</ul>
<p>Image from: Bing.com, © StockTrek/White/Photolibrary</p>
</html>