CSS breaks with new custom component. What is best practice?

Ionic Framework ionic-v3
1

Hi

I have a general question.
If a custom component breaks the default-ionic-css, what are you doing?
Or maybe should we avoid this?

Scenario:

<ion-footer no-border>
  <ion-toolbar>
    <ion-buttons end>
        <button ion-button icon-only>
            <ion-icon name="alarm"></ion-icon>
        </button>
        <my-basket-button-component>
              <button ion-button icon-only>
                  <ion-icon name="basket"></ion-icon>
              </button>
        </my-basket-button-component>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

In the scenario above, you see for example the my-basket-button-component.
The button looks not same like the other button within the same ion-buttons container.
Because the additional tag…

<my-basket-button-component>

…breaks the default-ionic-css.

What are you doing in such a case?
Avoid this?
Or creating an attribute-directive instead of an custom-component (but how do I have access than to
the child-elements).

Tips are very welcome. thx!

Cheers,
Oliver

2

What do you mean by breaks?

3

the button within the my-basket-button-component looks not the same like
the button (with alarm-icon) within the same ion-buttons container.

It seems there is an ionic-default-css defined in like:

ion-buttons{
     button {
        ...
    }
}

but this css to the button within an ion-buttons container, will not take affect, when there is
an my-basket-button-component between.
Im mean there is not something like this:

ion-buttons{
     button, my-basket-button-component {
        ...
    }
}

Sorry, I’m not so an expert with css stuff :wink:
P.S I will try to deliver a screenshot.

4

iosAndAndroid
iosAndAndroid.png1550×184 7.38 KB

This example is my case shows following:

  • on the left side is the ios-view on the right side is android

  • the left button is the ‘normal’ button and the right button is the same button, but within the custom-component. So that means, the my-basket-button-component tag is nesting this button.

the html of the picture-examples looks like:

    <ion-buttons end>
        <button ion-button icon-only>
            <ion-icon name="basket"></ion-icon>
        </button>
        <my-basket-button-component>
              <button ion-button icon-only>
                  <ion-icon name="basket"></ion-icon>
              </button>
        </my-basket-button-component>
    </ion-buttons>
6

An easy solution for you:

use CSS style directly on HTML file. That will override any existing CSS classes from Ionic…

For instance:

<button style="width: 100px; background: black; padding: 20px; font-size: 15px;">Button</button>

Normally, it’s best to style on SCSS file but if you’re getting a problem, this should work without.

7

Hi @jamesharvey
thx for your reply.
yes, this would be an option. Until now I tried always to avoid creating inline-styles.
But indeed it could be for this case an acceptable way…

8

No prob. If things don’t work, simply add !importnat to your style.

9

@Catweazle101 I kind of have the feeling that maybe some of your local scss own classes might break what you try to achieve…

I have created a blank project and added your code and both buttons look the same (iOS und Android)

You could check out the project to have a look if you want

git clone https://github.com/peterpeterparker/my-basket-button

Let me know if I missed something. If nope, maybe try to inspect your own css classes and disable them, maybe some have a side effect?

I hope this help!

P.S.:

Wir treffen uns am 25 Januar bei der Ionic Zürich meetup hoffe ich :wink:

Gruss und ein gutes Neues Jahr
David

10

Hi @reedrichards aka David

Thanks for providing me that example on GitHub.
I cloned it and run it on my machine.
I saw that you missed in your example the essential part, that it should look like a toolbar.

that means your code is different at following:

<ion-footer>
  <ion-toolbar>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="basket"></ion-icon>
      </button>
      <my-basket-button></my-basket-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

You’ve forgot the ion-toolbar tag container.
If you add this ion-toolbar, your example looks like following screenshot:

04
Screen Shot 2018-01-01 at 21.03.04.png806×156 2.61 KB

P.S
At the moment I only added functionality to my project.
I didn’t add any custom css. (this comes later…yippieh!;-))

@David Zürich meetup
Hey yeah! Freu mich drauf, ich habe mich bereits angemeldet und hoffe dass ich kommen kann. Laut Map, wohne ich ja nur ca 10min zu Fuss entfernt.
Ok, bei mir geht es zur Zeit ein wenig länger als 10min. Grrrr…
Hatte vor 4 Wochen eine OP am Sprunggelenk und lauf darum zur Zeit mit Krücken rum.
Du kannst mich also gut an den Krücken erkennen. Werden wohl nicht viel mit Krücken am Meetup rumlaufen :slight_smile:

Wünsch Dir auch noch ein gutes Neues Jahr.

Man sieht sich hoffentlich.

Oliver

11

Here my current work-arround:

I moved also the <ion-buttons> container into my <my-basket-button-component>.
With this my button looks as expected like a toolbar-button.
Because I assume, that the surrounding <ion-toolbar> can contain multiple <ion-buttons> tags.

P.S
I flag it for me as an solution, but I’ll keep watching :wink:

12

@Catweazle101 thx for pointing the missing ion-toolbar. So I went thru the Ionic list of issues and it looks like it’s a known issue, there is an issue regarding ion-header and ion-navbar, I guess it might be the same. If I’m not wrong, this may will be fixed in v4 according @kensodemann

I have commented this issue with this discussion and also updated to dummy repo to display the problem.

See https://github.com/ionic-team/ionic/issues/13637

P.S.: Cool fürs Meetup und eine gute schnelle Verbesserung!

1 Like