how to remove ionic tiny scroll in the website - javascript

I have the a problem when trying too render ionic content in my website , you can check the problem here to inspect my element and css :
https://elitestudents.link/html/
here is my html code
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css" />
</head>
<body>
<ion-app >
<ion-content>
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">اسم الطالب</ion-label>
<ion-input placeholder="الاسم بالعربي" style="text-align:center ;"></ion-input>
</ion-item >
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">هاتف لي الامر</ion-label>
<ion-input type="number" placeholder="07****" style="text-align:center ;"></ion-input>
</ion-item>
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">معرف التلكرام الخاص بالطالب</ion-label>
<ion-input placeholder="لا تنسة ال # بالداية" style="text-align:center ;"></ion-input>
</ion-item>
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">كود الدورة</ion-label>
<ion-input placeholder="" style="text-align:center ;"></ion-input>
</ion-item>
<ion-button style="--background: orange; border-radius: 50px ; text-align:center ;" > الانضمام للدورة
<ion-icon slot="start" name="school"></ion-icon>
</ion-button>
</ion-content>
</ion-app>
</body>

Related

Need to target a div in js but query selector giving null even the div is present on inspect but that is coming from a jquery library I am using

I am trying to target a div in plain javascript code but querySelector is giving null because it is not present in hard coded i.e. my written code in HTML but it is coming from flickity plugin but I need to perform some other logics by targeting its div inside the javascript.
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Icon slider</title>
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css" />
</head>
<body>
<div class="icons" style="display: flex">
<div class="carousel" style="position: relative; width: 400px; padding: 20px" data-flickity='{
"freeScroll": true, "contain": true, "prevNextButtons": false,
"pageDots": false }'>
<div class="iconContainer carousel-cell iconContainer2">
<label class="icon icon2" for="heart">❤️</label>
</div>
<div class="iconContainer carousel-cell iconContainer3">
<label class="icon icon3" for="fire">🔥</label>
</div>
<div class="iconContainer carousel-cell iconContainer4">
<label class="icon icon4" for="rocket">🚀</label>
</div>
<div class="iconContainer carousel-cell iconContainer5">
<label class="icon icon5" for="allien">👽</label>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<script>
const el = document.querySelector(".flickity-slider");
console.log(el);
</script>
</body>
</html>

