I have modal in Ionic, it works perfect, but I can't style it, it always shows full screen on mobile. I will appreciate if you can guide me to customize it. Thanks!
ts:
const modal = await this.modalCtrl.create({
component: ModalInfoPage,
cssClass: 'my-modal-info',
.................
global.scss:
.my-modal-info .modal-wrapper {
background-color: rgb(65, 153, 22);
height: 60%;
top: 20%;
position: absolute;
display: block;
}
Ionic CLI : 6.10.0 (C:\Users\UUU\AppData\Roaming\npm\node_modules\#ionic\cli)
Ionic Framework : #ionic/angular 6.0.2
#angular/cli : 13.0.4
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0
global.scss
ion-modal#ride-time {
--background: rgba(0, 0, 0, 0.2);
&::part(content) {
backdrop-filter: blur(6px);
width: 100%;
height: 100%;
}
app-time-picker {
background: transparent;
padding-top: 50%;
padding-block-start: 50%;
padding-left: 10%;
padding-right: 10%;
}
}
ts:
async openTime(componentProps) {
const options: ModalOptions = {
id: 'ride-time',
keyboardClose: true,
component: TimePickerPage,
componentProps: componentProps,
};
const modal = await this.modalCtrl.create(options);
return modal;
}
the way to target has changed, now you need to use shadow parts to achieve what u want..
Related
I tried to recreate the sliding image feature on the website superlist.com using html and I found a tutorial that made it work.
HTML
<div id="left-side" class="side">
<h2 class="title">
Sometimes a simple header is
<span class="fancy">better</span>
</h2>
</div>
<div id="right-side" class="side">
<h2 class="title">
Sometimes a simple header is
<span class="fancy">better</span>
</h2>
</div>
<a id="source-link" class="meta-link" href="https://superlist.com" target="_blank">
<i class="fa-solid fa-link"></i>
<span class="roboto-mono">Source</span>
</a>
<a id="yt-link" class="meta-link" href="https://youtu.be/zGKNMm4L-r4" target="_blank">
<i class="fa-brands fa-youtube"></i>
<span>2 min tutorial</span>
</a>
CSS
:root {
--yellow: rgb(253, 216, 53);
--blue: rgb(98, 0, 234);
--dark: rgb(20, 20, 20);
}
body {
background-color: var(--dark);
margin: 0px;
}
.side {
display: grid;
height: 100vh;
overflow: hidden;
place-items: center;
position: absolute;
width: 100%;
}
.side .title {
font-family: "Rubik", sans-serif;
font-size: 8vw;
margin: 0px 10vw;
width: 80vw;
}
.side .fancy {
font-family: "Lobster", cursive;
font-size: 1.3em;
line-height: 0.8em;
}
#left-side {
background-color: var(--blue);
width: 60%;
z-index: 2;
}
#left-side .title {
color: white;
}
#left-side .fancy {
color: var(--yellow);
}
#right-side {
background-color: var(--yellow);
}
#right-side .title {
color: var(--dark);
}
#right-side .fancy {
color: white;
}
/* -- YouTube Link Styles -- */
#source-link {
top: 60px;
}
#source-link > i {
color: rgb(94, 106, 210);
}
#yt-link {
top: 10px;
}
#yt-link > i {
color: rgb(239, 83, 80);
}
.meta-link {
align-items: center;
backdrop-filter: blur(3px);
background-color: rgba(40, 40, 40, 0.9);
border-radius: 6px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: inline-flex;
gap: 5px;
left: 10px;
padding: 10px 20px;
position: fixed;
text-decoration: none;
transition: background-color 350ms, border-color 350ms;
z-index: 10000;
}
.meta-link:hover {
background-color: rgb(40, 40, 40);
}
.meta-link > i, .meta-link > span {
height: 20px;
line-height: 20px;
}
.meta-link > span {
color: white;
font-family: "Rubik", sans-serif;
transition: color 600ms;
}
JS
const left = document.getElementById("left-side");
const handleMove = e => {
left.style.width = `${e.clientX / window.innerWidth * 100}%`;
}
document.onmousemove = e => handleMove(e);
document.ontouchmove = e => handleMove(e.touches[0]);
I used the code and it worked fine but I was wondering whether you could do the same using flutter. I tried searching for specific widgets that allow you to make this kind of slider, but until now I haven't found anything satisfying, so I'm guessing you'd need a custom solution here.
How can I make this feature possible using flutter?
https://drive.google.com/file/d/1_FxXK2Ymo1GLRRIiNzmfIt95-DsYy1O2/view?usp=sharing
you can see a UI example above
I have a background image that I want to have full screen with an input section at the bottom. When the input is focused, the keyboard appears and shrinks the image to fit the screen. What I want is for the image to push the full div up without re-sizing it.
I've tried numerous things, but my current attempt is as follows:
.background{
url('assets/background.png') center center fixed;
height: 100%;
width: 100%;
}
.input-area{
position: absolute;
left: 10px;
bottom: 10px;
right: 10px;
}
<div class="background">
<div class="input-area">
//textboxes
</div>
</div>
This seems like it should be easy to accomplish, but can't get the desired outcome. Any input would be appreciated, thanks.
ionic cli 4.12.0
#ionic/angular 4.4.0
#ionic-native 5.5.1
node v10.15.2
npm 6.4.1
cordova 8.1.2 (cordova-lib#8.1.1)
this is how I managed to do it:
I added an id to my ion-content and ion-toolbar in html file to reference them in my typescript file
...
<ion-content #content >
...
<ion-toolbar #toolbar color="light">
<ion-input #input >...
...
in my typescript I referenced them with ViewChild and added the functionality in the constructor like this
...
#ViewChild('content', {read: ElementRef}) contentRef: ElementRef;
#ViewChild('toolbar', {read: ElementRef}) toolbarRef: ElementRef;
...
private startkeyboardAnimationTimestamp = 0;
private endkeyboardAnimationTimestamp = 0.3;
private keyboardAnimationDuration = 0.3;
...
constructor(private renderer: Renderer2) {
if (this.platform.is('capacitor')) {
window.addEventListener('keyboardWillShow', (e) => {
this.startkeyboardAnimationTimestamp = Date.now();
this.keyboardHeight = (<any>e).keyboardHeight;
this.renderer.setStyle(this.contentRef.nativeElement, 'transform', `translate3d(0, ${-this.keyboardHeight}px, 0)`);
this.renderer.setStyle(this.contentRef.nativeElement, 'transition', `${this.keyboardAnimationDuration}s ease-in-out`);
this.renderer.setStyle(this.toolbarRef.nativeElement, 'transform', `translate3d(0, ${-this.keyboardHeight}px, 0)`);
this.renderer.setStyle(this.toolbarRef.nativeElement, 'transition', `${this.keyboardAnimationDuration}s ease-in-out`);
window.addEventListener('keyboardDidShow', (e) => {
this.endkeyboardAnimationTimestamp = Date.now();
});
window.addEventListener('keyboardWillHide', () => {
this.renderer.setStyle(this.contentRef.nativeElement, 'transform',
`translate3d(0, 0px, 0)`);
this.renderer.setStyle(this.toolbarRef.nativeElement, 'transform',
`translate3d(0, 0px, 0)`);
});
...
** as for the keyboardAnimationDuration I have it default to 0.3s and update it after the first show and hide.
This worked for me:
in the AndroidManifest.xml
android:windowSoftInputMode="adjustResize"
In the scss:
ion-content{
--background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
padding: 0;
}
I am trying to load a full width navigation bar by clicking a menu icon. And i am using angular 5. I have tried googling about DOM manipulation in angular 5+ versions but its really confusing and complicated.
My question is about how can i change or manipulate these html elements using angular(typescript) like we used to do with plain javascript and JQuery.
My question is all about changing the width of a div but i want to know how can i work with other css styles and DOM manipulation techniques.
Here is my code
home.component.html
<section id="top">
<div id="menu">
<a id="toggle" (click)="openMenu()" >
<i class="fa fa-bars menu-bar" aria-hidden="true"></i>
</a>
</div>
<div id="sidenav" class="overlay" ref="#sidenav">
×
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<div id="heading">
<div id="logo">Koa</div>
<div id="tagline">next generation web framework for node.js</div>
</div>
</section>
home.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
styles.scss
/* You can add global styles to this file, and also import other style files */
#import "~bootswatch/dist/lux/_variables.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import "~bootswatch/dist/lux/_bootswatch.scss";
body {
background-color: #F5F5F5;
}
//navbar
#menu {
position: fixed;
top: 35px;
right: 42px;
z-index: 50;
}
#menu a#toggle {
position: absolute;
top: 0;
right: 0;
padding: 15px;
background:transparent;
border-radius: 2px;
border: 1px solid transparent;
z-index: 5;
font-size: 1.3rem;
color: black;
}
//sidenav
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
//heading or showcase
#heading {
position: absolute;
top: 50%;
margin-top: -150px;
text-align: center;
width: 100%;
}
#logo {
font: 150px 'Italiana', sans-serif;
text-transform: lowercase;
}
#tagline {
font-size: 16px;
}
You can use [ngClass]="{'scssClassName': condition}" for conditioning class appendance on div like this:
<div class="existingClassWithNormalWidth" [ngClass]="{'scssClassNameWithFullWidth': condition}">{{childTags}}</div>.
You can also give different classes for different conditions on same tags like this: [ngClass]="{'scssClassName': condition, 'scssClassName2': condition2, 'scssClassName3': anyBooleanVariable,}"
You can set condition(or boolean) to be true by clicking button. Angular will automatically append the class to div itself.
You can also use [ngStyle] for only full width, but if you want to give extra style, you better make a class to SCSS and use [ngClass].
Find official doc for class https://angular.io/api/common/NgClass
(If you want to append class)
Find official doc for style only https://angular.io/api/common/NgStyle
(If only you want to make full width with ngStyle)
Here's what I've got so far:
JSFiddle
CSS:
#button-top { width: 100px; position: absolute; left: 75%; top: 40px; padding-left: 100px;overflow: hidden;}
#button-top:hover, #button-bottom:hover {cursor: pointer;}
.slide { position: relative; height: 100px; overflow: hidden; width: 350px; }
.slide img {position: relative; z-index: 100;}
.slide p {width: 80px; padding:8px 16px; color: #fff; margin: 0; }
.innerTop, .innerBottom { position: absolute; left: 0; top: 10px; width: 200px; height: 90px; padding: 6px; background: url(http://i39.tinypic.com/nz4ldw.png) 0 0 no-repeat; z-index: 50; display: none; }
#button-bottom { width: 100px; position: absolute; left: 75%; top: 240px; padding-left: 100px;overflow: hidden;}
SCRIPT:
$('#button-top').click(function() {
$('.innerTop').toggle('slide');
});
$('#button-bottom').click(function() {
$('.innerBottom').toggle('slide');
});
HTML:
<div class="hide-mobile" id="button-top">
[IMG]
<div class="slide innerTop"><p>HIDDEN SLIDING CONTENT</p></div>
</div>
<div class="hide-mobile" id="button-bottom">
[IMG]
<div class="slide innerBottom"><p>HIDDEN SLIDING CONTENT</p></div>
</div>
I'd like the blue inner div to slide from RIGHT to LEFT.
It can be easily done using animate function. Here is the solution:
$('#button-top').toggle(function() {
$('.innerTop').animate({'left':'3px'});
}, function() {
$('.innerTop').animate({'left':'103px'});
});
$('#button-bottom').toggle(function() {
$('.innerBottom').animate({'left':'3px'});
}, function() {
$('.innerBottom').animate({'left':'103px'});
});
http://jsfiddle.net/nAaMV/6/
You can do this:
// Set the options for the effect type chosen
var options = { direction: 'right' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('#button-top').click(function() {
$('.innerTop').toggle('slide', options, duration);
});
$('#button-bottom').click(function() {
$('.innerBottom').toggle('slide', options, duration);
});
Please make sure to include the jQuery UI file in your code, like I have included in the fiddle ( See the checkbox for the jQuery UI 1.9.2 checked in right side ).
FIDDLE DEMO #1 or FIDDLE DEMO #2
I have set up a nice little slider using the following CSS:
/*SLIDER
===================================
*/
#full-slider-wrapper {
overflow: hidden;
}
#full-slider {
position: relative;
width: auto;
min-height: 1200px;
margin: 0 auto;
}
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: auto;
visibility: hidden;
}
#full-slider .slide-panel.active {
visibility: visible;
}
#full-slider-nav-left
{
position: fixed; top: 550px; width: auto; margin: auto 0 auto auto;
left: 0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent;
}
#full-slider-nav-right {
position: fixed; top: 550px; width: auto; margin: auto auto auto 0;
right:0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent;
}
#full-slider-nav-left {
border-right-color: #BBB;
}
#full-slider-nav-left:hover {
border-right-color: #999;
}
#full-slider-nav-right {
border-left-color: #BBB;
}
#full-slider-nav-right:hover {
border-left-color: #999;
}
As you can see, I have set the navigation arrows on either side of the container. They remain fixed as I scroll up and down the page. I'm using the responsive Skeleton framework and when I collapse the browser down to mobile size, the arrows work fine. The arrows also work fine on the android platform. However, when I attempt to browse the website on an iPhone, the arrows jump around as I scroll and then disappear.
From what I have read, iPhones have had problems with position:fixed in the past, however this was supposedly resolved with iOS 5.
Unfortunately I don't have a live version of the site to demonstrate the issue.
Any help would be greatly appreciated.