Position bottom toolbar over the sheet modal


I would like the fixed bottom toolbar to still be visible when I open the Sheet Modal.

<div class="toolbar toolbar-bottom-md">
		<div class="toolbar-inner">
			<a class="link">Home</a>
			<a class="link">Stuff</a>
			<a class="col button button-raised sheet-open" data-sheet=".more-sheet">Open More</a>
	<div class="sheet-modal more-sheet">
		<div class="toolbar">
			<div class="toolbar-inner">
				<div class="left"></div>
				<div class="right">
					<a class="link sheet-close">Close</a>
		<div class="sheet-modal-inner">
			<div class="page-content">
				<div class="block">
					<p>Lorem ipsum dolor sit amet, </p>

Any styling tips I can look into?

Также потребовалось расположить Toolbar перед Sheet Modal, установка z-index для Toolbar не помогает.
По всей видимости это из-за контекста наложения, Sheet Modal всегда располагается самым последним c position:absolute; и перебить его просто не удается.

Подскажите, пожалуйста, существует ли решение?..

Добавь bottom для action sheet

Можно кодом:
this.$el.find(’.sheet-modal .modal-in’).css(‘bottom’, ‘50px;’)

bottom установлено, во время выезда Sheet Modal перекрывает Toolbar (на PC очень заметно, приходится отключать анимацию)

Anymore solutions for this issue? Z-index doesnt need to be changed if the sheet-modal div is put in another place, like a child of a view, so it doesnt cross into other views.

Can a Sheet Modal be placed inside a View?
In my opinion, it should be strictly in the root div.

According to docs, it shouldn’t be. But i’m always trying to extend functionality. The uber eats app has done this and i am trying to replicate. I’m trying to find where in the core js file this is occuring, regardless of where i put the sheet model, it is always a child of the root app in web inspector.

Came back here to say this. There is an undocumented sheet parameter called containerEl. Here you can put the view class and the sheet will stay in that view.

1 Like