How to theme the scrollbar in xtermjs? I see the theme options for the background and foreground but nothing related to the scrollbar.
If anyone is looking, this was my solution in the xterm.css addind --webkit onto the viewport selector
.xterm .xterm-viewport {
/* On OS X this is required in order for the scroll bar to appear fully opaque */
background-color: transparent;
overflow-y: scroll;
cursor: default;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
scrollbar-color: var(--highlight) var(--dark);
scrollbar-width: thin;
}
.xterm-viewport::-webkit-scrollbar {
background-color: var(--dark);
width: 5px;
}
.xterm-viewport::-webkit-scrollbar-thumb {
background: var(--highlight);
}
Related
I am trying to style the ion-refresher component background on one specific page, because it has a header. It works like expected in Safari, but on the device, it overlays everything on top.
I have tried some stuff with z-index (also with pseudo element) + positioning absolute, but I cannot get the ion-refresher to sit where it normally is. As soon as I add a background-color to the ion-refresher, it will overlay on top.
Any ideas on how to style the background of this element?
The CSS I used. Please note it only overlays everything when I add a background-color.
ion-refresher:global(.ios) {
height: 120px;
ion-refresher-content {
position: relative;
padding-top: 18px;
justify-content: start !important;
&::after {
content: '';
display: block;
width: 100%;
height: 120px;
position: absolute;
top: 0;
z-index: -9999;
background-color: purple;
}
}
:global(.refresher-pulling-icon) {
color: white;
}
ion-spinner {
color: white;
}
}
Any advice on how to debug this?
I am building a modal popup window for mobile.
I noticed that when I try to scroll below the limit of the modal (see "B" part, on "A" part I reached the bottom),
The fixed section I have on the bottom becomes covered with gray, the more I try to force scroll.
It's happening both on Safari and Chrome, See this photo:
This is the order and CSS of the elements:
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.popup-r {
overflow-x: hidden;
width: 100%;
min-height: 100vh;
height: auto;
position: absolute;
z-index: 999;
top: 0px;
left: 0;
display: none;
padding-bottom: 100px;
}
.fix-section {
width: 100%;
z-index: 999;
position: fixed;
bottom: 0;
white-space: nowrap;
}
I have drawer animated mobile menu with scrollable navigation and fixed footer.
Since fixed element inside transformed element is impossible according to an old issue I applied absolute position to the footer and apply scroll to the navigation container.
The problem is that on IOS 12.1 footer randomly disappears.
HTML
<div class="menu">
<nav class="nav">...</nav>
<footer class="footer">Some footer</footer>
</div>
CSS
.menu {
position: fixed;
z-index: 1050;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
min-height: 100%;
transition: transform .3s ease-out;
transform: translate(-100%, 0);
-webkit-overflow-scrolling: touch;
&.menu-open {
transform: translate(0, 0);
}
}
nav {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 100%;
overflow: auto;
}
footer {
position: absolute;
bottom: 0;
width: 300px;
height: 65px;
}
UPD
I knew two working fixes:
1. change transform animation property to left, but thats less performant
2. set nav bottom to 65px to not overlap with footer but that's not answers why it's happening
Fiddle
I've read quite a few SO posts on iOS scrolling issues, I'm aware a few people have had issues. I've tried numerous fixes but I'm absolutely stuck on this!
I'm making a one page website. The layout is a 3D cube, using CSS3 transforms and animations. In a nutshell, the problem is the content on the front face will scroll, the content on other faces wont. As far as I can tell this breaks when I rotate the faces to create the cube. The content in the right face will not scroll, it acts like overflow: hidden;
I don't know how useful this will be, but I've created an Fiddle. It uses on part of the code (the main idea) and the whole lot is quite a bit to post. Has anyone tried to get overflow content to scroll on iOS inside a rotated/transformed parent element before?
I'm going crazy, please help! Thanks!
Here's my SASS from the Fiddle;
body {
margin: 0;
padding: 0;
}
.cube-container {
width: 100%;
perspective: 2000px;
-webkit-perspective: 2000px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
.cube-shell {
position: relative;
z-index: 1;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateY( 0deg ) translateX( 0px );
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease;
&.rotate-center-to-right {
animation-name: center-to-right;
}
}
.face {
background-position: 50% 50%;
background-size: cover;
padding: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
position: relative;
z-index: 10;
text-align: center;
width: 100%;
// When we are in "cube mode"
&.cube-compatible {
overflow: hidden;
position: absolute;
// z-index: 5;
top: 0;
left: 0;
right: 0;
// z-index: 0;
}
> .face-inner {
overflow: scroll;
// -webkit-overflow-scrolling: touch;
}
}
.face-inner {
max-width: 1320px;
max-height: 100%;
height: 100%;
width: 100%;
padding: 40px 60px;
margin: auto;
// display: inline-block;
display: block;
vertical-align: middle;
position: relative;
z-index: 30;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
// Center face
.face-center {
position: relative;
text-align: center;
background: #ccc;
}
// Right face
.face-right {
transform-origin: center right;
background: #efefef;
}
.scroll-content {
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}
.scrollable {
-webkit-backface-visibility: hidden;
}
}
#keyframes center-to-right {
0% {
transform: rotateY( 0deg ) scale3d( 1, 1, 1 );
}
// 15% {
// transform: rotateY( 0deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
// 75% {
// transform: rotateY( -90deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
100% {
transform: rotateY( -90deg ) scale3d( 1, 1, 1 );
}
}
https://jsfiddle.net/fkb241ys/14/
This is a follow-up question to this SO question.
I have a new requirement where I need to add an input field to the top of the panel.
So I would like $.scrollTo to affect #myContent instead of #myPanel .ui-panel-inner.
Here's the fiddle. You can see that the input field scrolls off the screen.
I thought I would try adding a div around the content:
$(document).on("pagebeforeshow", "#page1", function(){
$('#myPanel').on('panelopen',PanelOpen);
});
function PanelOpen(myEvent, myUI ) {
$("#myContent").scrollTo('#ID498',1000)
}
But it doesn't work.
Update your CSS so that the content is scrollable instead of the inner panel. The inner panel is still sized to fit the screen and then myContent is sized to fill the inner panel but leaving room at the top for the new input element:
.ui-panel .ui-panel-inner {
overflow: hidden;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#myContent {
overflow: auto;
position: absolute;
top: 78px; left: 0; right: 0; bottom: 0;
-webkit-overflow-scrolling: touch;
}
Then in panel open:
$("#myContent").scrollTo('#ID498',1000);
Updated FIDDLE
Another way of doing it with css
#myHeader { position: fixed;
z-index: 9999;
background-color:white;
box-shadow: 0px 0px 0px 28px white;
}
#myContent { margin-top:35%; }
Because of the Margin above with this method you subtract 5 on your ID's to get the position below the search box
#ID493 will go to 498
Demo http://jsfiddle.net/8dJJb/