Angular 5 : расположите кнопку наполовину вне диалогового окна mat

#css #angular #angular-material

#css #angular #angular-материал

Вопрос:

Я хочу, чтобы в диалоговом окне была кнопка закрытия, которая находится в правом верхнем углу диалогового окна (наполовину внутри / наполовину снаружи), как на изображении :

Я могу добиться этого, используя абсолютное позиционирование, но это неосуществимый вариант.

Я хочу расположить кнопку со ссылкой на dialog, я также пробовал использовать float:right и указывать margin-top отрицательно, но другая половина скрыта даже при значении z-index более 1000.

 <button mat-mini-fab style="cursor:pointer;position:absolute;top:420px;left:900px">
<i class="material-icons" (click)="close()">close</i>
</button>

(Любезно предоставлено:codota.com).

1. Можете ли вы поделиться stackblitz

2. Привет @PrashantPimpale stackblitz.com/angular/pxxngpbnmlxj взято из официальной документации angular. Все, что мне нужно, это кнопка закрытия, добавленная к этому в правом верхнем углу

Ответ №1:

где кнопка расположена внутри диалогового окна html? вам не нужно использовать такие значения, как 900px и 420px . Расположите ее абсолютно относительно контейнера диалога ( «белого» контейнера) и просто используйте top:0;right:0 ; и translate(50%,-50%) .

Он должен расположить ее так, как вы хотите. Смотрите краткий пример ниже

 .dialog {
  position: relative;
  margin: 50px auto;
  width: 200px;
  background-color: black;
  height: 200px;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

 <div class="dialog">
<button>X</button>
</div>

также проверьте stackblitz -> dialog stackblitz . Я добавил класс на панель диалога (‘my-dialog’ в файле компонента) и добавил css в файл глобального стиля, поскольку контейнер диалога / панель диалога недоступны из компонента.

1. Это не работает. Она отображает кнопку в углу страницы вместо диалогового окна. Я открываю свой диалог через другой ts-файл, как это сделано в stackblitz.com/angular/pxxngpbnmlxj

2. Я видел stackblitz, и все работает должным образом, но из-за сложной природы моего локального кода я все еще не могу заставить его работать, но я уверен, что смогу заставить его работать через некоторое время с помощью вашего кода. Спасибо!

3. Просто убедитесь, что вы добавили кнопку в html диалога вне любых других контейнеров. А затем запишите css в глобальный файл css. В противном случае стили не будут оказывать никакого влияния на диалоговое окно.

Ответ №2:

Вы должны расположить кнопку внутри диалогового окна, которое она должна закрыть:

 <dialog-component>
   Content... content.. content...

   <button mat-mini-fab class="close-dialog-btn">
     <i class="material-icons" (click)="close()">close</i>
   </button>
</dialog-component>

Предполагая, что у dialog-component есть position relative , absolute или fixed , вы можете расположить кнопку с помощью следующего CSS:

 .close-dialog-btn {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

right/top Атрибуты расположат кнопку в правом верхнем углу. transform Атрибут сдвинет ее на половину своей ширины вверх / вбок.

Кроме того, убедитесь, что непосредственно в dialog-элементе нет отступов, иначе вам, возможно, придется настроить top/right -атрибуты, чтобы компенсировать это отступы.

1. Я уверен, что делаю что-то неправильно, но при моей попытке использовать это решение стилизованный элемент управления появляется в правом верхнем углу всего окна, а не в правом верхнем углу открытого модального диалога.