Ionic 4 отзывчивая сетка - PullRequest
Новая
       20

Ionic 4 отзывчивая сетка

1 голос
/ 23 июня 2019

Мне нужна ионная сетка с 3 колонками. И столбцы с первым и последним имеют размер содержимого. В этом столбце я хотел бы добавить значок или маленькое изображение. И столбец в центре должен иметь большой текст с переполнением: скрытый; текстовое переполнение: многоточие; пробел: nowrap;.

Я пробовал с этим кодом 

<ion-grid>
        <ion-row>
            <ion-col size="auto" style="border: 1px solid;">
                image
            </ion-col>
            <ion-col style="border: 1px solid; 
overflow:hidden;  
text-overflow: ellipsis;  
    white-space: nowrap;">
                <div>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 
                  </div>
            </ion-col>
            <ion-col size="auto" style=" border: 1px solid; ">
                icon
            </ion-col>
        </ion-row>
    </ion-grid>

, но я не могу правильно разместить столбец посередине. Он отображается на максимальной ширине устройства (в отдельной строке). Как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 23 июня 2019

Попробуйте: дайте средней колонке ширину и вместо нее введите стиль. 

<ion-grid>
        <ion-row>
            <ion-col size="auto" style="border: 1px solid;">
                image
            </ion-col>
            <ion-col size="4">
                <div style="border: 1px solid; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 
                  </div>
            </ion-col>
            <ion-col size="auto" style=" border: 1px solid; ">
                icon
            </ion-col>
        </ion-row>
    </ion-grid>
0 голосов
/ 23 июня 2019

Я согласен с @rtpHarry здесь, вам нужно стилизовать div и дать среднему ion-col размер,

Вот стек, как вы можете это сделать.

https://stackblitz.com/edit/ionic-yashpatelyk-grid

...