I have problem with my html/css code on iphone.
Visit this link http://my-services-demo.botic-denis.com/
and click on search icon in top bar.
After that You will see search bar.
Problem is starting when I click on search input box.
After that it seems like some element make body wider and I can scroll from left to right. Which shouldn't happen.
I can not find the issue causing this.
I have validate html and css.
Also I have another form on the bottom of the page. It is contact form and input fields are not making any problems on focus.
There is apparently a zoom issue on iOS when you click an input box the browser zooms in on that box, only way to fix is have the font size of the input box 16px or greater.
font-size: 16px;
Hope this helps.
Related
This issue is only can be seen at the mobile Chrome since the mobile keyboard needs to pop up .
Whenever I switch the focus of my input from the 4 input boxes at the modal (whenever I change the place of the cursor inside the input box, like for example when you place a cursor at input box #1 from the input box #3 that is at the bottom of the input box #1), you can see the boxes juddering up and down.
What is causing this issue and how to solve this (no shaking up and down when I change the focus) with those 4 inputs boxes placed at center horizontally and vertically?? Do I have to use Javascript for this to resolve the issue or it can be solved by only css?
The sample code is at https://codesandbox.io/s/condescending-rhodes-uyv7wn
and you should test the code at Chrome mobile through https://uyv7wn.csb.app/ which is hosted from the codesandbox.
I solved the issue by changing the input type from text to search and now it's working stable without juddering.
I have a very simple HTML web page that has one large image on it with several text boxes (drawn in the image) that I would like to have a user click on and a popup window open up with more text. Currently, I'm using hotspots and the behaviors tag in Dreamweaver to call a pop-up window for each box on the image.
Q1 - How do I hide the scrollbars on the popup window in HTML?
Q2 - Is there a better way to do this with little coding like a modal popup? I have lots of these popups with different text in each I will need.
Thank you in advance!
To hide the scroll bar there is some CSS you can use, attached below. And for making popups, I have never tried hotspot and behavior tag however I just created one a few days ago using position absolute and using display none and block. Basically, you have to create the whole design of your popup anywhere in the code and you then set it to display: none, and whatever click you have for it to pop up, you add a little javascript function to it which will change the properties of that popup to display: block or anything else that you are using.
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
I've spent a day trying to solve a problem. When a user zooms in on a page, the google places autocomplete .pac-container is no longer displayed under the corresponding input field. I have spent a day testing and the thing I found was this from Google: https://code.google.com/p/gmaps-api-issues/issues/detail?id=3416.
Let me explain in more detail. When I load a page with an initial scale of 1 on the viewport, and click on the search input field, the autocomplete suggestion box drops down exactly where it should. However, when I zoom in or out on that page on a mobile device, the .pac-container loses its position:
As you can see, the container is now gapped below the input field. I have tried a bunch of stuff, such as clearing the style of the .pac-container when the input field has focus. Nothing works. Does anyone have a solution?
I have just managed to fix this issue in my use case by simply adding 'height: auto' to the body css. Fixed the problem and now the .pac-container positions exactly where the input is required.
I added the facebook Like button to my website and am having an issue. When the Like button is clicked, the box that pops up doesn't overlay the other content like it does on most websites, instead creating a vertical scrollbar in the container (expanding it).
This issue actually exists on facebook's own website:
https://developers.facebook.com/docs/reference/plugins/like/
If you scroll about half way down the above page and click the Like button, the same issue happens:
The only difference there is that they have overflow set to hidden, instead of auto.
How can this be fixed?
Add to your CSS file:
.fb-like{overflow:hidden;}
This should solve the problem.
So, I want to set next to each other a Facebook like button(html5) and a Twitter tweet button.
Everything is set here: http://jsfiddle.net/tGujU/
I have one big problem when I click on the facebook like button.
Because it will show the comment pop-up (which I want to see poping-up), the facebook iframe get then resized to 450px. Once the pop-up disappears, the iframe is not resized to small dimension !
I set the design so no big space is created between the two buttons.
But the problem is then, once you click on the facebook like button, you cannot click on the tweet button anymore because the wide facebook iframe is covering it.
What I tried:
Use overflow:hidden on the div#facebook_button but then, I don't get to see the comment pop-up. => NG.
Change the iframe z-index to got the twitter iframe on the top => Did not work.
Add a listener on the FB iframe to try setting overflow:hidden at the right time and remove it when needed but could not find a way to listen to its changes.
What I want to do:
Keep providers in this order and not put Facebook on the right.
See the FB comment pop-up once like button is clicked.
Being able to click the tweet button after I click th FB button.
Having it supported in IE8+, FF4+ and Chrome.
Any help is welcome.
You could raise the z-index of the Twitter button (iframe), so that it is higher than any of the Facebook stuff.
#twitter_button iframe{
z-index:9999;
position:absolute
}
Not the prettiest solution, but it works (see the Fiddle).
.fb-like { width: 75px; } is what I do.
This is what I tend to do...
/* make the like button smaller */
.fb_edge_widget_with_comment iframe {
width:47px !important;
}
/* but make the span that holds the comment box larger */
.fb_edge_widget_with_comment iframe.fb_iframe_widget_lift {
width:450px !important;
}
The first bit of CSS sizes the like button however you want (in this case it's sized to hide the count bubble). The 2nd bit of CSS ensures that the comment box will be visible when the button's clicked.
Did you try giving it a fixed width of 120px. I think that would cover it