Thanks to Firefox's 3D View I detected an empty <div> far outside the boundaries of my GWT 2.5.1 app's screens. Here's a screenshot:
You can see the main app screen below, a couple of outsider <div>s on top of it (which I attribute to the inner workings of layout panels) and above them all, the unexplained <div>. It is represented by the following doc element (copied from Firefox's own dev tools):
<div style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm; visibility: hidden;" aria-hidden="true"> … </div>
The <div> precedes the RootLayoutPanel element (used ensureDebugId to find out). The problem is that it is this <div> that causes an undesired right margin in the app's mobile views (which have limited width). Removing this <div> using dev tools eliminates the problem.
Does anyone know the origin of this <div> and what could get rid of it?
P.S.: I tested the issue on mobile Firefox to test a theory that this might be due to one of my add-ons. Alas, also happens on the mobile Firefox 21 which has none of my add-ons installed.
Update
A GWT project member commented on the issue, not recommending the use of layout panels in mobile applications. I switched from using the RootLayoutPanel to using the RootPanel and the problem indeed went away.
As a work around use this in your CSS. I have not tested it with use of aria in widgets in the app.
div[aria-hidden="true"] {
right: 0cm;
}
But it will remove the horizontal scroll bar on mobile apps on iPhone and such.
All these divs are attributable to layout panels; they are "rulers" to detect changes in "relative units" (em and ex to detect font change –there's one such div per layout widget–; and cm to detect zooming –there's only one such div for the whole application–), because you can mix units when you position your "layers" in a LayoutPanel.
I think the fixedRuler (for cms) should be positioned not only at top:-20cm but also left:-20cm (or possibly right:-20cm in RTL). Would you mind filing a bug at https://code.google.com/p/google-web-toolkit/issues/entry ? (and possibly even providing the patch: http://www.gwtproject.org/makinggwtbetter.html)
Related
I implemented html5 version of the like button on the header of my page.
once i navigate to another page and press the back button on the browser the FB button renders the iframe the size of 1000px * 1000px and masks the page content.
any solutions for this ? is this a known issue?
I can confirm this is happening for myself as well across multiple sites.
Facebook is aware of the issue which may take some time to fix according to https://developers.facebook.com/x/bugs/663421210369743/
In the short-term, many other developers seems to be suggesting to target the iframe specifically through css (or timeout javascript call) to force the height back to about 20px.
When using css, ensure you use !important to override the style attribute that ends up on the iframe from facebook.
I know this is an old post but it's still happening.
Add this inline to the code facebook gives you:
data-height="30px" data-width="130px"
And this to the CSS
.fb-like {
width: 130px !important;
}
Of course, you can change the width to whatever you want.
So your code should look like this (where XX is replaced with your parameters):
<div class="fb-like" data-href="XX" data-send="XX" data-layout="XX" data-show-faces="XX" data-height="30px" data-width="130px">
This is only a temporary solution until it is fixed as the facebook button disappears after a minute or so.
Probably not the best solution out there but adding the following css could work for now:
.fb-like iframe {
width: 500px!important;
height: 50px!important;
}
For me this is happening when the facebook like button is wrapped in "position relative" element with "z-index" higher then the content wrapper.
Check the position and the z-index of your elements.
Got an issue I've been trying to solve without much luck for a while across various projects.
I've got some divs with text inside that is centered with CSS using display: block and line-height. I also tried with padding and a fixed height. Typically, these are setup as either just headers, or sometimes buttons.
Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to center in the mobile browser, but this throws out all the other browsers and this is a responsive design.
Has anyone experienced this issue?
I've got -webkit-text-size-adjust: 100%; but that doesn't seem to be related to this issue.
So far my hack work around is to have devices only css which sets a different line-height, but as you can imagine, that's a horrible solution.
This article has some great information on many different options for centering content when you don't know anything about the widths and heights:
http://css-tricks.com/centering-in-the-unknown/
It builds on from user1002464's answer quite well.
you can use display:table-cell and vertical-align:middle for the div containing the text
I have a responsive site design, most of which works just fine.
On the checkout page though I have a Select element for selected a country. Some of the options are very long, the "Congo, the Democratic Republic of the" for example. This pushes the layout out to the right, breaking the layout and making the layout scroll horizontal - which is horrible ;)
If I remove the select completely, the layout displays fine. And if I remove all the options and put short tests ones in their place it also works fine. So I'm pretty sure its the long Option's which is the issue. The Select itself is only 50% wide, so that doesn't run off the screen - its the 'invisible' option elements.
Here is a temp link: http://moymadethis.com/oca/test.html
Works fine on desktop, issue is on iphone mobile (safari, chrome and opera).
Thanks, hope someone can shed some light on a solution for this?
Steve
Normally it suffices to set width on the select element itself (as opposite to setting width on its parent – the inner element will by default overflow if needed), e.g.
select { width: 6em; }
When the menu is opened (when the element is focused), the options will then appear in a width required by their context, but this will appear in a “layer” on top of the page content, so it should not disturb layout.
If problems remain, please post minimal HTML and CSS code to reproduce the problem and identify the platform(s) and browser(s) tested.
I've recently had exactly the same problem on a project i'm working on. I found the solution was to use !important on the select width which in my case was 100%. This allows the solution to work perfectly on mobile and desktop.
try using max-width on select element
eg #myselect {max-width:95%;}
On iPhone with iOS 15.4.1, I also needed to specify overflow-x:
#myselect {
width: 50%;
overflow-x: hidden;
}
Selected option value never overflows outside of <select> boundary box, but browser behaved as if it did overflow - parent element width clearly changed based on option that is currently selected. With above styling, this no longer happens.
I have a container div with 2 child panels to be implemented as adaptive layout.
By that, I simply mean that on desktop, the 2 child panels should float side-by-side
AND on iPhone, the 2 child panels should be one-below-another
Now below is my HTML;
<div class="container">
<div class="panel1"></div>
<div class="panel2"></div>
</div>
For the CSS, i just use the media query for desktop/iPhone.
For desktop (i.e. higher available width), my CSS is
.panel1{width:50%;float:left} //Span 50% of desktop width
.panel2{width:50%;float:left} //Span 50% of desktop width
For iPhone (i.e. lower available width), my CSS is
.panel1{width:100%;float:left} //Span entire iPhone width
.panel2{width:100%;float:left} //Span entire iPhone width
Now my question is how should I code the container div such that it would work fine across all major browsers ?
i.e. Should I use "float" for the container in both the CSS (desktop/iPhone) OR do I play with the 2 child panels like making float:none ?
Actually I know giving the 2 child panels as
width:100%;float:left
would work fine on iPhone ...But I am a bit uncomfortable with the though that they use float:left BUT appear on screen as one-below-other..
Please suggest some best practices for the same.
Kill the floats for the iPhone, you don't need those. Just use block-elements, they will go below eachother naturally, and use all available width automatically.
You can use overflow: hidden for the container div, so that it expands in height/width with the floats.
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.