 How to prevent div's content from scrolling in safari/Chrome, How to prevent div's content from scrolling in safari/Chrome. As s |
  |
| Rahul Sharma |
 Oct 5 2009, 08:22 AM
Post
#1
|
|
Group: Members Posts: 1 Joined: 5-October 09 Member No.: 9,936  |
Hi,
Facing a strange issue. My html page contains a div element with fixed height and width and its overflow property set as hidden. as shown below: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> [b]<div style="height: 200px;width: 400px; border: 3px coral solid; overflow: hidden;">[/b] <input type="text" value="AAAAAAA" /> I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit 111 111 232 23 23 232 32 3 <input type="text" value="1111111" /> <input type="text" value="1111111" /> <input type="text" value="1111111" /> <input type="text" value="1111111" /> <input type="text" value="1111111" /> </div> </body> </html> Now if you open this html page in safari or chrome. As the content of the div is overflowing and div's overflow property is set as hidden so no scrollbar is displayed(as desired). Set focus on input type text, keep mouse pressed and drag the mouse. You will observe that div's content starts scrolling(which was not desired). Now open this page in ff/Ie and perform same operation content does not scrolls(desireable). How can I make sure that div's content does not scrolls in safari too. Code spinet will help. You can test this by copy pasting the html content in a test page and open in safari or chrome?  Thanks, Regards This post has been edited by Rahul Sharma: Oct 5 2009, 08:23 AM |
  |
 
|
| Temp Temp |
Aug 6 2011, 03:22 AM
Post
#2
|
|
Group: Members Posts: 1 Joined: 6-August 11 Member No.: 15,100 |
Hi,
this is a really annoying thing that I could not solve yet. And it is quite hard to find any tips on the internet. Did you manage to find a solution for that? That would be great! Greets, Temporaer |
|
|
|
| Christian J |
Aug 6 2011, 07:01 AM
Post
#3
|
|
.  Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
My advice would be to not rely on "overflow: hidden" to prevent access to content. Use "display: none" instead.
Anyway, this looks like a browser quirk, except that the spec doesn't really forbid it. The "hidden" value is defined as: QUOTE the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region. which just seems to deal with the lack of scrolling mechanism, not scrolling ability, so you might still be able to scroll using javascript. FWIW the following seems fix the content to the bottom (but doesn't work with a "top: 0" property): CODE <div style="height: 200px;width: 400px; border: 3px coral solid; overflow: hidden; position: relative;"> <p style="position: absolute; bottom: 0; margin: 0; border: solid red;"> <input type="text" value="AAAAAAA" /> ... </p> </div> |
 |
|
| pandy |
Aug 6 2011, 09:55 AM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I can see the content in the other browsers I tried too (IE7 and K-Mel/gecko). Both browsers let me tab to the input boxes at the bottom. If nothing else worked I would just downsize the text until it all fitted within the DIV.
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 09:57 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC