I want my modal to have a content (image), and a transparent background, but I can't achieve the transparent background, I will appreciate if you can help me.
Thank you very much!
Ionic CLI: 6.19.0
Ionic Framework: #ionic/angular 6.0.4
global.scss
.modal-answer .modal-wrapper {
--background: transparent !important;
margin: 0 auto;
height: 40%;
top: 30%;
width: 70%;
display: block;
}
game.ts
const modal = await this.modalController.create({
component: ModalAnswerPage,
cssClass: 'modal-answer',
componentProps: {
answe: this.ok_bad_time,
back_g: this.color_backg_modal_ answer'
}
});
return await modal.present().then(_ => {
});
modal-answer.page.scss
ion-content{
--background: transparent;
}
Remove your ion-content from you modal html. It inherit the background color from the component where you open the modal.
in you global.css :
ion-modal {
--background: transparent !important;
}
If this approach doesn't work, then instead you can add opacity to Modal parent element. For example :-
Modal component code :-
<div padding class="mainContent">
<div no-margin margin-top class="feedbackCard">
</div>
</div>
Here mainContent is complete page (transparent bg) and feedbackCard is the subpart (having white bg) and below is the CSS for above component
.mainContent {
flex: 1;
background-color: rgba(0, 0, 0, 0.3) !important;
justify-content: center;
align-content: center;
align-items: center;
display: flex;
}
.feedbackCard {
width: 100%;
border-radius: 4px;
background-color: white;
}
And you can open Modal using below code.
const modal = await this.modalCtrl.create({FeedbackComponent, 'backTransparent', {}});
modal.present();
global.scss
.backTransparent {
--background: transparent !important;
}
Related
I use svg-icons in an app and the question is if it is necessary to put icons in different colors there or if I can set a color by code. Here is my approach:
app.scss:
ion-icon {
&[class*="custom-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
&[class*="custom-mobile"] {
background: url(../assets/mobile.svg);
}
}
view:
<ion-item>
<ion-icon name="custom-mobile"></ion-icon>
</ion-item>
I change the color of background in the class-part but no effect on view.
I have a page on my application that has a Modal Page and I want to change the size of that page, I try to use the model property to change it but it will change the size of all the other ones and I want to have different models with different sizes
$modal-inset-min-width
Add this into your app.scss:
.my-modal {
height: 50%!important;
width: 50%!important;
}
I used the suggested approach to launch a modal with 50% height, but I found the problem of not having enabled the backdrop.
//app.scss
.my-modal {
height: 50%!important;
transform: translateY(100%);
}
outputs:
so I ended up with:
//app.scss
#include media-breakpoint-down(sm) {
.my-modal {
ion-backdrop {
visibility: visible !important;
}
.modal-wrapper {
border-radius: 10px 10px 0px 0px;
overflow: hidden;
top: 50%;
left: 0;
position: absolute;
width: 100%;
height: 50%;
}
}
}
that output these views:
I used the breakpoint mixin to keep the modal behavior in 768+ px (tablets, etc).
Hope helps somebody.
If you see inside create method of ModalController, it is:
create(component: any, data?: any, opts?: ModalOptions): Modal;
And here is ModalOptions:
export interface ModalOptions {
showBackdrop?: boolean;
enableBackdropDismiss?: boolean;
enterAnimation?: string;
leaveAnimation?: string;
cssClass?: string;
}
So, just add a class to your modal like that:
let modal = this.mModalController.create("YourModalPage","Your data",{
cssClass: "my-modal"
})
And now you can style for your modal by .my-modal class
Put his Code into your app.scss file
modal-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
#media not all and (min-height: 600px) and (min-width: 768px) {
ion-modal ion-backdrop {
visibility: hidden;
}
}
#media only screen and (min-height: 0px) and (min-width: 0px) {
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Modal Controller takes a custom css
let moreInfoModal = this.modalCtrl.create(DesktopMoreInfoPage, {
titles: title,
images: image,
description: description
}, {cssClass: 'custom-class'});
moreInfoModal.present();
Then in your app.scss file
.custom-class {
//your styling goes here
}
Custom css
ion-modal.my-modal {
padding: 10vh 10vw;
}
Custom ts
this.modalCtrl.create(pageName, {myParam:item}, { cssClass: 'my-modal' });
Here is an about me page and here is the GitHub
I've been making the website responsive and even tools like protoFluid to view it as if it was on an iPhone. However, I used my iPhone and there are numerous problems. The buttons does not seem to want to change their widths even though they are based on percentages. They are overflowing to the right and leaving a black space to the right.
.container .name .social div{
width: 80px;
display: inline-block;
}
.container .name .social img{
width: 100px;
}
.social {
position: absolute;
display: inline;
width: 425px;
left: 0;
margin-left: 10px;
}
#media only screen and (max-width: 600px) {
.social {
padding: 0;
width: 424px;
position: relative;
display: block;
margin: 0 auto
}
.name .social div {
width: 16.6666667%;
}
.social img {
width: 125%;
/*width: 100px*/
}
}
#media only screen and (max-width: 450px) {
.container .name .social div {
width: 13.6667%;
}
.container .name .social img {
width: 125%;
}
}
there are many ways to solve it, include using bootstrap framework... I always use a "resize window" chrome plugin(found in appstore here) , and the error is showed. And you can work it in your dev enviroment.
The buttons stay the same because the percentage width is decided on the size of parent controller. On line 271 of stylesheet.css .social class has width 425px (the same width it has on each screen size) so the buttons stay the same. Try changing width of .social class or simply use pixels for button dimensions for that media-query - #media only screen and (max-width: 600px)
I have already tried tweaking the fancybox stylesheet but can't seem to move the hover area of the previous and next button so that it does not interfere with the play button of a vimeo video. I don't know if the problem can be solved by modifying the javascript file but I really don't have the knowledge to do so. Here is the css code of the fancybox stylesheet:
#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: none;
}
#fancybox-left {
left: 0px;
}
#fancybox-right {
right: 0px;
}
#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
margin-top: 0px;
cursor: pointer;
z-index: 1102;
display: block;
}
#fancybox-left-ico {
background-image: url('fancybox.png');
background-position: -40px -30px;
}
#fancybox-right-ico {
background-image: url('fancybox.png');
background-position: -40px -60px;
}
#fancybox-left:hover, #fancybox-right:hover {
visibility: visible; /* IE6 */
}
#fancybox-left:hover span {
left: 20px;
}
#fancybox-right:hover span {
left: auto;
right: 20px;
}
I would appreciate if someone could help me figure out how to modify the hover areas for the previous and next buttons when using fancybox.
You could also make the containing divs shorter as I have just done, so the prev/next arrow hover areas finish just above the Vimeo controls
#fancybox-left, #fancybox-right {
height: 86%;
}
I accomplished this with:
#fancybox-left, #fancybox-right {
width: 0%;
}
I put this selector in my own stylesheet which I loaded after Fancybox's.
You don't actually need to mess with original fancybox css file.
What you can do is to crop the navigation arrows to their size so the next/prev area don't cover a whole area on both sides of the box.
AFTER you linked the fancybox css file, add this inline css declaration:
<style type="text/css">
#fancybox-left,
#fancybox-right {
width: 30px; height: 30px; top: 45%
}
#fancybox-left:hover span,
#fancybox-left-ico{
left: -10px;
}
#fancybox-right:hover span,
#fancybox-right-ico {
right: -10px;
left: auto;
}
</style>
This is for fancybox v1.3.x
Am using html, css to display an image.
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: middle
}
<IMG class="displayed" src="../images/splash.png" alt="...">
</IMG>
Its not displaying the image in the center of the screen (both vertically & horozontally).
your suggestions please.
To align an element both vertically & horizontally you could use the snippet below:
http://jsfiddle.net/catalinred/huKYW/
or
HTML:
<div>content here</div>
CSS
div
{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
background: red;
}