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.
Related
I've been given the task to try and fix an issue on this site:
[redacted]
When you tap below the bottom half of the screen on an iPhone 5, taps aren't registering and so links can't be clicked, etc.
I tried debugging by alerting what element is tapped, and nothing is registering below the halfway point. If you scroll down the page so the link you want to click is above the top half, it works perfectly fine.
I've searched around and there seems to be some issues with iPhone 5 apps (as far as I can tell, I'm not an app developer!) but I can't seem to find anyone having the same error on a responsive website.
What's going on - is it something to do with the viewport?
It looks like in your DOM you have an <iframe "id=FirebugUI"> that sits right below your element. It has some inline styles that include visibility:hidden; and a z-index of a super large number which means it's a hidden element that is on top of everything. You have some options:
1 - Get rid of it if you're familiar with what firebugUI is and can comfortably remove it all together. then you're good to go. It's probably being injected with some javascript.
2 - display none - you can add this css to remove it:
#FirebugUI {
display: none !important;
}
You'll need to add the important to the value so it overrides the inline styles. This may render the FirebugUI useless though.
3 - z index - you can update the z-index by setting it to like 0. But that will probably render this thing useless. so you might as well just remove this plugin if you're going to do that. You'll also need to use the !important value to override the inline styles.
Going to try my best to explain this as I don't have a working example at the moment.
I've found now with two sites, both using twitter bootstrap as a framework, an odd occurrence regarding the form placeholder element.
Take this theme for example, and note the newsletter form in the footer.
Theme
It uses the placeholder form attribute to label the name and email elements.
Now when viewing on an iPad/iPhone these display fine. Switch the orientation, and it will adjust fine, but then switch the orientation back, (i.e. portrait>landscape>portrait) and it throws the page off and knocks it off to the left. The layout is no longer fixed to the width.
I cannot understand why this is?
Any ideas?
This is a bug with iOS6, resolved in iOS7. Setting overflow: hidden; on the parent element of the input element (for example the form) fixes the problem.
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 select menu on a responsive page, which is set with a fluid width (% value). Everything looks fine until i decrease the page size, when the default value of the select menu (i.e when it's not focussed or clicked on) becomes squashed in the container and overflows, causing part of the text to be hidden, like this. Ideally, this needs to be solved.
I was thinking of incoporarting a line-break, using CSS/Javascript whenever the text overflows. However, I can not think of an appropriate CSS property or JS method to do this on a select element. Does anyone have experience with this or know how to solve it? You don't need to use my suggestion, feel free to come up with something else. The main thing is the text needs to be shown in it's entirety all the time on any screen size.
I have a jsfiddle link here, which uses CSS animations to simulate the page size decreasing.
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.