I am using ionic framework to develop an application . I am trying to apply some css on hover(on touch on mobile). it is working well in browser but not working in the real device.
Please help me to resolve the problem.
What is way to proceed to apply css for touch event.
The element:
<div class="deviceListItem">
<i class="myIcon ion-ios-unlocked-outline" ></i> <br>
Door Open
</div>
CSS for the element:
.myIcon {
background-color: #fff !important;
color: #000 !important;
-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.5) !important;
-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.5) !important;
box-shadow:0 0 10px rgba(0, 0, 0, 0.5) !important;
}
CSS for Hover effect:
.myIcon:hover {
background-color: #0078D7 !important;
color: #fff !important;
-webkit-box-shadow:0 0 12px rgba(0, 0, 0, 0.5) !important;
-moz-box-shadow:0 0 12px rgba(0, 0, 0, 0.5) !important;
box-shadow:0 0 12px rgba(0, 0, 0, 0.5) !important;
}
Related
I tried to put a shadow on ag-grid fixed columns like this, but it's not doing anything:
.ag-pinned-left-cols-container {
box-shadow: inset 10px 0 8px 8px rgb(0 0 0 / 15%);
}
How do you get a shadow onto the fixed columns, so it goes vertically along the fixed column (including the header and body)?
I needed to do this as well, so that we can tell that these are pinned columns and this is how I did it :
For the columns pinned on the left side :
.ag-header .ag-pinned-left-header,
.ag-body-viewport .ag-pinned-left-cols-container {
position: relative;
z-index: 1;
-webkit-box-shadow: 9px 1px 15px -4px rgba(0, 0, 0, 0.1);
box-shadow: 9px 1px 15px -4px rgba(0, 0, 0, 0.1);
}
For the columns pinned on the right side :
.ag-header .ag-pinned-right-header,
.ag-body-viewport .ag-pinned-right-cols-container {
position: relative;
z-index: 1;
-webkit-box-shadow: -9px 1px 15px -4px rgba(0, 0, 0, 0.1);
box-shadow: -9px 1px 15px -4px rgba(0, 0, 0, 0.1);
}
Note : I used this with the material theme and it looks great ! it should work with all the themes except the dark ones in which you can make the color lighter.
Note 2 : I had to add the "position: relative;" and "z-index: 1;" to make it work because there are many background colors on cell and row levels and with this it should work with all settings.
I have been scratching my head and haven't really found any solid documentation on why, when I use userEvent.hover, the test is not the expected one showing the hover box-shadow. I have tried using mouseEnter and mouseOver with fireEvent to no avail. As you can see below I also tried wrapping it in an async function which hasn't helped. Any ideas? Is it because of the transition?
Thank you in advance.
transition: all 0.2s ease-in-out;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
rgba(0, 0, 0, 0.07) 0px 16px 16px;
&:hover {
transform: scale(1.05);
transform: translate(0, -0.1rem);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
Here is the test:
it("should expect the button to shift box-shadow on hover", async () => {
const { getByRole } = render(
<PrimaryButton aria-label="sign up">Sign Up</PrimaryButton>
);
userEvent.hover(screen.getByText(/sign up/i));
await waitFor(() => {
expect(getByRole("button", { name: /sign up/i })).toHaveStyle(
"box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"
);
});
});
Here is the result of my RTL/Jest (test):
- box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+ box-shadow: rgba(0,0,0,0.07) 0px 1px 1px,rgba(0,0,0,0.07) 0px 2px 2px, rgba(0,0,0,0.07) 0px 4px 4px,rgba(0,0,0,0.07) 0px 8px 8px, rgba(0,0,0,0.07) 0px 16px 16px;
53 | userEvent.hover(screen.getByText(/sign up/i));
54 | await waitFor(() => screen.getByText(/sign up/i));
> 55 | expect(getByRole("button", { name: /sign up/i })).toHaveStyle(
| ^
56 | "box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"
57 | );
58 | });
As you can see it's stating that my box-shadow should be the one prior to hover. The code works fine, compiles and renders.
I have a ion modal which i want to show of 60% of my screen, but when keyboard appears the modal resizes to 60% of the screen (including keyboard) so it shrinks a lot. I want the modal to stay the same size (ideally the size of its contents). Pictures explain a lot.
This is the css
.ion-modal.modal {
width: 90%;
min-height: 0 !important;
height: 60% !important;
top: 5%;
left: 5%;
right: 5%;
bottom: 5%;
background-color: #fff;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); }
And this the html
<ion-modal-view id="details_modal" class="ion-modal">
STUFF
</ion-modal-view>
I fixed this issue using <ion-content overflow-scroll="false"></ion-content>
overflow-scroll="false"
fix the issue for me.
this is my css ; how do i set the navbar header to transparent. I have tried to set background-color; transparent; but this don't change anything
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
Try this
.navbar-inner {
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
For more details check out w3schools - CSS Image Opacity / Transparency
I am trying to use Select2 plugin on Kendo Window. But its not working for me. ComboBox content is not visible when trying to open that.
Just need to select2.css class select2-drop changed the z-index and it works just fine
.select2-drop {
width: 100%;
margin-top: -1px;
position: absolute;
z-index: 10010;
top: 100%;
background: #fff;
color: #000;
border: 1px solid #aaa;
border-top: 0;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}