portal within bootstrap

EasyUI Forum

April 29, 2024, 11:15:22 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > portal within bootstrap

Pages: [1]

« previous next »

Author

Topic: portal within bootstrap (Read 1874 times)

zombie86

Newbie

Posts: 24

portal within bootstrap

« on: April 20, 2022, 05:45:50 PM »

Dear all

hope you all doing well

I do need a little help in Portal Extension

as while using it on native easyui only it works well, but once I tried to apply it on div with a class it not rendered correctly

I do use admin template based on Bootstrap and the "px-content" container holds the page contents and for a dashbard page am welling to have a portal extension

when it casts on body tag no issues, but it should be on div element instead of body tag

your help is highly appreciated


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: portal within bootstrap

« Reply #1 on: April 21, 2022, 02:48:22 AM »

Please look at this example. The portal is rendered in a <div> container.

Code:

<!doctype html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Portal - jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/material-blue/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.portal.js"></script>
	<script>
		$(function () {
			$('#pp').portal({
				border: false,
				fit: true
			});
		});
	</script>
</head>

<body>
	<div style="width:800px;height:400px;border:1px solid #ccc">
		<div id="pp" style="position:relative">
			<div style="width:40%;">
				<div title="Title1" style="height:100px;padding:10px">
					<p>Content1</p>
				</div>
				<div title="Title2" style="height:100px;padding:10px">
					<p>Content1</p>
				</div>
			</div>
			<div style="width:60%;">
				<div title="Title3" style="height:100px;padding:10px">
					<p>Content3</p>
				</div>
				<div title="Title4" style="height:100px;padding:10px">
					<p>Content4</p>
				</div>
			</div>
		</div>
	</div>
</body>

</html>


	Logged