All Questions
385
questions
0
votes
1
answer
1k
views
How to prevent ion-router-outlet override ion-grid and expand to whole page
This is an UI question on angular-ionic project. There are 1 component login.
Inside app.component.html, there are an ion-content container containing ion-grid element. Inside it there are 2 row. ...
1
vote
1
answer
551
views
How to scale a svg component to fit different screen size?
I add below svg component into my html file. It's size fit my tablet well, however it is too large for my smartphone. How can we automatically scale the svg's size to fit different screen?
<svg ...
3
votes
1
answer
718
views
How to make all columns in one row in ion-grid
In my ionic 3 project, I want to display a grid with many rows and columns. As the number of columns is large, the columns are separated into several parts and displayed in several rows.
How can ...
0
votes
3
answers
1k
views
How can I dynamically resize a leaflet map after clicking a button?
I have a leaflet map contained in <div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div>
This page is divided into <ion-header&...
0
votes
1
answer
152
views
How to make the build process not compile all .scss files into a main.css
All my various components have some .scss files which get eventually merged into a single main.css This make it hard to debug as the Chrome Developer Console has no back-references to the source scss ...
0
votes
0
answers
92
views
SCSS variables to CSS in Ionic 3-4 transition — How?
I'm upgrading an Ionic 3 project to Ionic 4 (then later to 5 and 6, but 4 first).
One of the things that I need to do for this is to convert all the SCSS variable-setting to CSS variables. What's the ...
1
vote
2
answers
9k
views
How to convert rows to columns using CSS?
I'm developing a Web Application in Ionic3 framework. In my table Each item is available in different sizes.
On mobile devices, the screen is too narrow to properly display up to 4 different sizes ...
0
votes
1
answer
233
views
How to dynamically assign value to css class variable in ionic 3 component created with *ngFor
My scss code:
:root {
--star-size: 20px;
--star-color: gray;
--star-background: #fc0;
}
.stars {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-...
0
votes
1
answer
713
views
How to change primary color in Ionic 5 programmatically?
Currently my app-component routes to a split-layout which routes to the other pages. In the settings page my workaround is to change the accent color like this:
changeAccentColor() {
console.log('...
0
votes
0
answers
25
views
In Ionic 3 : not able to use font from cahe folder
Want to use fonts from application's cache folder.
planned steps:
Download font file from my server to application cache folder.
Sample code
let fileTransfer = this.transfer.create();
...
3
votes
0
answers
364
views
How to change background color on ion-toggle Angular-ionic3
i want to change background color when i select toggle, right now the bacground color is white, and i want to change it to grey.
here is my ion-toggle right now
and this is what i want
this is my ....
0
votes
0
answers
482
views
How to set focus to an ion-grid or ion-list in a tabbed ionic application?
How do you set focus to an ion-list in the second tab such that the up/down arrow keys works right after selecting the second tab?
The current behavior is that I have to always click first on the list ...
0
votes
1
answer
271
views
Icon resize and align left
In a page I have to show a list of items with icons. These icons vary in size as you can see in the picture (first one is larger for example. To have the same icon size everywhere in css I put the ...
1
vote
1
answer
1k
views
Ionic: Remove line under a field
Ionic is making line below after each field I am creating. how can I remove this line? What this line thing “officially” called? Is it removable by CSS?
My code:
<ion-grid style="height: 100%;&...
0
votes
1
answer
522
views
How to add circle with number on ion card header
I was trying to make some card with numbering(circle with number inside), but something seems wrong.
I can't make it circle and center
Here's what I want but when I try to make it, it become like this
...