Ionic 3 !! one slide + two buttons down side by side

Question

Ionic 3 !! one slide + two buttons down side by side

Navigation

#1 by (0 votes)

-1

I want to create a slide with two buttons below. But I did get the two buttons on the bottom side side, but the slide does not work when I try to move to slide 2, 3.

<ion-slides id="slide">

  <ion-slide style="background-color: white">
    <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: white">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: white">
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>

<ion-content >

  <button id="Entrar">Entrar</button>
  <button id="registrar">Registar</button>


</ion-content>

css code

#Entrar {
  list-style-type: none;
  margin-top: 620px;
  height: 50px;
  width: 188px;
  float: right;
  font-size: 25px;
  background-color: rgb(0, 89, 255);


}
#registrar{
  list-style-type: none;
  margin-top: 620px;
  display: inline-block;
  height: 50px;
  width: 187px;
  background-color: rgb(0, 89, 255);
  font-size: 25px;




}

html css ionic ionic3

asked by anonymous 03.10.2018 / 01:03

1 answer

Error getting time with row.getCell () Creating and Consuming a REST API

score 0 · Answer 1

Good afternoon. So I understand you want to have a slide and under that slide you want to add 2 buttons.

I made using the components that come along with ionic 3, in case you have already used bootstrap 3 it is easier to understand.

I deleted the classes I had and just created a% class of% to determine a height for the slide, you can change or remove it if you want, it depends on its use. Already in HTML I simply added some classes that are native to Ionic to make the development more agile.

I created the .estilo-slide before the buttons to be able to put the native class div that centralizes the elements inside the div, in this case its buttons.

On the buttons I used text-xs-center which means respectively, padding-top of 20px / 4, class="pt-xs--4" ion-button color="primary" ionic button call and finally button color.

Everything I said here has the Ionic 3 documentation .

The final code looks like this:

HTML:

<ion-content>
    <ion-slides class="estilo-slide">

      <ion-slide style="background-color: white">
        <h2>Slide 1</h2>
      </ion-slide>

      <ion-slide style="background-color: white">
        <h2>Slide 2</h2>
      </ion-slide>

      <ion-slide style="background-color: white">
        <h2>Slide 3</h2>
      </ion-slide>

    </ion-slides>

    <div class="text-xs-center">
      <button class="pt-xs--4" ion-button color="primary">Entrar</button>
      <button class="pt-xs--4" ion-button color="secondary">Registar</button>
    </div>

</ion-content>

CSS:

.estilo-slide{
    height: 50%;
}