Ionic responsive grid doesn't work

2019-06-10 18:52发布

站内问答 / 后端开发
1488 1 6

I created a responsive grid in Ionic which doesn't work properly. The Grid is not responsive. So it isn't automatically adjusted on different screen size and set no linebreak if I add many Buttons or delete these to the/from the system. Either they merge into each other or all the buttons are in a column below the each other on small screens. How can i solve this?

I add or delete all the buttons in a JSON-File. From there I parse the Buttons in to the system.

JSON: 7 Buttons

[
  {
    "_comment": "Games",
    "type": "button",
    "id": "entertainmentButton",
    "icon": "ion-film-marker",
    "name": "Game and entertainment",
    "topage": "servicePage.html",
    "color": "white",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "backgroundcolor": "#0066FF",
    "font-size": "26px"
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  }
]

JavaScript:

var myApp = angular.module('starter', []);
myApp.config(['$sceDelegateProvider', function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        ''
    ]);
}]);

myApp.controller('generateHTMLCtrl', function ($scope, $http, $compile, $interpolate, $templateCache) {    
    $http.get('myjsonfile.json').success(function (data) {      
        for(var i in data){            
            var interpolated = $interpolate($templateCache.get("tpl").trim())(data[i]);            
            angular.element(document.querySelector("#loadhere")).append($compile(interpolated)($scope));            
        }               
    });
});

myApp.controller("OpenLinkCtrl", function ($scope) {    
        $scope.OpenLink = function () {
           alert("Link open");
        }    
});

HTML:

    <body ng-app="starter" class="padding" style="text-align: center">
   <div class="row responsive-md" ng-controller="generateHTMLCtrl" id="loadhere"></div>
   <script type="text/ng-template" id="tpl">
      <div class="col">
         <a style="color:{{color}}; background-color:{{backgroundcolor}} " id="{{id}}" class="{{type}}" href="{{topage}}" ng-controller="{{controller}}" ng-click="{{function}}"> <i class="{{icon}}"><br></i>{{name}}</a>
      </div>
   </script>
</body>

What do I need to modify in HTMl-code that the Grid is responsive?

Edit:

It should look like here, e.g:

<div class="row responsive-sm">
            <div class="col">
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
            </div>
        </div>

This code displays the buttons as follows:

on large screen size:

enter image description here

bit smaller:

enter image description here

very small:

enter image description here

Edited:

The solution:

<div ng-controller="generateHTMLCtrl" id="loadhere">
            <script type="text/ng-template" id="tpl">
                <a style="color:{{color}}; background-color:{{backgroundcolor}};"
                   id="{{id}}" class="{{type}}" href="{{topage}}"
                   ng-controller="{{controller}}" ng-click="{{function}}">
                    <i class="{{icon}}"><br></i>{{name}}
                </a>
            </script>
        </div>

1条回答
爷、活的狠高调
2楼-- · 2019-06-10 19:09

what you want is something more like this:

<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
            <img ng-src="{{images[$index].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length">
            <img ng-src="{{images[$index + 1].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length">
            <img ng-src="{{images[$index + 2].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length">
            <img ng-src="{{images[$index + 3].src}}" width="100%" />
        </div>
    </div>

This will create a maximum of 4 images per row that wrap and stack. You can also make it more or less images per by changing ng-if statement in for rows and then the amount of images in that row

When you are on every forth image, you are going to show the row class, thus creating a new row you will pre-allocate four columns for you row, but you would first check to see if it will ever be filled to prevent an undefined exception If the image exists at the specified index, then add it to the column

Edit! Try this add this css class: 

.gallery {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

then put this in your html:

<ion-content ng-controller="ExampleController" ng-init="loadImages()" class="gallery">
  <span ng-repeat="image in images">
    <img src="{{image}}" width="150px">
  </span>

since ionic is built on built on top of flex box you can make a flexbox grid in ionic.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)