Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • Hello,

    I know this is very elementary, but I cannot figure it out. I have searched and tried couple of different CSS and HTML following some tutorial and it results in a list with offset bullets.

    I am wanting a button that drops down list of buttons. For example, a button that says "Flouride" and when clicked on, drops "West Plant Flouride" and "East Plant Flouride"

    Some help would be greatly appreciated.

    Thanks in advance.


  • Hi @sbaik !

    If you use dashboards then easiest would be something like that

        <div ng-init="flouride = false"  ng-show="flouride === false">
        <md-button ng-click="flouride = true">
        Flouride
        </md-button>
        </div>
        
        <div ng-show="flouride === true">
        <md-button>
        West Plant Flouride
        </md-button>
        <md-button>
        East Plant Flouride
        </md-button>
        </div>
    

    First div is only shown when the first md-button is clicked and after that the two buttons are shown. Variable flouride is in angular $scope and only valid until user goes away from the page.

    ref https://docs.angularjs.org/api/ng/directive/ngShow

    Thomas


  • @thomaseinasto said in Drop Down Navigation:

    ng-click="flouride = true"

    I was able to piece some stuff together using what you provided and achieve what I wanted.

    Thank you for the quick help!


  • Actually, another question regarding this after implementing it. Here is what I ended up with. I took away the part where it makes the original button disappear and made it a mouse over instead of click. The thing is that the 2 new populated buttons stay unless the page refreshes, or if I use them to navigate. Could I make it time out say after 5 seconds or so? Am I overthinking this? I used a ng-mouseleave and it just flips out and blinks.

    Thanks,

        <div ng-init="flouride = false">
    <ma-button ng-click="flouride = true" raised="true" style="position: absolute; left: 1484px; top: 6px;" palette="primary" label="Flouride"></ma-button>
        </div>
        <div ng-show="flouride === true">
    <ma-button style="position: absolute; left: 1476px; top: 6px; background-color: rgb(0, 128, 255, 0.9);" ui-sref="flourideWest" label="West Flouride"></ma-button>
    <ma-button style="position: absolute; left: 1477px; top: 56px; background-color: rgb(0, 128, 255, 0.9);" ui-sref="flourideEast" label="East  Flouride"></ma-button>
        </div>
    

  • @sbaik said in Drop Down Navigation:

    SS and HTML following some tutorial and it results in a list with offset bullets.

    If you're going to go down that route, ensure your css has:

    <style>
    li
    {
    list-style:none;
    }
    </style>
    

    The beauty of having ng-click events mapped to menu over items is because then you can make your screen compatible with touch devices. ie open menu, close menu.

    This is a bit of a hack but keep things simple and utilise the tools already provided:

     <!-- Trigger element is a md-button  -->
     <md-menu>
     <ma-button ng-click="$mdMenu.open($event)" class="md-icon-button"label="FLUORIDE" aria-label=FLUORIDE">
     </ma-button>
     <md-menu-content md-menu-align-target="bottom">
       <md-menu-item>
       <ma-button style="background-color: rgb(0, 128, 255, 0.9);" ui-sref="flourideWest" label="West Fluoride"></ma-button></md-menu-item>
    <md-menu-item><ma-button style="background-color: rgb(0, 128, 255, 0.9);" ui-sref="flourideEast" label="East Fluoride"></ma-button></md-menu-item>
     </md-menu-content>
    </md-menu>
    </div>
    <style>
        .md-open-menu-container.md-active{
      margin-top: 45px !important;
    }
    </style>
    

    it's a click to open, simple click off or on the menu button itself to close it.


  • @mattfox Thank you for taking your time for that!


  • Anytime, always here to assist.