I've been immersing myself in learning the latest versions of AngularJS and Ionic through practical application. I am currently working on a page that uses ionic rows and columns to display JSON data. The layout includes a 50/50 column setup, with a text table on the left side and images displayed in an Ionic slider on the right.
However, I have encountered an issue where the Ionic slider does not adhere to the column width, and I am unsure how to resolve this as I am not very familiar with flexbox CSS. In my previous experience with Ionic (v1), I did not face this problem with the ionic-slide-box element.
Below is the HTML template code I am using:
<ion-header>
<ion-navbar>
<ion-title>{{macroDetails.title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<ion-card-header><h1>{{macroDetails.title}}</h1></ion-card-header>
<ion-card-content>
<ion-row>
<ion-col col-50>
<table>
...
</table>
</ion-col>
<ion-col col-50>
...
</ion-col>
</ion-row>
</ion-card-content>
I have searched through various forums and Stack Overflow for potential solutions to this issue but haven't found one yet. I am hopeful that someone who has encountered this problem before can provide some guidance on how to address it.