How to style UI template elements (buttons, text inputs)

Dashboard
2

Hi @hazymat, Here's an example ui-template that I figured out to fix the button issue. As an example I'm using a button to start fullscreen on the browser.

<style>
    #go-fullscreen-btn {
        height: 100%;
        border-style: unset;
    }
    .btn-parent {
        padding: 0 !important;
    }
</style>
<md-button id="go-fullscreen-btn" ng-click="send({payload:action('go fullscreen')})" type="button">Go Fullscreen
</md-button>
<script>
    fsElem = document.documentElement;
    theParentElem = document.getElementById("go-fullscreen-btn").parentNode
    theParentElem.classList.add('btn-parent')
    
    this.scope.action = function(params) {
    console.log("params received is: ",params)
    if (fsElem.requestFullscreen) {
        fsElem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* Firefox */
        fsElem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        fsElem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE/Edge */
        fsElem.msRequestFullscreen();
        }
    // In fullscreen. Now hide the button.
    document.getElementById("go-fullscreen-btn").classList.add('ng-hide');
    return {payload:"Fullscreen is active."}
    }
</script>
1 Like