Currently, I am working on my Ionic project where I am trying to implement an indexed list horizontally instead of vertically. While the list looks good as it is now, I want to make sure it supports smaller screen devices too by splitting the list into two rows when the screen width is less than 700px.
The desired output can be viewed here: . And this is what I have accomplished so far: http://plnkr.co/edit/20T3fpKfAq7P0QQTddEo
$scope.alphabet = {
A: {
name: "A",
amount: 0
},
B: {
name: "B",
amount: 0
},
...
Z: {
name: "Z",
amount: 0
}
};.button-alphabet {
background: transparent;
color: #777;
width: 3.8%;
border: 1px solid #999;
display: inline;
}
.button-alphabet[disabled] {
border: none;
}
.button-alphabet:nth-of-type(13):after {
content: "\A";
white-space: pre;
border: 10px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row center">
<button ng-repeat="letter in alphabet" class="button-alphabet">{{letter.name}}</button>
</div>I attempted to place the buttons inline and utilize the :after selector to add a line break after the 13th element, but haven't had any success yet.
When using JavaScript, I achieve the desired outcome, however, there seems to be an issue with indexing. Selecting the upper 'B' also selects the letter 'O' below it since they share the same index in the array. You can view the implementation here: http://plnkr.co/edit/Ima2dVxEsXVNPfljEsAF
I've searched various topics on Stack Overflow for a solution, but haven't found one that suits my needs. Is it possible to split the array into two rows programmatically? Can this be achieved solely with CSS or should I rely on JavaScript? Any assistance would be greatly appreciated.