CSS problem


#1

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


#2

nobody can help you only with some pictures.

Please make a codepen for that.

Greets


#3

@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">       
  <ion-nav-view></ion-nav-view>
</div>
<script id="event-menu.html" type="text/ng-template">
  <ion-side-menus>
  <ion-side-menu-content>
   <ion-nav-bar class="bar-positive">
   <ion-nav-back-button class="button-icon ion-arrow-left-c">
   </ion-nav-back-button>
   </ion-nav-bar>
   <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
      </ion-nav-buttons>
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>        
    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Categories</h1>
      </ion-header-bar>
      <ion-content>
        <ul class="list">
          <a href="#/event/check-in" class="item" menu-close>Vegetables</a>
          <a href="#/event/attendees" class="item" menu-close>Fruits</a>
        </ul>
      </ion-content>
    </ion-side-menu>        
  </ion-side-menus>
</script>
<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)   {  
   if(!data.length)
     {	
     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'},                       
      ];           
       foodcart.product.addMany(allProduct);
        foodcart.category.addMany(allProduct2);         
      foodcart.saveChanges();  
	  } });	  });</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>
     </ion-content>
</script> 
<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
  });

  $ionicSlideBoxDelegate.update();
}  );     }  );});

//Stylesheet.css
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{  }

#4

Hey i built a codepen for you:

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


#5

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


#6

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