I have a spinner in my ionic project. I want to put the spinner in the centre position of the screen. But it always shows up in the left top corner as:
Html file is:
<div *ngIf="spinner == 'true'">
<ion-spinner name="bubbles"></ion-spinner>
</div>
My scss file is:
page-login {
ion-spinner {
width: 28px;
height: 28px;
stroke: #444;
fill: #222;
}
}
Can you help?
I find the solution finally. Add a class spin and set text align center.
<div class="spin" *ngIf="spinner == 'true'">
<ion-spinner name="bubbles"></ion-spinner>
</div>
.spin{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ion-spinner {
width: 28px;
height: 28px;
stroke: #444;
fill: #222;
}
Why add a separate div tag above the ion-spinner?
Here's the best way to do it:
<ion-spinner name="bubbles" class="page-loader" *ngIf="showPageLoader"></ion-spinner>
.page-loader{
top:50%;
left:50%;
position: fixed;
transform: translate(-50%, -50%);
}
Add a class spin and set text align center.
<div class="spin" *ngIf="spinner == 'true'">
<ion-spinner name="bubbles"></ion-spinner>
</div>
.spin{
text-align: center;
}
ion-spinner {
width: 28px;
height: 28px;
stroke: #444;
fill: #222;
}
You can even center the loader using the flexbox property in css. Try this
<div class="spin" *ngIf="spinner == 'true'">
<ion-spinner name="bubbles"></ion-spinner>
</div>
.spin{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
<pre>
<ion-spinner></ion-spinner>
ion-spinner {
position: fixed;
z-index: 999;
height: 5em;
width: em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</pre>
Thats what I did.
Forgot the question I got help from.
Worked for me like this:
<div class="ion-text-center" *ngIf="spinner == 'true'">
<ion-spinner name="bubbles"></ion-spinner>
</div>
Place the spinner inside an tag and set the align property of to center :
div.loading-spinner{
text-align: center;
}
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 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)
Can we change icon from Ionic ion-checkbox ?
Can we use http://ionicons.com/ ?
for now, here my code :
<ion-view>
<ion-content class="has-header">
<ion-list>
<ion-checkbox class="item-checkbox-right">item 1</ion-checkbox>
<ion-checkbox class="item-checkbox-right">item 2</ion-checkbox>
<ion-checkbox class="item-checkbox-right">item 3</ion-checkbox>
Thank you
No, You can't.
As you can see that it is a default icon Set for ion-checkbox. You can only change the css like styling it by change color, background, margin, padding etc.
Alternatively you can change you checkbox to <input type="checkbox> and style it as in ionic.
UPADTED
I have opted pure css solution.
css
input[type="checkbox"] {
display: none;
}
input[type=checkbox]:not(old) + label {
display: inline-block;
padding: 1px;
line-height: 30px;
background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Empty.png) left top no-repeat;
background-size: 25px 25px;
}
input[type=checkbox]:checked + label { background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png) left top no-repeat;
background-size: 25px 25px;
}
html
<input type="checkbox" id="1">
<label for="1">Sector 1</label>
Big Thank You #Atula, we cannot change icon from ion-checkbox,
So, with css Ionic icon, here you are my solution (if you have better ? you're welcome) :
Please, help
html
<ion-view>
<ion-content class="has-header">
<div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item1')">
<label>Item1</label><!-- white space
--><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item1']}}"></i></div>
</div>
<div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item2')">
<label>Item2</label><!-- white space
--><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item2']}}"></i></div>
</div>
</ion-content>
</ion-view>
scss
#frameCheckboxHome{
width: 100%;
border-bottom: lightgrey solid 1px;
padding-top: 10px;
padding-bottom: 10px;
label{
width: 80%;
margin: 0px;
vertical-align: middle;
padding-left: 10px;
}
div{
width: 20%;
margin: 0px;
vertical-align: middle;
display: inline-block;
text-align: center;
}
div i{
color: lightgrey;
font-size: 36px;
}
.selected { color: orange; }
}
js with angular meteor 1.3 Ionic
class Home {
constructor($scope, $reactive) {
'ngInject';
$reactive(this).attach($scope);
this.myTab = [];
}
toggle(param){
!this.myTab[param] ? this.myTab[param] = "selected" : this.myTab[param] = "";
}
}
...
.component(name, {
templateUrl: `imports/ui/components/${name}/${template}.html`,
controllerAs: 'homeCtrl',
controller: Home
})
...
Well, you can change the icon for ion-checkbox with a little tweak ;).
Approach
remove the default icon
add a HTML element whose class changes on the ng-model value of ion-checkbox
Code
HTML:
<ion-checkbox class="custom-checkbox" ng-model="itemChecked">
I'm a checkbox
<i class="icon"
ng-class="{'true':'ion-ios-circle-filled', 'false':'ion-ios-circle-outline'}[!!itemChecked]">
</i>
</ion-checkbox>
CSS:
// positioning custom icon properly
.custom-checkbox .icon {
font-size: 20px;
position: absolute;
left: 16px;
}
// hiding default icon
.custom-checkbox i.checkbox-icon {
display: none;
}
Here's the CodePen Demo for it.
My solution:
.checkbox-md {
.checkbox-icon:before {
display: inline-block;
content: "\f219";
font-family: "Ionicons";
font-size: 1.9em;
color: $primary;
}
.checkbox-icon {
background-color: transparent;
border: none;
height: 32px;
&.checkbox-checked:before {
display: inline-block;
content: "\f147";
font-family: "Ionicons";
font-size: 1.9em;
color: $primary;
}
.checkbox-inner {
border: none;
}
}
}
I want to display a simple form inside fancybox overlay, which also works nice on smaller screen. i've set up an example on here http://design.imago.ee/test/fancybox-form/index1.html
Initially i set the form width to be 450px, at 620px screen size im setting the form width to 100% and after i have done it, fancybox window collapses width wise and the form is not displayed properly. Interestingly that doesnt happen with regular text content (second button in the example). I know that i could just change the width manually with media queries, but it isnt really a good solution. Can anyone help? Thank you.
It's not very elegant solution but will give you an idea and porbably put you closer to your goal
Change in fancybox css
.fancybox-inner {
overflow: hidden !important;
}
Script
Calculate width of window and adjust the width of content, use setInterval so any change in width will be adjusted dynamically.
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
Demo
$(document).ready(function () {
$('.fancybox').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
},
title: {
type: 'inside'
}
}
});
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
});
.fancybox-inner {
overflow: hidden !important;
}
* {
margin: 0;
padding: 0;
}
/* =========================== Layout styles =================== */
body, html {
height: 100%;
}
body {
font: 14px/1.4'Open sans', sans-serif;
overflow: hidden;
background-color: #fff;
padding: 20px 4%;
}
.centered-wrap {
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
a.fancybox {
display: inline-block;
vertical-align: top;
background-color: #59a3d3;
color: #fff;
padding: 4px 7px;
border-radius: 2px;
text-decoration: none;
}
h1 {
font-size: 23px;
font-weight: 600;
margin-bottom: 15px;
}
p {
margin-bottom: 20px;
}
.content {
padding: 20px 30px;
}
input[type="text"] {
border: 1px solid #ccc;
height: 30px;
font: 13px/30px'Open sans', sans-serif;
box-sizing: border-box;
width: 100%;
padding: 0 7px;
}
#form {
width: 450px;
padding: 30px;
}
#form .row {
margin-bottom: 10px;
}
#form .col {
float: left;
}
#form .col1 {
width: 25%;
}
#form .col2 {
width: 75%;
}
#form label {
display: inline-block;
vertical-align: top;
padding: 6px 10px 0 0;
}
/* ======================= media queries ======================= */
#media screen and (max-width: 620px) {
#form {
width: 100%;
text-align: center;
padding: 5px;
}
#form .col {
float: none;
width: auto;
text-align: center;
margin-right: 10px
}
#form label {
}
}
/* ======================== clearfix =========================== */
/* Force Element To Self-Clear its Children */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<div class="centered-wrap">
<p><a class="fancybox" href="#form">Fancybox with form</a></p>
<div style="display: none;">
<div id="form" class="content">
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
</div>
</div>
</div>
Fiddle Example
Note: Adjust the fiddle view screen to see how form width adjust itself with the change of screen size.
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