Bootstrap Editor Close button doesn't work
Bootstrap Editor Close button doesn't work
karimbk
Posts: 9Questions: 4Answers: 0
The Close button is not working.. I can close the editor pop-up window, just by clicking on Escape on the keyboard.
What could be the reason?
Here is the HTML after rendering:
<button class="close">×</button>
and here is the header of my page:
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Page</title>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>
<script src="./Editor-1.5.6/js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/buttons/1.2.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<script src="./js/widgets.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript" src="./Editor-1.5.6/js/editor.bootstrap.js"></script>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/ov.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="./Editor-1.5.6/css/editor.dataTables.min.css">
</head>
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
anyone?
Are you seeing any errors in the console? I've just double checked with this example and it appears to work without issue.
Does it work for you on that page?
Allan
I made the mistake of loading the editor default css and the editor bootstrap css which made the x unclickable (no hover pointer either). You only need the bootstrap editor css!
Does anyone know what specific conflict causes this? I'm having the same issue, and I cannot remove bootstrap.css because it's inherited from my parent site.
UPDATE: Increasing the z-index on div.DTE div.DTE_Header seems to have solved the problem.
In which case, don't include the editor.dataTables.css stylesheet - just include the Editor Bootstrap stylesheet.
Allan
I don't know if this helps, but I removed the position: absolute from div.DTE_Header in the editor.dataTables.css stylesheet and was able to click the button afterwards and still keep the styling from the sheet.