I was trying this code below, it's working in all browsers include the IE browser, but the problem scrollbar was hidden in IPad and iPhone Devices & added CSS also for browser-specific still no luck !!!
Does anyone help how to solve this issue?
<object data="your_url_to_pdf" type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>
It is normal for scrollbars to be hidden on mobile devices. But you can force them to appear by overriding the styles of ::-webkit-scrollbar-* properties.
This answer in another Stack Overflow thread provides an example:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
Related
This is my CSS for the custom style scroll-bar its works fine in chrome but not in Firefox browser.
how to make this CSS compatible in Firefox browser
<style>
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar {
height: 6px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius:10px;
}
</style>
Firefox scollbar style customization doesn’t work any more.
But you can try plugins that works in all browser.
Jscrollpane
Hesido
http://script-tutorials.com/custom-scrollbars-cross-browser-solution
http://manos.malihu.gr/jquery-custom-content-scroller
And also you can try below plugin only for firefox.
Noiascrollbars
hope this information helps you.
I've achieved the desired design for the scrollbar using the following:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 8px;
background-color: #999;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #666;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
As it can be seen above the changes are of course not for Internet Explorer, where I could just do for the moment the following:
body {
-ms-scrollbar-base-color: #999;
-ms-scrollbar-track-color: #999;
-ms-scrollbar-face-color: #666;
-ms-scrollbar-arrow-color: #999;
}
I want to know if is possible to recreate the same design present on Chrome in IE. Below are printscreens with the scrollbar, first from Chrome, second from Internet Explorer.
Unfortunatelly there is no cross browser way to style scrollbar with CSS. But you can try next JavaScript custom scrollbar plugins (mostly jQuery): jQuery Scrollbar, jScrollPane, mCustomScrollbar, perfect-scrollbar, slimScroll, baron or NiceScroll. There are more custom scrollbars available, but they are less functional/well-known.
I have use this : http://jscrollpane.kelvinluck.com/ this work on IE and it is very easy to use :) Enjoy !
This question already has answers here:
Make scrollbar visible in mobile browsers
(3 answers)
Closed 7 years ago.
Is there a way to keep the scrollbars always visible in mobile browser. By default a scrollable page get its scroll visible only when a touch/swipe is happening. How can I make the scrollbars always visible ?
Try this one on your css styles
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
I have isolated my input[type="submit"] in this JSFIDDLE.
The code as well,
input[type="submit"] {
width: 100%;
height: 40px;
background: #FFD100;
border-radius: 5px;
box-shadow: 0 5px 0 #A58B1E;
border: none;
font-size: 20px;
color: #2b2b2b;
cursor: pointer;
position: relative;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
input[type="submit"]:active, input[type="submit"]:focus {
box-shadow: 0 3px 0 #A58B1E;
top: 2px;
outline: none;
}
Everything look great except, when I checked the site on my iphone. Since my client wanted a responsive website I figured this button I made would look great on every device.
Oh boy, I was so wrong because on my iphone the button is truly hideous. I am including an image to what the mobile view looks like and the url to the site.
Any ideas why this is happening or how I can override it?
(Chatfield Drilling Live Site)
You might be looking for:
-webkit-appearance: none;
You need to use -webkit-appearance:none in your button.
Also, if you have round corners at input fields you can use the following CSS:
input {
-webkit-border-radius:0;
}
I have certain images which are placed in div's in the ul tag. I get scroll bar for more than 3 images. Any chance that i can apply styles to the scroll bar .
You can style scrollbar's of webkit browsers
The css: Applicable for Chrome and safari
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background-color: #b46868;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
background-color: #7c2929;
}
::-webkit-scrollbar-corner {
background-color: black;
}
Styling internet explorer which is a bit different :
body {
scrollbar-face-color: #b46868;
}
Mark that these will not work for non-webkit browsers. ex firefox
so, for non webkit browsers you need to use a jquery plugin.
For more help refer this site
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/