conflict with bootstrap

EasyUI Forum

May 19, 2024, 11:40:56 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > Bug Report > conflict with bootstrap

Pages: [1]

« previous next »

Author

Topic: conflict with bootstrap (Read 18218 times)

luc2

Newbie

Posts: 7

conflict with bootstrap

« on: December 04, 2013, 01:29:13 AM »

hello,

i know you already know there is a conflict with bootstrap but i'm going to say it anyway :

Quote

<!DOCTYPE html>
<html>
  <head>
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
   <script type="text/javascript" src="easyui/jquery.min.js"></script>
   <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <body>
   <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
   title="My Panel" iconCls="icon-save" collapsible="true">
   The panel content
   </div>
  </body>
</html>


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: conflict with bootstrap

« Reply #1 on: December 04, 2013, 01:57:04 AM »

Please add the code below to your page.

Code:

*, *:before, *:after{
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

Or use the newest easyui file, just like this:

Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  </head>
  <body>
    <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
        title="My Panel" iconCls="icon-save" collapsible="true">
      The panel content
    </div>
  </body>
</html>


	Logged

luc2

Newbie

Posts: 7

Re: conflict with bootstrap

« Reply #2 on: December 04, 2013, 03:11:06 AM »

it seems to work, thanks


	Logged

luc2

Newbie

Posts: 7

Re: conflict with bootstrap

« Reply #3 on: December 04, 2013, 05:52:31 AM »

i've got a new conflict problem :]

Quote

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$('#dg').datagrid({
data: [
{
firstname: 123,
lastname: 123,
phone: 123,
email: '123@456.789'
}
]
});
</script>
</body>
</html>


	Logged

Pages: [1]

« previous next »