Стилизация .toolbar-container тени ion-toolbar в ionic 4+

Я перепробовал множество методов. но не работает. Ожидайте, как этот стиль

ion-toolbar {
    contain: none;
    .toolbar-container {
        overflow: visible;  // not working
        contain: none;  // not working
    }
}

У вас есть решение?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
3
0
889
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я работал над этой проблемой с новой директивой:

ng generate directive allow-overflow

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appAllowOverflow]'
})
export class AllowOverflowDirective {

  constructor(el: ElementRef)
  {
    let toolbar : HTMLElement = el.nativeElement;
    setTimeout(() => {
      let container : HTMLElement = toolbar.shadowRoot.querySelector(".toolbar-container");
      if (container)
      {
        // (as any) is just to suppress a warning
        (container.style as any).contain = "none";
        container.style.overflow = "visible";
      }
    });
  }
}

Затем я добавил <ion-toolbar> вот так:

<ion-toolbar appAllowOverflow>
    ...
</ion-toolbar>

Я также добавил это правило CSS для <ion-toolbar>:

ion-toolbar[appAllowOverflow]
{
  contain: none;
}

Другие вопросы по теме