user6689604 user6689604 - 3 months ago 21
Javascript Question

Icon resizing to fit div

I have a div that can contain between 0 to 7 icons, depending on some selection. The icons are ionicons. Currently, my code is:

<div class="item item-text-wrap" style="text-align:center;">
<button class="button" style="background-color: #3b5998" ng-if="website" ng-click="openSocialLink('website')"><i class="icon ion-ios-world-outline" style="color:white"></i></button>
<button class="button" style="background-color: #3b5998" ng-if="social.facebook" ng-click="openSocialLink('fb')"><i class="icon ion-social-facebook" style="color:white"></i></button>
<button class="button" style="background-color: #007bb6" ng-if="social.linkedin" ng-click="openSocialLink('linkedin')"><i class="icon ion-social-linkedin" style="color:white"></i></button>
<button class="button" style="background-color: #00aced" ng-if="social.twitter" ng-click="openSocialLink('twitter')"><i class="icon ion-social-twitter" style="color:white"></i></button>
<button class="button" style="background-color: #bb0000" ng-if="social.youtube" ng-click="openSocialLink('youtube')"><i class="icon ion-social-youtube" style="color:white"></i></button>
<button class="button" style="background-color: #eeee00" ng-if="social.snapchat" ng-click="openSocialLink('snapchat')"><i class="icon ion-social-snapchat" style="color:white"></i></button>
<button class="button" style="background-color: #c42da5" ng-if="social.instagram" ng-click="openSocialLink('instagram')"><i class="icon ion-social-instagram" style="color:white"></i></button>
</div>


Is it possible to make it so that the icons resize to take up one line exactly? The issue right now is that if their screen size is too small then this takes up multiple lines.

EDIT: Also, I've started using the ionic grid system, now the issue is just that on smaller screen sizes theres no spacing between the items, is it possible to break into two lines if the space between them will be too small?

Answer

This problem can easily be solved if you put a table.

This is the code.

<table style="text-align: center; margin: auto;"> <!-- to make the buttons in the center-->
    <tbody>
        <tr>
            <td><button class="button" style="background-color: #3b5998" ng-if="website" ng-click="openSocialLink('website')"><i class="icon ion-ios-world-outline" style="color:white"></i></button></td>
            <td><button class="button" style="background-color: #3b5998" ng-if="social.facebook" ng-click="openSocialLink('fb')"><i class="icon ion-social-facebook" style="color:white"></i></button></td>
            <td><button class="button" style="background-color: #007bb6" ng-if="social.linkedin" ng-click="openSocialLink('linkedin')"><i class="icon ion-social-linkedin" style="color:white"></i></button></td>
            <td><button class="button" style="background-color: #00aced" ng-if="social.twitter" ng-click="openSocialLink('twitter')"><i class="icon ion-social-twitter" style="color:white"></i></button></td>
            <td><button class="button" style="background-color: #bb0000" ng-if="social.youtube" ng-click="openSocialLink('youtube')"><i class="icon ion-social-youtube" style="color:white"></i></button></td>
            <td><button class="button" style="background-color: #eeee00" ng-if="social.snapchat" ng-click="openSocialLink('snapchat')"><i class="icon ion-social-snapchat" style="color:white"></i></button></td>
            <td><button class="button" style="background-color: #c42da5" ng-if="social.instagram" ng-click="openSocialLink('instagram')"><i class="icon ion-social-instagram" style="color:white"></i></button></td>
        </tr>
    </tbody>
</table>
Comments