CSS button not working

Dashboard
1

I am playing a lot with CSS buttons.

For the most they are working.

But this one isn't playing the game.

Given all the other buttons are working and when I set the icon name it doesn't show.

Code:

<div id="GButtonM_ANA">
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            <span>analytics</span>
            <md-tooltip>Device status</md-tooltip>
        </i>
    </md-button>
</div>

<script>

(function($scope) {

$('#GButtonM_ANA').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": "Big device status"});
});
    
})(scope);
</script>

The other weird thing is the popup appears on the button beside it.

Screenshot from 2020-06-08 08-53-44

Oops

Ok, my bad on the pop up.
It is just how it is popping up.
Other buttons the pop up is on the button. For reasons unknown: this is beside the button.

2

^ that's a tooltip & it's right there in the code you posted...

3

(See my oops part)

1 Like
4

Show us the code of a working icon in a button Vs this code.

Its likely quite obvious if you look at 2 side by side.

5

Working:

<div id="GButtonM_TEL">
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            <span> track_changes</span>
            <md-tooltip>Telemetry</md-tooltip>
        </i>
    </md-button>
</div>

<script>

(function($scope) {

$('#GButtonM_TEL').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": "TelePi Telemetry"});
});
    
})(scope);
</script>

Not working:

<div id="GButtonM_ANA">
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            <span>analytics</span>
            <md-tooltip>Device status</md-tooltip>
        </i>
    </md-button>
</div>

<script>

(function($scope) {

$('#GButtonM_ANA').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": "Big device status"});
});
    
})(scope);
</script>

The only difference is the icon.

If I copy the track_changes icon to the button, it works.
So.....

I suspect that all the md-icons are not loaded.

How do I do that?

6

Oh, back to the popup thing.

This is a comparison of the popups that threw me.

Expected:

Screenshot from 2020-06-08 09-11-42

The button in question:
Screenshot from 2020-06-08 09-11-45

That seems strange that in one button the popup is over the button, and on the other it is in another post code to the button.

7

I don't think you use material icons like that. Its something like <md-icon> and you don't use class try searching the forum or internet on using material icons in angular

Edit...
Maybe not md-icon but pretty sure you put the icon name inside the tag (not in the class)

8

There you go...

Copy the code this ^ guy did here ^ into your button

Edit...
Forgot to say, it's probably not gonna work with extra stuff inside the <i>

Try this...

    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            analytics
        </i>
        <md-tooltip>Device status</md-tooltip>
    </md-button>
9

Thanks.

You are correct that it doesn't work. But I don't think it is for the reason you say.

There are a lot of other buttons which have that attribute and they work.

I'll have to keep digging to see what I find.

10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.