Editor Form Coming up Normal Style When trying for Bootstrap
Editor Form Coming up Normal Style When trying for Bootstrap
mattw
Posts: 54Questions: 10Answers: 0
Hi All. I'm trying to use the Bootstrap styling for the editor for. I believe I have included the correct files to do so and other than that I do not see anything in the examples regarding other code I need to switch. After including the bootstrap editor js and css I noticed some buttons changed style however when click on "edit" the edit form looks like the normal one (and I would like to try the bootstrap feel). How can I get the edit form to switch to bootstrap style? Thanks!
heres my includes
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../static/css/datBootstrap.css">
<link rel="stylesheet" type="text/css" href="/static/css/dataTables.tableTools.min.css">
<!-- Editor CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/dataTables.editor.min.css">
<!-- Integration CSS (provides all the styles required by DataTables and TableTools -->
<link rel="stylesheet" type="text/css" href="/static/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="/static/css/editor.bootstrap.css">
<!-- jQuery and Bootstrap Javascript -->
<script type="text/javascript" language="javascript" src="/static/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<!-- DataTables, TableTools and Editor Javascript -->
<script type="text/javascript" src="/static/datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/static/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" language="javascript" src="/static/js/dataTables.editor.min.js"></script>
<!-- Integration Javascript -->
<link rel="stylesheet" type="text/css" href="/static/js/dataTables.bootstrap.js">
<link rel="stylesheet" type="text/css" href="/static/js/dataTables.editor.bootstrap.js">
<!-- todo organize these -->
<link rel="stylesheet" type="text/css" href="/static/css/jquery-ui.structure.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/dataTables.colVis.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/dataTables.colReorder.min.css">
<script type="text/javascript" language="javascript" src="/static/js/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript" src="/static/js/dataTables.colVis.min.js"></script>
<script type="text/javascript" language="javascript" src="/static/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" language="javascript" src="/static/js/datjs.js"></script>
and here is the editor and table init
editor = new $$.fn.dataTable.Editor( {
ajax: {
// Specify URL for edit/update
// http://editor.datatables.net/examples/advanced/REST.html
edit: {
type: 'PUT',
dataType:'json',
url: '/_hardwareedit',
data: function ( d ) {
return JSON.stringify( d );
}
},
/* remove: {
type: 'DELETE',
url: '/hardware.delete'
}*/
},
idSrc: $:hdrs.getIdSrc(),
table: "#Hardware",
//display:"envelope",
fields: [
$:hdrs.getEditData() ,
{label:"Change comments",
name:"justification",
fieldInfo:"If this change needs approval, this comment will be included in the approval request."
},
]
}).on( 'preOpen', function ( e ) {
var modifier = editor.modifier(); // Gets the selected row of the table
console.log(modifier);
if ( modifier >= 0) {
// Get data for this row
var data = table.row( modifier ).data();
console.log( data );
if ( data.is_Editable == "false" ) {
editor.message('You do not have permission to edit this asset.');
editor.hide(); // Hides all the fields
editor.buttons( { label: 'Close', fn: function () { this.close(); } } );
} else {
editor.show(); // Show the fields
}
}
} );
// Initialize data table
var table = $$('#Hardware').DataTable(
{
"lengthChange": false,
"sDom": '<T> C <"toolbar">Rrtip',
"processing": true,
"serverSide": true,
colVis: {
exclude: [0,
$:hdrs.getColVis(offset=1) ]
},
tableTools: {
"sRowSelect": "os",
"aButtons": [
{ sExtends: "editor_edit", editor: editor }
/*{ sExtends: "editor_remove", editor: editor }*/
]
},
"columns": [
{
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
$:hdrs.getColData() ,
],
"ajax": {
"url": "/_hardware",
"type": "POST",
"contentType":"application/json",
"data": function( d ) {
var x = $$.extend( {},
d,
{"hwid":"$id"}
);
return JSON.stringify(x);
},
'error': function(xhr, status, error) {}
},
"createdRow": function ( row, data, index ) {
$$(row).attr('id',data.DT_RowID);
$$('td', row).eq(0).html('<i class="glyphicon glyphicon-folder-open"></i>');
$$('td', row).eq(0).css('cursor','pointer');
}
});
This discussion has been closed.
Answers
Remove this. With Editor being styled by Bootstrap you don't need the default Editor stylesheet.
Allan
thank you so much. Ok so now the default editor is no longer coming up (that part solved) however the bootstrap form is coming up under the table instead of popping up in a "modal" sort of way. Any Idea why this would be happening?
That would suggest that the Editor Bootstrap integration files aren't being loaded, although I can see them listed above.
Are you getting any 404 errors or similar in your browser's error console?
I should say I know that all these files are a real pain! I'm working on a solution for that, which should be ready in the next few weeks :-)
Allan
Oh its no pain, I appreciate the work you've done to expand dataTables out to bootstrap. So it looks like the 2 integration css files and the 2 integration js files are being successfully loaded (no 404s).
do I need to separate out the tableTools and append this container like in your example pasted below?
Heh - I disagree ;-). 7+ files which are order dependent... It should be easier than that. And will be soon!
For TableTools integration, that is possibly the easiest way, since the Bootstrap integration defines its own (fairly complex) value for
dom.Are you able to give me a link to the page so I can check it out? Click my name above and then Send message if you don't want to make it public.
Allan
I have it running locally on a python server so Its gonna be hard to get you to the actual page but perhaps I could give you call the code for this part if that would help you
Is that a Python setup term? I'm afraid Python is not something I've done much development in!
Perhaps you could give me the latest includes you are using - like in the original post.
Thanks,
Allan
oh sorry mistype I meant "all the code"
ok I messaged you all the code for the page with the issues. here is all the includes.
Hi Allan so I got it almost working. So now my only question is how can I get the editor form to scroll. Currently when it comes up the submit button and some fields are too low to be seen on the screen and I cannot scroll down on the edit form.
got that figured out too, thanks allan. Any idea why the modal wont close when clicking outside of it?
Hi,
Sorry for the delay in replying overnight. Great to hear you've got it sorted out now!
Not immediately I'm afraid. This example shows it working as it should.
Are you getting any errors in the console when clicking on the background?
Allan
Hmm I don't seem to get any errors when clicking on the background or anywhere. What I did just notice though is that also the "header" portion of the editor box is like translucent, you can barely see the X to close or the text "Edit entry". So perhaps I have some connection in the issues there. Ill paste the includes that I'm using at my current code blocks that are related to this. Also there is this line of code that is in your bootstrap editor example that I cannot get to work (using tabletools as a variable seems to break my row selection). Could that be why there are some issues?
hmm maybe I need to double check the source in those files because when I drop your html and js from the example into my code I get the same weird look and no click out functionality
Do you know if there is just a way of making the envelope or lightbox version be able to scroll? I would just use those to solve this problem for now but the issue is that some of the fields and the submit button are off screen on large tables and cannot scroll to them.
I think I got it scrolling well with envelope, only a couple display issues now if screen size is small I still cant get down to the submit button. I'm gonna go back and take a look at the bootstrap editor style once the functionality is good.
it seems as if the size of the area around the edit form is too small then you cannot scroll down to the very bottom of the form. If I cntrl + minus to get a smaller screen view the rest of the form will show up and then you can scroll again. any idea how to fix that?
Sorry for the delay in getting back to you on this.
It certainly sounds like something is going wrong there - with the Bootstrap modal, is doesn't perform quite like Editor's own modal, in that with Editor's own the scrollable area is the area with the form inputs, - the header and footer stay static. With a Bootstrap modal, the whole thing moves.
I hate to say it, but is there any way you can get me a link to the page so I can try to debug what is happening?
Allan
let me see what I can get you here
thanks allan I got it working well with envelope style which is looking good to me. thanks for the support! DataTables has been incredible to work with.
@mattw - just wondering if you remember how you got the scrolling working (June 17). Think I'm having the same problems you had in the same order :-) I'd prefer to get scrolling working in the lightbox if possible. I tried envelope and that sort of blows up the whole page (form is down and off to the side of the display, unusable).
Ok so admittedly I've been writing code on this project fast so it is a bit of a blur but I know one of the issues was certain includes and the order of them. The first one is just a modified bootstrap.css that I use. I'll see if I notice anything else but looking at my code right now I didn't do anything to different from the examples but the includes were an issue. I know that in new upgrade some of this is supposed to get easier but havn't had the time yet.