CSS problem


I,ve a problem with my dynamic slider when i use it in a categories menus. i try a lot to set it but can’t. Please tell me the solution, I’ve posted a problem with snap shoot. when I resize the browser size then it work fine, but when i route to another page again css problem occure the content of slider become mixed, don’t know how to solve it. The snap shoots are given below


nobody can help you only with some pictures.

Please make a codepen for that.



@bengtler thanks sir in advance, I don’t know how to make codepen because I’m new in Ionic, just a beginner. but I’ve try a lot but can’t. Now I just place the code in codepen, but it’s working fine because it is in files, but sir you can check it here I’ll aslo send you a link of codepen, but it’s not working in codepen.

<html ng-app="ionicApp"><head> <!-- HTML File -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menus</title>
<link href="css/ionic.css" rel="stylesheet">
<link href="Stylesheet.css" rel="stylesheet">
<script src="js/ionic.bundle.js"></script>
<script src="index.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script></head><body>
<div ng-controller="MainCtrl">       
<script id="event-menu.html" type="text/ng-template">
   <ion-nav-bar class="bar-positive">
   <ion-nav-back-button class="button-icon ion-arrow-left-c">
   <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
      <ion-nav-view name="menuContent"></ion-nav-view>
    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Categories</h1>
        <ul class="list">
          <a href="#/event/check-in" class="item" menu-close>Vegetables</a>
          <a href="#/event/attendees" class="item" menu-close>Fruits</a>
<script type="text/javascript">
 $data.Entity.extend("product", {
title: { type: "string" },
data: { type: "string"}   }); $data.Entity.extend("category", {
title: { type: "string" },
data: { type: "string"}  });   $data.EntityContext.extend("foodcartContext", {
product: { type: $data.EntitySet, elementType: product },  
category: { type: $data.EntitySet, elementType: category }
});var foodcart = new foodcartContext({ 
provider: 'webSql', databaseName: 'MyDb'}); foodcart.onReady(function() {foodcart.product.toArray(function(data)   {  
     var allProduct = [
        {title : 'apple', data : 'apple'},
        {title : 'apricots', data : 'apricots'},
        {title : 'banana', data : 'banana'},
        {title : 'carrots', data : 'carrots'},
        {title : 'mango', data : 'mango'},
        {title : 'orange', data : 'orange'},
        {title : 'pear', data : 'pear'},
        {title : 'pineapple', data : 'pineapple'},
        {title : 'strawberry', data : 'strawberry'},
        {title : 'watermelon', data : 'watermelon'},                       
       var allProduct2 = [
        {title : 'Aubergine', data : 'Aubergine'},
        {title : 'bitter gourd', data : 'bitter gourd'},
        {title : 'butternut squash', data : 'butternut squash'},
        {title : 'cabbage', data : 'cabbage'},
        {title : 'garlic', data : 'garlic'},
        {title : 'ginger', data : 'ginger'},
        {title : 'lady finger', data : 'lady finger'},
        {title : 'onion', data : 'onion'},
        {title : 'potato', data : 'potato'},
        {title : 'turnip', data : 'turnip'},                       
	  } });	  });</script>
<script id="home.html" type="text/ng-template">
  <ion-view title="Welcome To">
    <ion-content padding="true">
      <p>Swipe to the right to reveal the left menu.</p>
<script id="check-in.html" type="text/ng-template">
  <ion-view title="Vegetables" >
    <ion-content has-header="true">
       <div ng-controller="CheckinCtrl">
        <ion-slide-box show-pager="false">
         <ion-slide ng-repeat="item in data.slides">
              <h1>{{item.title}}</h1> <img ng-src="fruits\{{item.data}}.jpg"></ion-slide>  


// Index.js file  
angular.module('ionicApp', ['ionic']).config(function($stateProvider, $urlRouterProvider) { $stateProvider
.state('eventmenu', {
  url: "/event",
  abstract: true,
  templateUrl: "event-menu.html"
.state('eventmenu.home', {
  url: "/home",
  views: {
    'menuContent' :{
      templateUrl: "home.html"
.state('eventmenu.checkin', {
  url: "/check-in",
  views: {
    'menuContent' :{
      templateUrl: "check-in.html",
      controller: "CheckinCtrl"
.state('eventmenu.attendees', {
  url: "/attendees",
  views: {
    'menuContent' :{
      templateUrl: "attendees.html",
      controller: "AttendeesCtrl" }}})  $urlRouterProvider.otherwise("/event/home");}).controller('MainCtrl', function($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft(); };}).controller('CheckinCtrl', function($scope,$ionicSlideBoxDelegate) { $scope.data = {}; $scope.data.slides =  [
]; foodcart.onReady(function() {  foodcart.category.forEach(function(category)
    $scope.data.slides.push( {
    title : category.title,
    data : category.data

  $ionicSlideBoxDelegate.update(); }); 
}  ); }).controller('AttendeesCtrl', function($scope,$ionicSlideBoxDelegate) {  $scope.data = {}; $scope.data.slides1 =  [
];foodcart.onReady(function() {  foodcart.product.forEach(function(product)
    $scope.data.slides1.push( {
    title : product.title,
    data : product.data

}  );     }  );});

body {  cursor: url('http://ionicframework.com/img/finger.png'), auto;};.slider {
  height: 500px;
.slider-slide {
  padding-top: 80px;
  background-color: #fff;
  text-align: center;

.slider-pager-page i{  }


Hey i built a codepen for you:

There i fixed already some unclosing html-tags and wrong css syntax


Thanks for code pen bengtler.
but problem still exist.when i move from one category to other category.
please recheck it.


i do not fixed the issue… i only built the codepen for you and for other helpers :wink: