All geek questions in one place

Ion counter in the vertical alignment of buttons

I tried to implement a spinner inside a button, but for some reason the spinner seems to be aligned in height rather than vertically:
enter image description here

My code is as follows:

<button type="submit" class="button button-block button-positive">
<ion-spinner class="spinner-energized"></ion-spinner> Click me!
</button>

Codepen: http://codepen.io/anon/pen/BjOqvK?editors=1010

Any idea why?

+4
source share
3 answers

The Ionic team proposed the following solution:

.spinner svg {
  width: 16px !important;
  height: 16px !important;
}

New code

They gave me a little more context:

It was not intended for an ion counter, so custom css is needed. You need to adjust the width / height.

+5
source

You can also solve this problem with flexbox as follows:

<button class="button button-light">
    <div class="center-vertical-horizontal">
      Button text
      <ion-spinner class="button-spinner"></ion-spinner>
    </div>
</button>

And the following css:

.center-vertical-horizontal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-spinner {
  display: flex;
}

Codepen : http://codepen.io/anon/pen/LRVgGK

+1

. .

 <html ng-app="ionicApp">
  <head>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <style>
       .spinner svg {
   padding-top: 2px;
  width: 38px;
 height: 38px;
 stroke: #fff;
  fill: #999;
 }
.button-text {
 vertical-align:text-bottom;
}
 </style>
  <body ng-controller="MainCtrl">
   <ion-nav-view></ion-nav-view>

<script id="templates/event-menu.html" type="text/ng-template">
  <ion-side-menus enable-menu-with-back-views="false">

    <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>

      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content> 


</script>

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Welcome">
    <ion-content class="padding">

      <button type="submit" class="button button-block button-positive">   <ion-spinner class="spinner-energized"></ion-spinner><span class="button-text">Click me!</span></button>
    </ion-content>
  </ion-view>
 </script>

0

Source: https://habr.com/ru/post/1627331/

More articles:


All Articles