Ionic 4 - How to change div or paragraph css like height and margin

Ionic Framework ionic-v3
1

I am fetching data from REST api and data contains Divs and Paragraphs.

I want to change the height, margin, font color etc of div and p globally or I mean for entire app.

My first question is how to change this globally and per page ?

I tried with inspect element but nothing is working.

My second question is where is the all variables scss file in ionic ? How can I find the list of all the css variables of Ionic 4 ? Where is the main css or scss file which contains everything ?

Please answer my both questions.

Thanks :slight_smile:

2

You can control style like this.

yourView.html

<div class="inner-html" [innerHTML]="theHtmlString"></div>

global.scss

.inner-html{
  p{
    color: #F00;
  }
  div{
    color: #0F0;
  }
}
3

css variable is component base, you can see it on each component page.

4

The problem is div is in rest api so I cant make div class manually because it is gathering by api.
I am calling content in ioc-card-content.

How do I do it ?

5

Hi
while some may frown upon using API data as innerHTML code, I can imagine you could use regex string replace to add class to the code? Then again, the Angular template parser will sanitise some HTML code and throw a fit if you use tags it does not want (like SCRIPT and maybe CLASS).

If you want to go the regex stringreplace route, you can try with a simple string containing a DIV with class into an element and see if it renders ok.

Other option could be to retrieve the hosting element in which you inject the innerHTML and use ViewChild to get the nativeelement and style using javascript (the Angular way of doing documentQuerySelector)

Regards
TOm

1 Like
6

/me raises hand and frowns grumpily upon innerHTML in general

HTML looks much easier to process than it actually is. JSON, on the other hand, while tedious to write by hand, is both far easier to process and presents a much smaller surface of attack for security concerns.

I would strongly suggest redesigning the API so that no HTML is passed between server and client, preferring instead a DSL built upon JSON. This will design away your problem (and a plethora of other ones that you haven’t hit yet, but will), because rendering and styling control will be back with the app where it belongs.

7

You include style into the HTML-string that is in the rest api / backend. No need to do it the frontend / innerHTML

eg. if the backend / db HTML -string is:
<div>Some text that comes from outside</div>

You just include style inside that string:
<div style="color: 'red'; ">Some text that comes from outside</div>

Or if you don’t have access to the HTML string then you just have to do by hand and change the string with other options like substr or something

8

I have css styling in rest api data … means in my wordpress post. But css styling is not working even if im using inline styling in div in wordpress post. It only showing plain html inside div.