Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Metronic HTML Stepper Issue with Responsive DataTable


When using a responsive DataTable the + button does not appear when used inside of the metronic stepper and the datatable is not on the first step. I was able to fix this by calling a recalc on the step containing the datatable with the stepper changed event but I believe this is a bug.

stepper.on("kt.stepper.changed", function(stepper) {
var step = stepper.getCurrentStepIndex();

if (step == 2) {
dtexpenses.columns.adjust().responsive.recalc();
}

});



dtexpenses = $("#expenses").DataTable({
rowId: "rowId",
responsive: {
details: true
},
serverSide: true,
ajax: {
url: "URL",
type: "POST",
timeout: 10000,
},

"order": [
[0, "desc"]
],
columns: [{
data: "Category"
},
{
data: "Name"
},
{
data: "Price"
},
{
data: "Gst"
},
{
data: "Total"
},
]
});


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Thanks for sharing this. We will check and fix it in a future update.

Regards.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(