Как выровнять карту в угловом материале?

Question

Как выровнять карту в угловом материале?

0

Я хочу уложить карты в формате строк, но показывает мне в формате column.I приложил изображение этого результата. Первая карта показана правильно, но на второй карте я хочу показать ее правую сторону от этой первой карты и так далее. Но в моем коде вторая карта хранится в нижней части первой карты.

HTML файл просмотра

<md-content class="md-padding layout-xs-column layout-row"  layout-xs="column" layout="row" ng-repeat="product in vm.result">      
<div  layout="column" flex-xs flex-gt-xs="30" class="layout-row flex-xs flex-gt-xs-30">
  <md-card>
    <md-card-header>

      <md-card-header-text>
        <span class="md-title">{{ product.Product_Name }}</span>

      </md-card-header-text>
    </md-card-header>
    <img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here">
    <md-card-title>
      <md-card-title-text>
        <span class="md-subhead" style="font-weight: bold;">Brand: </span><span style="margin-left:10px">{{ product.Brand }}</span>
        <span class="md-subhead" style="font-weight: bold;">Color: </span><span style="margin-left:10px">{{ product.Color }}</span>
        <span class="md-subhead" style="font-weight: bold;">Price: </span><span style="margin-left:10px">{{ product.Price }}</span>
        <span class="md-subhead" style="font-weight: bold;">Url: </span><span style="margin-left:10px"><a ng-href="{{ product.Url }}">{{ product.Url }}</a></span>
        <span class="md-subhead" style="font-weight: bold;">Category: </span><span style="margin-left:10px">{{ product.Category }}</span>
        <span class="md-subhead" style="font-weight: bold;">Description: </span><span style="margin-left:10px">{{ product.Description }}</span>
      </md-card-title-text>
    </md-card-title>
    <md-card-actions layout="row" layout-align="start center">
      <md-button class="send-button md-accent md-raised" ng-click="vm.editDialog($index,product._id)">Edit</md-button>
      <md-button name="ProductId" class="send-button md-accent md-raised" ng-click="remove(product._id,'{{$index}}')">Remove</md-button>
    </md-card-actions>
  </md-card>
  </div>

так как это длинное описание, все остальные карты отображаются неправильно.

Hemanth kumar H J 29 март 2016, в 08:20

Источник

Теги:

angularjs

angular-material

1 ответ

Ещё вопросы

nextt1 · Accepted Answer · 2016-03-29T03-14-00.000Z

3

Лучший ответ

Вы используете ng-repeat в неправильном месте. Он должен использоваться в элементе div вместо использования в md-content. см. ниже код. http://codepen.io/next1/pen/GZvgrK

nextt1 29 март 2016, в 03:14

0

спасибо, это работает сейчас, но каждый продукт находится в одной строке, но я хочу, чтобы 3 продукта в первом ряду и 3 во втором ряду.
Hemanth kumar H J 29 март 2016, в 06:24
1

codepen.io/next1/pen/NNvPwb Просто вам подходит значение flex, чтобы получить желаемый результат.
nextt1 29 март 2016, в 06:38
0

да исправлено, но так много места тратится впустую, потому что у некоторых продуктов меньше описания, а у некоторых больше времени, так много места теряется. Изображение добавляет тот и другой образ к указанному выше вопросу
Hemanth kumar H J 29 март 2016, в 06:44
0

Просто проверьте вышеуказанную ссылку еще раз. используйте md-conent со встроенным стилем, чтобы указать его высоту.
nextt1 29 март 2016, в 06:57
0

Огромное спасибо. Это очень помогает мне.
Hemanth kumar H J 29 март 2016, в 07:16
0

Совершенно никаких проблем. :)
nextt1 29 март 2016, в 07:37
0

все в порядке.
Hemanth kumar H J 29 март 2016, в 07:45

Показать ещё 5 комментариев