I have the following div and the native scrolling does not work on it. Is there anything from this code that could possible be caused the scrolling to fail? Or is there something I can add to this to make the scrolling work?
<div id='calvw' style='overflow= hidden;'>
<a id='calevvw' dhx_l_id='#id#' data-ajax='false' href='eventview.php?eventid=#id#'
class='dhx_list_item dhx_list_day_events_time'
style='width:{common.widthSize()}; height:{common.heightSize()};
border-bottom: 1px solid #cbcbcb; padding:{common.padding}px;
margin:{common.margin}px; overflow:hidden;'>
</a>
</div>
If the div you are tying to have scroll is #calvw, this won't work, as you have overflow:hidden on it.
Change the css of that element to:
overflow:scroll;
-webkit-overflow-scrolling:touch;
To enable native, momentum scrolling.
Related
Before flagging this as already asked, pls read the whole scenario. Thanks
SHORT VERSION :
Just to clearly state what i am trying to achieve, here's the page https://www.facebook.com/MercedesBenzPolska/ and I want to add border to the target element (on which i am hovering), whether it be <div> or <img> or <p>, without the shaking
DETAILED VERSION
Webpage in question: Any of Facebook's page.
Requirement: Moving a cursor over an element should add border to the target element [only on hover therefore temporary border not permanent]. Permanent border will be added ONLY if I click on that element. [Simply, if I hover over an element it will be highlighted with, say, pink border and only when i click on it, a green border would be added]
Initial problem: adding border on elements on hover would make the whole page's structure shaky, since I am constantly adding and removing the border. For that what I did was add a transparent 1 px border to all the elements of the page, and on hover just change the color of the border from transparent to pink; thus no shaky.
Present problem: The above solution was working for all the pages till I encountered Facebook's page. It turns out adding the initial 1 px border totally disrupts the structure i.e. the look and feel of the page. DIVs move from somewhere to somewhere else.
How do I now solve my original problem? Is there a way of, maybe like, applying a negative margin or border, so that adding the extra 1 px border does not dirupt the page's structure? I don't know I am just suggesting. Pls help
[SCREENSHOTS]
1. this is when the page loads [without applying the border]
2. Now when I hover over the div containing image ie adding 1 px border on hover, the divs move here and there
css I am using
* { border: 1px solid transparent !important;} //when page loads
.hover-selected{ border: 1px solid #e42a78 !important;} //on hover border
.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} //when option is selected
The images and the css both reflect towards the same problem, the default 1px transparent border disrupts the page's css and If I don't do that, the on hover border application becomes shaky and the page's css anyway gets disrupt
box-shadow: 0px 0px 0px 1px #000;
Use box shadow instead border. Box-shadow don't take up space.
div {
width:300px;
height:300px;
background: red;
}
div:hover {
box-shadow: 0px 0px 0px 1px #000 inset;
}
<div> Test </div>
outline is perfect for this. It works in a very similar way to border but does not effect layout at all.
div:hover {
outline: 1px solid orange;
}
<div>
Lorem ipsum sit amet.
</div>
<div>
<img src="https://placehold.it/200x100">
</div>
<div>
Lorem ipsum sit amet.
</div>
you can use box-sizing property in css. Try below code with and without box-sizing property
<div class="item">
</div>
.item {
box-sizing: border-box;
height: 50px;
width:50px;
background:red;
}
.item:hover{
border:1px solid black;
}
I would start from something like this and move from there:
*:hover:last-child:before {
display:block;
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border:2px solid red !important;
}
Using a pseudo-element instead of putting a border on the actual object might not create as many issues with the initial layout. Still not exactly what you asked for, but I believe it's at least a bit closer. :-)
EDIT
I believe that the only way to achieve this as good as possible would be to be less greedy when selecting elements in the CSS, and specify a list like so:
a:hover:before,
img:hover:before{
display:block !important;
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
border:2px solid red !important;
}
I'm using an iFrame on the following website for the Online Booking system as shown below:
http://www.marandy.com/one2onev2
The iFrame should only display a scroll bar on the y-axis. In Firefox, IE and Safari this is working as expected, however in Google Chrome this is still showing both scroll bars (y & x).
Here is the code:-
HTML
<div id="main-online-booking">
<iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" frameborder="0"></iframe>
<div id="main-online-user">
<img alt="One 2 One Account" id="img-onlinebooking-acc" src="images/account.png" />
<img alt="One 2 One Guest" id="img-onlinebooking-guest" src="images/guest.png" />
</div>
</div>
CSS
#main-online-booking {
height: 488px;
border-bottom: 6px #939393 solid;
border-left: 6px #939393 solid;
border-right: 6px #939393 solid;
z-index: 4;
background-color: #fff;
}
#main-online-frame {
overflow-x: hidden;
frameBorder: 0;
height: 488px;
}
The overflow-x: hidden property appears to only not be working in Google Chrome on iFrames, any suggestions?
Add in Your iframe scrolling="no" and increase height #main-online-frame.......
On page inside your iframe (http://www.marandy.com/one2oneob/login-guest.php), add this html {overflow-x: hidden; overflow-y: auto;}.
And check initial height of page inside iframe. Make sure that initial height fits in height of iframe.
I ran into this same issue where Chrome was not applying overflow-x:hidden correctly, but all other browsers were. It wasn't an iFrame, but rather a div. I struggled with this for about 4 weeks and finally found that if I simply apply position:relative to that same div, it will work properly. Hopefully this is helpful to someone.
It seems logical that if you want a 1px wide black border around an iframe, you apply same rule as if you want the border around anything else. But this code doesn't work:
#myiframe{
border:1px solid black;
}
The border goes on the left and top of the iframe, sometimes (unpredictably) the bottom of it, but never the right of it. Why would it not just apply it consistently around the iframe??
I only have this problem in Google Chrome.
Try to add this..
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
outline:none;
outline:none and appearance:none will delete default browser appearance.
As pointed out in the comments on the question, I was on an out-of-date Chrome version. On the latest stable version, there is no bug.
try to wrap a DIV
html
<div class="wrapper">
<myiframe>
</div>
css
.wrapper {
float:left;
border:1px solid #000;
}
We can get unique border around our iFrame, by using attribute frameBorder.
So try <iframe src="" frameBorder="1"/>
I have a Youtube HTML iframe embed in my page, this is the code:
<iframe src="http://www.youtube.com/embed/gI2eO_mNM88?rel=0&autohide=1&color=white&showinfo=0&theme=dark&wmode=transparent&hd=1" width="470" height="264" frameborder="0" allowfullscreen webkitAllowFullScreen></iframe>
If I press play I get an dotted 1px outline in IE9+8. I have this in my CSS:
embed,
object {
outline: 0;
overflow: hidden
}
But that doesn't seem to help. It doesn't get an outline in Chrome or FF (both latest versions). I also tried putting the iframe in a div with the same dimensions as the iframe and giving that div overflow: hidden, but no luck either.
I've created a fiddle for this case: http://jsfiddle.net/keaukraine/UmTZy/
As you can see, outline appears inside iframe element. You cannot affect styling of elements inside iframe since it is beyond scope of your web page.
A rather ugly solution is to place iframe the way it hides 1px of it's outline. I've placed it inside slightly smaller div and positioned it so it hides this outline. If this solution is OK for you, you can see it in this fiddle: http://jsfiddle.net/raQEH/
Give your iframe an id="iframe" and try this :
#iframe:active, #iframe:focus {
border: none;
outline: none;
}
Try border:0; if outline didn't work.
I just posted this problem at the youtube dev forum. Hope they can solve this from their site
https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/gqt_G5d8HYM%5B1-25%5D
i' m making a website that have to work with all browsers.
I' ve tested IE, FF, Opera, Chrome and solved a lot of thing related to CSS and jQuery compatibility... but the last thing is making me crazy :(
Safari doesn' t work as it should on the vertical div scrollbar. It is blocked at the bottom of div at the first access. Zooming in/out the page is the only way to unlock it... then it works...
I have this CSS (just a part of it) :
html, body {
margin: 0px 0px 0px 0px;
font-family: "Trebuchet MS", sans-serif;
background-color:#FFF2E6;
height:100%;
overflow:hidden;
}
#content {
margin-top:5px;
margin-left:170px;
position:fixed;
float:right;
width:88%;
height: 85%;
display:inline;
overflow:auto;
background-color:#E5E5E5;
}
#main_content {
position:static;
width:99.8%;
height: 85%;
}
The HTML page (just the interested block) :
<div id="main_content">
<div id="menu">
<p>Menu</p>
... menu block ...
</div>
<div id="content"><p>Content</p></div>
</div>
Is there any way to solve the Safari div scroll stuck problem?
Thanks very much for your help and sorry for my english.
Just a lucky shot, not sure if it will work:
try using zoom:1; in your #content css block. Although its not an widely 'supported' tag but I recall that it did miracles for some css in IE, perhaps it will work for Safari too.
Sorry if I am wrong.
The problem is that I have a PHP generated page that is printed in the #content div via Ajax functions, well, this page has some iframe tags for files upload (the only working trick to upload a file in a jQuery/Ajax context..) These iframe had the src property set to src='#' what made Safari stuck on a simple div scrolling...
So if you encounter a problem like this just remember to fix your iframe src="#" to iframe src=".