[Solved] Ionic Padding Problem in Ionic Slider


#1

Hi sorry for beginner question, I am new in programming and ionic. I have problem with padding.
I want have some slider image like this:

But with my code this is i got:

I want the text and image in red box get up like in first image. I have trying using padding-top and using css in ionic but doesn’t work

Here is my code:

  <ion-view view-title="Example">
  <ion-content class="padding">
   <ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false" auto-play="true" does-continue="true">
          <ion-slide>
              <h3>Favourite</h3>
			   <div class="row">
					<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
					<span class="row">
						<img src="img/pizza1.jpg" class="col col-50" style="width:100px; height:100px;">
						<div class="col col-50" style="; padding-top:-10px">
							<h4 class="row">Image One </h4>
							<div class="row">
								<img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
								<h4 class="col col-60" style="padding-top:-10px"> 5.0</h4>
							</div>
						</div>
					</span>
					<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
				</div>
          </ion-slide>
          <ion-slide>
		   <h3>Favourite</h3>
			   <div class="row">
					<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
					<span class="row">
						<img src="img/pizza2.jpg" class="col col-50" style="width:100px; height:100px;">
						<div class="col col-50" style="; padding-top:-10px">
							<h4 class="row">Image Two </h4>
							<div class="row">
								<img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
								<h4 class="col col-60"> 5.0</h4>
							</div>
						</div>
					</span>
					<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
				</div>
          </ion-slide>
          <ion-slide>
		  <h3>Favourite</h3>
			   <div class="row">
					<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
					<span class="row">
						<img src="img/pizza3.jpg" class="col col-50" style="width:100px; height:100px;">
						<div class="col col-50" style="; padding-top:-10px">
							<h4 class="row">Image Three </h4>
							<div class="row">
								<img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
								<h4 class="col col-60"> 5.0</h4>
							</div>
						</div>
					</span>
					<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
				</div>
			</ion-slide>
        </ion-slide-box>
 </ion-content>
</ion-view>

Also i have try using this but doesn’t work

<div class="row row-up">

 .row-up{
  padding:-10px; }
 } 

Thanks…


#2

I have solved this, sorry only beginner problem you can’t do minus in padding, must using margin-top instead padding-top.