Home Need button layout to remain same across every system
Reply: 0

Need button layout to remain same across every system

Kuday
1#
Kuday Published in 2017-09-14 09:29:46Z

I have 3 buttons, 2 out of which, spring out of the 1st one. They spring out upwards and to the right respectively. And I've aligned these buttons and they work just fine on my system but when I view it on other systems, the buttons just seem to be aligned differently. What can I do to make sure that my buttons are aligned on other systems the same way they are aligned in mine? These are the classes I use for each of the buttons along with the html code:

.floating-btn-div{
  position: fixed;
  bottom: 435px;
  left: 0px;
  height: 100px;
  width: 100px;
}

.pb-import-btn {
  position:absolute;
  left:90px !important;
  top:440px !important;
  width:50px !important;
  height:50px !important;
}

.pb-import-btn-back {
  position:absolute;
  left:25px !important;
  top:440px !important;
  width:50px !important;
  height:50px !important;
 }

.pb-second-btn {
  position:absolute;
  left:25px !important;
  top:375px !important;
  width:50px !important;
  height:50px !important;
 }

.pb-second-btn-back {
  position:absolute;
  left:25px !important;
  top:440px !important;
  width:50px !important;
  height:50px !important;
 }

 <a href="javascript:;" ng-click="toggleButtons()"  class="floating-btn floating-option-left pull-right btn btn-primary btn-icon" ng-if="canCreateCard">+</a>
    <div class="floating-btn-div">
      <button type="button" class="btn btn-success btn-sm btn-icon pull-right pb-second-btn"
            tooltip="Import Excel"
            tooltip-placement="top"
            tooltip-popup-delay="500"
            ng-click="openImportExcelModal()"
            ng-class=" togg ? 'slideUp pb-second-btn':'slideDown pb-second-btn-back'">
            <i class="fa fa-file-excel-o f-20"></i>
      </button>
      <button type="button" class="btn btn-primary btn-sm btn-icon pull-right"
            tooltip="Single Prefab"
            tooltip-placement="right"
            tooltip-popup-delay="500"
            ng-click="chooseType(currentProject._id)"
            ng-class="togg ? 'slideRight pb-import-btn':'slideLeft pb-import-btn-back'">
            <span class="f-20 fa fa-book"></span>
      </button>
    </div>

And these are the animation classes:

.slideLeft{
   animation-name: slideLeft;
   -webkit-animation-name: slideLeft;

   animation-duration: 0.7s;
   -webkit-animation-duration: 0.7s;

   animation-timing-function: ease;
   -webkit-animation-timing-function: ease;

   visibility: visible !important;
 }

@keyframes slideLeft {
    0% {
        transform: translateX(100%);
    }
    50%{
       transform: translateX(-8%);
    }
    65%{
       transform: translateX(4%);
    }
    80%{
       transform: translateX(-4%);
    }
    95%{
       transform: translateX(-2%);
    }
    100% {
       transform: translateX(0%);
    }
}

Similar classes to this for .slideUp, .slideDown and .slideLeft. The main button is placed at the bottom left corner of the screen and the other two buttons come out on the left and right axes.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.323661 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO