I want scrollbars to be always visible in IOS. The quick solution is the "::-webkit-scrollbar" fix. However when using "webkit-overflow-scrolling: touch" for the "slide feeling", the scrollbars are not visible anymore.
How can I get them both working?
See the example http://jsfiddle.net/gatb4ct6/5/:
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
/*-webkit-overflow-scrolling: touch;*/
/* uncomment above and scrollbars are not visible on IOS */
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
I was searching for the same problem. It appears that you can use just one of the two options. Scroll auto but with styled scrollbar or fluid scroll but with invisible and not styled scrollbar.
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
Or use the -webkit-overflow-scrolling: touch; and none of the pseudo classes after.
Related
Here, you can see that currently, we are using a native input tag as an example. It works well But if we replace <input> with <lv-input> , tooltip doesn’t works because <lv-input> uses ::focus-within event for all the wrapper styling.
Currently, LvTooltip doesn’t support focus-within event.
import Tooltip from 'lightvue/tooltip';
export default {
directives: {
tooltip: Tooltip,
},
};
.lv-demo_layout {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
input {
padding: 8px;
background-color: #edf2f7;
border: none;
width: 30%;
border-radius: 4px;
border: solid 3px rgba(0, 0, 0, 0);
transition: all 0.2s;
}
.tooltip-example-wrapper > input::placeholder {
opacity: 0.7;
}
.tooltip-example-wrapper > input:focus {
outline: none;
border: solid 3px rgba(0, 0, 0, 0.1);
}
On my site, I have a few footer links that are showing the wrong border color for iOS devices when the link is visited. This is happening on Chrome and Safari for iOS.
Desktop
iOS
I searched through my code and I am not setting this style anywhere.
I have tried reproducing this in a fiddle/codepen, but since they don't let you redirect, I can't see what the a:visited looks like for mobile.
Code
.productsalessection {
width: 34%;
padding-top: 10px;
padding-right: 1%;
padding-bottom: 10px;
float: left;
font-family: Lato, sans-serif;
}
.productsalesbox {
width: 100%;
padding: 14px 12px;
float: left;
border-right: 1px solid #e2e2e2;
}
.productsalesbadge {
width: 80px;
height: 100%;
margin-right: 6px;
float: left;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
.productsalesheading {
margin-top: 3px;
color: #444;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
.productsalestext {
font-size: 12px;
line-height: 14px;
color: #777;
}
<a class="w-clearfix productsalessection" target="_blank" href="http://www.google.com">
<div class="w-clearfix productsalesbox">
<div class="productsalesbadge"><img src="http://www.chicmarket.com/images/SJ.svg">
</div>
<div class="productsalesheading">Trusted</div>
<div class="productsalestext">We proudly maintain a strong relationship with our customers.</div>
</div>
</a>
Changing the color of the a:visited works.
a:visited {
color: #C8C8C8;
}
But this solution is not ideal because this will mess with other a tags on my site.
I have also tried.
a:visited {
color: rgba(0, 0, 0, 0.0);
}
But instead of making the color transparent, it just makes the border black.
I don't normally post links to external sites, but if you would like to take a look and see the problem for yourself, you can check it out here.
Is there a simple fix for this that doesn't require me to set the a:visited color for each a tag that I have?
Looks like this was only happening to borders of divs inside of <a> tags on mobile. In order to fix this I had to not only set color: rgba(0, 0, 0, 0.0); for a:visited, but I had to select the specific div that had the border.
a:visited .productsalesbadge {
color: rgba(0, 0, 0, 0.0);
}
This completely removed the purple visited border I was seeing on mobile.
I'm developing a mobile application with cordova for, amongst others, IOS. In this application I'm using the HTML5 video player, but on my iPhone as well as my iPad the controls are situated OVER the play button. I can still press the play button, but seeking is harder than normal, and it just looks weird.
Does anybody have an idea on why this is and what I can do to solve this? Thanks.
Edit lib/ionic/css/ionic.css and remove/comment out the conflicting style attributes for input[range] Keep in mind that you will have to replicate the change in ionic.min.css for prod builds and/or if you update the ionic framework. Obviously you will have to come up with something less blunt if you are using or planning on using the Ionic framework's range input control styles.
ionic.css
/**
* Range
* --------------------------------------------------
*/
/*input[type="range"] {
display: inline-block;
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
padding-right: 2px;
padding-left: 1px;
width: auto;
height: 43px;
outline: none;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ccc), color-stop(100%, #ccc));
background: linear-gradient(to right, #ccc 0%, #ccc 100%);
background-position: center;
background-size: 99% 2px;
background-repeat: no-repeat;
-webkit-appearance: none; }
input[type="range"]::-webkit-slider-thumb {
position: relative;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-appearance: none;
border: 0; }
input[type="range"]::-webkit-slider-thumb:before {
position: absolute;
top: 13px;
left: -2001px;
width: 2000px;
height: 2px;
background: #444;
content: ' '; }
input[type="range"]::-webkit-slider-thumb:after {
position: absolute;
top: -15px;
left: -15px;
padding: 30px;
content: ' '; }
.range {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
padding: 2px 11px; }
.range.range-light input::-webkit-slider-thumb:before {
background: #ddd; }
.range.range-stable input::-webkit-slider-thumb:before {
background: #b2b2b2; }
.range.range-positive input::-webkit-slider-thumb:before {
background: #387ef5; }
.range.range-calm input::-webkit-slider-thumb:before {
background: #11c1f3; }
.range.range-balanced input::-webkit-slider-thumb:before {
background: #33cd5f; }
.range.range-assertive input::-webkit-slider-thumb:before {
background: #ef473a; }
.range.range-energized input::-webkit-slider-thumb:before {
background: #ffc900; }
.range.range-royal input::-webkit-slider-thumb:before {
background: #886aea; }
.range.range-dark input::-webkit-slider-thumb:before {
background: #444; }
.range .icon {
-webkit-box-flex: 0;
-webkit-flex: 0;
-moz-box-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
flex: 0;
display: block;
min-width: 24px;
text-align: center;
font-size: 24px; }
.range input {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
margin-right: 10px;
margin-left: 10px; }
.range-label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-moz-box-flex: 0;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: block;
white-space: nowrap; }
.range-label:first-child {
padding-left: 5px; }
.range input + .range-label {
padding-right: 5px;
padding-left: 0; }
*/
Now I am using primefaces fileupload. I set width to fileupload. But when selecting long file names, filename is overflow. Like
How to solve this??? My css is
.ui-panelgrid tr,.ui-panelgrid td {
border: none;
}
.ui-fileupload .cancel {
display: none;
}
.ui-fileupload .progress {
display: none;
}
.ui-widget-content {
background: none;
border: 1px solid #A8A8A8;
color: #4F4F4F;
}
.ui-widget-header {
background: none;
border: none;
color: #333333;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
width: 450px;
}
.fileupload-content {
padding: 0.2em 0.4em;
}
.fileupload-with {
width: 600px;
}
You just have to fix your CSS, has been asked many times on SO in general. Since you are using PF fileUpload particularly you can use something like this.
.files td.name {
word-break:break-all;
}
More Info:
http://css-tricks.com/almanac/properties/w/word-break/
I have a problem with my webkit scrollbar on the iPod/iPhone/iPad - the user can't scroll down. The scrollbar just looks like a floating line, and the page breaks halfway through. (It works fine in Chrome & Safari.)
Is there any way I can keep the scrollbar, but have it not be custom on apple products?
Here's my site, and here's my scrollbar code:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
height: 10px;
}
::-webkit-scrollbar-button:vertical:increment {
background-color: #fff;
}
::-webkit-scrollbar-track-piece {
background-color: #eee;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
html {
overflow: auto;
background-color: #FAFAFA;
-webkit-font-smoothing: antialiased;
}
body {
background: #FAFAFA;
font-family: arial, serif;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
overflow-y: scroll;
overflow-x: hidden;
color: #999;
}
You might have to load that scrollbar styling code from a separate stylesheet. Move it over to a new file, lets say scrollbars.css, and attach this code to your JavaScript:
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.search('iphone') == -1 && userAgent.search('ipod') == -1)
{
$('head').append('<link rel="stylesheet" href="scrollbars.css" type="text/css" />');
}
In your site, you have these styles in the main page:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
height: 10px;
}
::-webkit-scrollbar-button:vertical:increment {
background-color: #fff;
}
::-webkit-scrollbar-track-piece {
background-color: #eee;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
...
Take them and copy them over to a new file called scrollbars.css. Now, delete those old ones from your site completely. The JavaScript loads the scrollbar CSS file automagically.