Как я могу изменить ширину столбца с помощью datagrid

У меня есть сетка данных в приложении angular 5:

<clr-datagrid>
  <clr-dg-column>a</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>

  <clr-dg-row>
    <clr-dg-cell>1</clr-dg-cell>
    <clr-dg-cell>2</clr-dg-cell>
    <clr-dg-cell>3</clr-dg-cell>
    <clr-dg-cell>4</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

На мобильном дисплее эта таблица шире экрана, как мне настроить ширину столбцов, чтобы она сжималась.

РЕДАКТИРОВАТЬ: Я пытаюсь воссоздать эту таблицу результатов: /image/3360178/кланы-каледония

Я считаю, что должно быть возможно создать что-то близкое к этому для ввода на мобильном устройстве.


vmware-clarity
person devzero    schedule 20.02.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете установить ширину столбца, используя класс css для столбца

HTML

<clr-datagrid>
  <clr-dg-column class="width1">a</clr-dg-column>
  <clr-dg-column class="width2">b</clr-dg-column>
  <clr-dg-column class="width3">b</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>

  <clr-dg-row *ngFor="let i of [1,2,3,4,5]">
    <clr-dg-cell >1</clr-dg-cell>
    <clr-dg-cell >2</clr-dg-cell> 
    <clr-dg-cell >3</clr-dg-cell>
    <clr-dg-cell>4</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

CSS

.width1 {
  width: 15%;
}

.width2 {
  width: 25%;
}

.width3 {
  width: 35%;
}

Обновление После просмотра StackBlitz мне пришло в голову, что, возможно, вы могли бы просто использовать простую таблицу. Переопределение стилей ввода по умолчанию с помощью

td > input {
  width: 1.5rem;
  min-width: 1.5rem;
}

И используя стандартный элемент таблицы

<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of [1,2,3,4,5,6]">
            <td>Type {{item}}</td>
            <td><input type="number"></td>
            <td><input type="number"></td>
            <td><input type="number"></td>
            <td><input type="number"></td>
        </tr>
    </tbody>
</table>

Похоже, он рухнет на узком окне просмотра.

Вот ваш модифицированный StackBlitz: https://stackblitz.com/edit/angular-dbzvmg

person hippeelee    schedule 21.02.2018
comment
Это не работает, заголовок столбца теперь меньше ячейки, а общая ширина таблицы намного больше моего окна. - person devzero; 22.02.2018
comment
Несколько замечаний. Первый; Хотя этот подход можно использовать, он не рекомендуется — лучше позволить сетке данных управлять шириной столбцов. Он предназначен для переполнения и прокрутки x, когда этого требует содержимое. Во-вторых, использование сетки данных на телефоне не является рекомендуемым шаблоном UX. В-третьих, трудно понять, как помочь вам, если я не знаю больше о вашем приложении, пример вашей попытки StackBlitz и размер устройства, на которое вы ориентируетесь, помогут мне увидеть то, что видите вы. - person hippeelee; 22.02.2018
comment
Примерно так: stackblitz.com/edit/angular-am1lvp. Также отредактируйте то, что я пытаюсь создать. - person devzero; 23.02.2018
comment
Я обновил свой ответ. Подойдет ли вам такой подход? - person hippeelee; 23.02.2018

arrow_upward
0
arrow_downward

Кажется, это работает, хотя добавление класса ко всем столбцам и всем ячейкам кажется менее чем идеальным.

<clr-datagrid>
  <clr-dg-column class="width">a</clr-dg-column>
  <clr-dg-column class="width">b</clr-dg-column>
  <clr-dg-column class="width">b</clr-dg-column>
  <clr-dg-column class="width">b</clr-dg-column>

  <clr-dg-row *ngFor="let i of [1,2,3,4,5]">
    <clr-dg-cell class="width">1</clr-dg-cell>
    <clr-dg-cell class="width">2</clr-dg-cell> 
    <clr-dg-cell class="width">3</clr-dg-cell>
    <clr-dg-cell class="width">4</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

стиль

.width {
  width: 25%;
  min-width: 20%;
}
person devzero    schedule 22.02.2018