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?
Related
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);
}
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 customized the Popup css to have it in fixed position and horizontally aligned in the center of the screen. It displays correctly in Android device, but way of in iOS. Below is the css I have and the screenshot for iOS and Android. How can I fix the issue in iOS?
.credit-deny-popup .popup {
position: fixed;
top: 60px;
margin-left:auto;
margin-right:auto;
width: 250px;
height: 250px;
}
.credit-deny-popup .popup-title {
font-weight: bold;
font-size: larger;
color: #FFFFFF;
}
.credit-deny-popup .popup-head {
background-color: #387EF5;
}
iOS Screenshot
Android Screenshot
Thank you in advance!
As suggested by #DaDanny in https://forum.ionicframework.com/t/ionic-popup-position/111102/4 fixed the issue. I had to add left and right in the css as well.
.credit-deny-popup .popup {
position: fixed;
top: 60px;
margin-left:auto;
margin-right:auto;
left: 0;
right: 0;
width: 250px;
height: 250px;
}
I'm using a speech bubble style tooltip based on the jquery ui tooltip widget 'Custom Styling' demo, but I'm having trouble properly displaying the arrow when I need it on the left side of the tooltip instead of on the top or bottom.
Can someone help me fix this code (it cuts off the tip and displays too large a section of the arrow)?
<style type="text/css">
.ui-tooltip.menu_info {
max-width: 200px;
}
* html .ui-tooltip {
background-image: none;
}
body .ui-tooltip { border-width: 1px; }
.ui-tooltip, .arrow:after, .arrow_left_side:after {
background: white;
border: 1px solid #999;
}
.ui-tooltip {
padding: 10px 12px;
color: Black;
font: 8pt "Helvetica Neue", Sans-Serif;
max-width: 150px;
border: 1px solid #999;
position: absolute;
}
.arrow_left_side {
height: 70px;
width: 8px;
overflow: hidden;
position: absolute;
top: 0px;
margin-top: 5px;
left: -8px;
}
.arrow_left_side:after {
content: "";
position: absolute;
width: 25px; height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
</style>
<script>
$(function() {
$('.menu_info').tooltip({
position: {
my: "left+20 center",
at: "right center",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow_left_side")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
</script>
Problem Description
The problem is caused by a combination of the CSS transformation and the overflow:hidden. The arrow is actually a square with width and height that is rotated 45o. The default origin point for the rotation is 50% 50% or center center which results in the "arrow" square being rotated around the middle which results in the edges being clipped by the overflow property.
It's best shown as an image or a demo (Webkit only), but the code used to demonstrate the problem is also below.
The 1st box shows the starting position of the "arrow" square, the 2nd box shows a small rotation around the center point. You can see that the edge is clipped already by the containing block's overflow:hidden. The 3rd shows a 45o rotation which demonstrates the problem you have. The 4th adds CSS to move the origin point to 0 25px, that is x=0, y=25px which is the bottom left corner, so you can see a small rotation around this point is looking better. The 5th pane shows a full 45o rotation around the modified origin. This looks much better and all that is left to do is reduce the width of the container to clip off the right hand side which leaves a left facing arrow. Then some simple CSS positioning to move it into place next to the tooltip content.
Solution
The modification needed to your CSS are small positioning changes on the container and the addition of an origin point for the rotation. I realise in the above description that I said an origin of 0 25px but in practice the arrow was still being clipped on the left side so I moved the origin out to 5px 25px instead.
.arrow_left_side {
margin-top: -5px;
left: -10px;
}
.arrow_left_side:after {
-webkit-transform-origin: 5px 25px;
/* for brevity, I have not added all the different browser prefix versions of transform-origin. If you need cross browser support, you will need to add these here */
}
See demo of the above changes
Demo Code
For completeness, here is the code to generate the above image. It's useful to interact with the demo by changing the rotation in the Chrome DevTools to see the square rotating in real time.
HTML
<div class="original"></div>
<div class="original-rotated-a-little"></div>
<div class="original-rotated-forty-five"></div>
<div class="original-with-transform-origin-rotated-a-little"></div>
<div class="original-with-transform-origin-rotated-forty-five"></div>
CSS
body {
margin-left:50px
}
div {
position:relative;
height: 50px;
width: 35px;
overflow: hidden;
top: 0px;
margin-top: 5px;
left: -8px;
border:1px dashed red;
}
div:after {
content: "";
position: absolute;
border: 1px solid #999;
width: 25px;
height: 25px;
}
div.original-rotated-a-little:after {
-webkit-transform: rotate(15deg);
}
div.original-rotated-forty-five:after {
-webkit-transform: rotate(45deg);
}
div.original-with-transform-origin-rotated-a-little:after {
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(15deg);
}
div.original-with-transform-origin-rotated-forty-five:after {
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(45deg);
}
Hope this helps :-)
I am rendering a jQuery combobox, but the height of input element does not match the height of toggle button as shown in screen shot below. This is happening in both, IE 9 and FireFox 13.
The style being used for jQuery combobox is as below.
<style>
.ui-combobox {
position: relative;
display: inline-block;
}
.ui-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-combobox-input {
margin: 0;
padding: 0.3em;
}
.ui-autocomplete { height: 200px; overflow-y: auto; }
</style>
You should update your combo-box widget from the jqueryui page. and make sure that you use the latest jquery-ui (this issue was fixed recently).
this helped me...