Problem using inline editing with Patternfly
Problem using inline editing with Patternfly
cwelch
Posts: 18Questions: 4Answers: 0
I'll see if I can get a test link up for this, but it is a bit of a challenge to isolate it out of the rather large code base I'm working on.
The problem is using inline editing with the patternfly frame work.
The example is pretty simple, just a one column table for this example, HTML is:
{% block content %}
| Name |
|---|
{% block scripts %}
<script>
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
ajax: "/api/brokers/editor/?format=datatables",
table: "#brokers",
fields: [{
label: "Name:",
name: "name",
},
]
});
// Activate the editor on click of a table cell
$('#brokers').on( 'click', 'tbody td:not(:last-child)', function (e) {
//editor.bubble( this );
editor.inline( this, {
onBlur: 'submit'
} );
});
var table = $('#brokers').DataTable( {
"serverSide": true,
dom: "Bfrtip",
"ajax": "/api/brokers/?format=datatables",
"columns": [
{"data": "name"},
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
],
select: true,
buttons: [
{extend: "create", editor: editor},
{extend: "edit", editor: editor},
{extend: "remove", editor: editor}
]
});
table.buttons().container()
.appendTo($('.col-md-6:eq(0)', table.table().container()));
});
</script>
{% endblock %}
{% endblock %}
</body>
</html>
The issue that comes up is that when the row is selected the text disappears. I've isolated this change in behaviour to when the Patternfly css/patternfly-additions.min.css style is present.
Is there a way to customize the td entry generated by DataTables for the rows with AJAX data such that I can revert the entry to a bootstrap style td as it works fine until the patternfly-additions are included?
I'll see if I can work around the issue by playing with the table classes in the mean time.
Thanks in advance!
This question has an accepted answers - jump to answer
Answers
Another way to solve it would be if I could turn off the patternfly context around the table some how. I need the context present on the sheet for the navigation bar, but I can live with plain bootstrap formatting for the table.
Any suggestions on how I might achieve that?
The patternfly context gets loaded like this:
So I'd be looking for a way to turn off the patternfly style sheet around the table.
Thanks in advance!
Sorry for the code formatting, just found the formater needed, will use it in future.
I haven't used patternfly I'm afraid, but very likely there is a styling conflict. Using right click, Inspect would be the way I'd look into what styles are being applied.
There is an inline editing example here that you might be able to use as a base for replicating this issue so w can take a look at it?
Thanks,
Allan
This suggestion was very helpful and allowed me to get to a solution.
Others may run into a similar conflict, so here is how I resolved it:
1) I inspected the element and this allowed me to see the various styles being applied to the inline edit row.
2) I knew from my previous debugging that the mischief was coming from paternfly-additions.min.css so I looked for a reference to a style in this file.
3) This allowed me to browse to the specific style in the patternfly-additions readily letting me know which of the table select patterns was the particular one causing the problems.
4) I then started doing modification in the style editor, commenting out the attributes and was able to turn off the attribute causing the problem.
Thanks for your inspection suggestion! I haven't worked much with complex style sheet usage so this was very helpful to learn how to diagnose and solve style problems.