The element is not there yet when your code runs.
An easy fix is to use setTimeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Icon slider</title>
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css" />
</head>
<body>
<div class="icons" style="display: flex">
<div class="carousel" style="position: relative; width: 400px; padding: 20px" data-flickity='{
"freeScroll": true, "contain": true, "prevNextButtons": false,
"pageDots": false }'>
<div class="iconContainer carousel-cell iconContainer2">
<label class="icon icon2" for="heart">❤️</label>
</div>
<div class="iconContainer carousel-cell iconContainer3">
<label class="icon icon3" for="fire">🔥</label>
</div>
<div class="iconContainer carousel-cell iconContainer4">
<label class="icon icon4" for="rocket">🚀</label>
</div>
<div class="iconContainer carousel-cell iconContainer5">
<label class="icon icon5" for="allien">👽</label>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<script>
setTimeout(() => {
const el = document.querySelector(".flickity-slider");
console.log(el);
}, 500)
</script>
</body>
</html>
MutationObserver will be even better
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Icon slider</title>
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css" />
</head>
<body>
<div class="icons" style="display: flex">
<div class="carousel" style="position: relative; width: 400px; padding: 20px" data-flickity='{
"freeScroll": true, "contain": true, "prevNextButtons": false,
"pageDots": false }'>
<div class="iconContainer carousel-cell iconContainer2">
<label class="icon icon2" for="heart">❤️</label>
</div>
<div class="iconContainer carousel-cell iconContainer3">
<label class="icon icon3" for="fire">🔥</label>
</div>
<div class="iconContainer carousel-cell iconContainer4">
<label class="icon icon4" for="rocket">🚀</label>
</div>
<div class="iconContainer carousel-cell iconContainer5">
<label class="icon icon5" for="allien">👽</label>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<script>
const targetNode = document.querySelector(".carousel");
const config = {
attributes: true,
};
const callback = (mutationList, observer) => {
const el = document.querySelector(".flickity-slider");
console.log(el)
observer.disconnect();
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
</script>
</body>
</html>

how do i make item in a bucket list disappear

I choose element div with classname item using property querySelector('.item), and expect this element to disapear when I click element a.
however it didn't work when style.display is set to none. I dont know what went wrong
const minus = document.querySelector('a');
//const item = document.getElementsByClassName('item');
const item = document.querySelector('.item');
const input = document.querySelector('input');
minus.addEventListener('click',myfunc);
function myfunc(){
//return the display property
item.style.display = 'none';
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>

.d-flex uses !important which overrides the display: none, It works when you remove it:
const minus = document.querySelector('a');
//const item = document.getElementsByClassName('item');
const item = document.querySelector('.item');
const input = document.querySelector('input');
minus.addEventListener('click',myfunc);
function myfunc(){
//return the display property
item.style.display = 'none';
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<div class="item mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
Or, instead of completely removing it you can set property display: none as !important as well so d-flex won't be able to override it item.style.setProperty("display", "none", "important"):
const minus = document.querySelector('a');
//const item = document.getElementsByClassName('item');
const item = document.querySelector('.item');
const input = document.querySelector('input');
minus.addEventListener('click',myfunc);
function myfunc(){
//return the display property
item.style.setProperty("display", "none", "important");
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>

Input elements not scrolling

Ionic 2 input elements not scrolling to top when keyboard is shown. I have tried everything that i could find on google. making sure keyboard disable scroll is not true. But still couldn't figure it out what makes the scroll not working.
Any advice would be helpful. Thank you.
Code:
<ion-header>
<ion-navbar color="header">
<ion-title>Billing Info</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list style="padding: 10px 15% 10px 15%">
<ion-item *ngFor="let item of cart.Food">
{{item.Food}}
<div item-right>₹ {{item.Qty*item.Price}}</div>
</ion-item>
</ion-list>
<ion-item (click)="toggleGroup(i)" style="padding: 10px 15% 10px 15%; font-size: large">
Net Total
<div item-right>₹ 150
<ion-icon color="success" [name]="isGroupShown(i) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
</div>
</ion-item>
<ion-list *ngIf="isGroupShown(i)" style="padding: 10px 15% 10px 15%" [ngClass]="{active: isGroupShown(i)}">
<ion-item>
Bill Amount
<div item-right>₹ 150</div>
</ion-item>
...
</ion-list>
<ion-item style="padding: 10px 15% 10px 15%">
<ion-label>Discounts</ion-label>
<ion-checkbox item-right color="secondary" [(ngModel)]="discount" checked="false"></ion-checkbox>
</ion-item>
<ion-grid style="padding: 10px 15% 10px 15%; background-color: #f0e68c" radio-group [(ngModel)]="type">
<ion-row>
<ion-col col-6>
<ion-item>
<ion-label>Percentage</ion-label>
<ion-radio value="percentage" checked item-right></ion-radio>
</ion-item>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label>Amount</ion-label>
<ion-radio value="amount"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<ion-list>
<ion-item>
<ion-label floating>Unit</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Reason</ion-label>
<ion-textarea rows="5"></ion-textarea>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<button ion-button>Apply</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer text-center>
<ion-toolbar position="bottom">
<button ion-button color="cart" round large outline>BILL</button>
</ion-toolbar>
</ion-footer>
Screenshot:

There is a topic for this kind of issue on ionic forum. Did You read it?
There are workarounds like those:
Using a regular <input type="text"> instead of <ion-input type="text">
Using some custom directive to make element "attached" to keyboard: https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754

How to center items inside ion-grid?

I'm trying to center (both horiz and vertical) and stack the 2 social buttons but it's not working. What am I doing wrong?
<ion-content padding>
<ion-grid>
<ion-row justify-content-center align-items-center>
<ion-col>
<button ion-button icon-left outline color="fb" (click)="fbClicked($event)">
<ion-icon name="logo-facebook" color="#3B5998"></ion-icon>
CONNECT WITH FACEBOOK
</button>
</ion-col>
</ion-row>
<ion-row justify-content-center align-items-center>
<ion-col>
<button ion-button icon-left outline>
<ion-icon name="logo-google"></ion-icon>
CONNECT WITH GOOGLE
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>

I am not fully aware of all ionic built in classes but you can use flexbox for this case and android and ios has a good support of it. I changed your code a bit and simplified it.
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) {
});
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Social Buttons</h1>
</ion-header-bar>
<ion-content class="Aligner">
<ion-grid>
<ion-row>
<div class = "col">
<button color="fb" (click)="fbClicked($event)">
<ion-icon name="logo-facebook" color="#3B5998"></ion-icon>
CONNECT WITH FACEBOOK
</button>
</div>
<div class = "col">
<button>
<ion-icon name="logo-google"></ion-icon>
CONNECT WITH GOOGLE
</button>
</div>
</ion-row>
</ion-grid>
</ion-content>
</body>
</html>

Dynamic form field in angularjs

I have form with input field and check box and two buttons , buttons are for add and delete. But i here want to remove add button and want to show next field with just checking the check box.How can i do this?
angular.module('ionicApp',['ionic'])
.controller('myctrl',function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1 && $scope.data.names.length<10){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,index){
if($event.which == 1)
$scope.data.names.splice(index,1);
}
})
.button-dark{
margin-top:10px;
}
.button-delete{
display: inline-block;
float: right;
position: relative;
width: 24px;
height: 33px;
top: -36px;
right: 5px;
color: #fff;
background: red;
border: 0;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Multiple input</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="myctrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic app</h1>
</ion-header-bar>
<ion-content>
<form id="valueForm" ng-submit="saveValues(values)">
<div ng-repeat="name in data.names track by $index">
<label class="item item-input" style="width: 92%">
<input type="text" placeholder="Answer" ng-model="data.names[$index].name">
<ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
</label>
<button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button>
<input type="button" ng-click="addRow($index)" value="Add" ng-show="$last">
</div>
</div>
<button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button>
</div>
</form>
</ion-content>
</body>
</html>

Remove the Add Button and add ng-click="addRow($index)" to checkbox.. check below working snippet
angular.module('ionicApp',['ionic'])
.controller('myctrl',function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1 && $scope.data.names.length<10){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,index){
if($event.which == 1)
$scope.data.names.splice(index,1);
}
})
.button-dark{
margin-top:10px;
}
.button-delete{
display: inline-block;
float: right;
position: relative;
width: 24px;
height: 33px;
top: -36px;
right: 5px;
color: #fff;
background: red;
border: 0;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Multiple input</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="myctrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic app</h1>
</ion-header-bar>
<ion-content>
<form id="valueForm" ng-submit="saveValues(values)">
<div ng-repeat="name in data.names track by $index">
<label class="item item-input" style="width: 92%">
<input type="text" placeholder="Answer" ng-model="data.names[$index].name">
<ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal" ng-click="addRow($index)"></ion-checkbox>
</label>
<button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button>
</div>
</div>
<button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button>
</div>
</form>
</ion-content>
</body>
</html>

Categories