Is it possible to use multiple <ons-speed-dial> in a same page?

Question

I defined twice ons-speed-dial in a same page.

Like this.

<!-- Define first speed dial -->
<ons-speed-dial id="first-dial" direction="down">
    <ons-fab>
        <ons-icon icon="ion-android-more-vertical"></ons-icon>
    </ons-fab>
    <ons-speed-dial-item>
        <ons-icon icon="ion-android-create"></ons-icon>
    </ons-speed-dial-item>
</ons-speed-dial>

<!-- Define second speed dial -->
<ons-speed-dial id="second-dial" direction="down">
    <ons-fab>
        <ons-icon icon="ion-ios-eye-outline"></ons-icon>
    </ons-fab>
    <ons-speed-dial-item>
        <ons-icon icon="ion-android-done"></ons-icon>
    </ons-speed-dial-item>
</ons-speed-dial>

When I click the second-dial, the ons-speed-dial-item is shown under the first-dial.

Is it possible to show the ons-speed-dial-item under the second-dial in any way?

Answer 1

Yes, it is. You have to add a "position" attribute to both <ons-speed-dial> tags, for example position="top left", and then add a "marigin" to one of them.

Thus your code should look something like this:

<!-- Define first speed dial -->
<ons-speed-dial id="first-dial" direction="down" position="top left" >
    <ons-fab>
        <ons-icon icon="ion-android-more-vertical"></ons-icon>
    </ons-fab>
    <ons-speed-dial-item>
        <ons-icon icon="ion-android-create"></ons-icon>
    </ons-speed-dial-item>
</ons-speed-dial>

<!-- Define second speed dial -->
<ons-speed-dial id="second-dial" direction="down" position="top left" style="margin-left: 70px;">
    <ons-fab>
        <ons-icon icon="ion-ios-eye-outline"></ons-icon>
    </ons-fab>
    <ons-speed-dial-item>
        <ons-icon icon="ion-android-done"></ons-icon>
    </ons-speed-dial-item>
</ons-speed-dial>