Remove the margin of an element using angular

Ionic Framework ionic-v3
1

I want to remove the margin from an element.this margin is generated by ionic this is the element where I want to remove the margin from :

the current page is page-table-view it’s the subpage of page-board

image
screenShot4.png1439×867 130 KB

I tried to remove the margin with this code :

if (document.querySelector('.scroll-content')) {
      this.scrollContentElements = document.querySelectorAll('.scroll-content');

    }

   if (this.scrollContentElements) {

     this.scrollContentElements[1].style.marginTop = '0';
      this.scrollContentElements[1].style.marginBottom = '0';
    }

when I do console.log(this.scrollContentElements) I find this

outerHTML:"<div class="scroll-content" style="margin-top: 0px; margin-bottom: 0px;">↵↵</div>"

but no changement in the view

how can I solve this issue ?

NOTE :

changing the css like this

.scroll-content {

           margin-top:0px !important; 

    }

change this view but also change all the views

2

Why not just show it as it’s own page rather than as a child tab page and then you can forego all this hacky manipulation stuff?

3

how can I do this please ?

4

Normally, a no-margin attribute should do this. It’d be better if you can post the relevant piece of markup here so that others can properly understand your problem.

5

@KishuPro

this is almost the relevant piece of markup

image
markup.png1635×729 82 KB

7

I am afraid it is not, this is just the processed and rendered markup in your browser. Can you please show us the actual markup you have typed in your editor? For example, the whole of the affected page html or the relevant portion of it?

8

Thank you guys my problem was placing too tabs bars I decided to change one of them with a segments it’s ok now

9

Yeah we had an inkling that your page structure wasn’t valid, that’s why was asking for the actual markup. It’s good that you were able to correct it yourself :+1:

1 Like