Hi, I'm working on CSV Export, when I use btn-primary, my UI is getting broken.

Hi, I'm working on CSV Export, when I use btn-primary, my UI is getting broken.

PoorProgrammer007PoorProgrammer007 Posts: 6Questions: 1Answers: 0
edited April 2021 in Free community support

Please find the code here

var dtTable= $('#Registries').DataTable({
                buttons: [{ 
                    extend: 'collection',
                    className: "btn-primary",
                    text: 'Download',
                     buttons:
                          [{
                          extend: "csv", className: "btn-primary"
                        }], 
          }];   

Here are the libraries I used:

<link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" />
<link rel="stylesheet"
          href="https://cdn.datatables.net/1.10.24/css/dataTables.semanticui.min.css" />
<link rel="stylesheet"
          href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.semanticui.min.css" />          

<script src=" https://code.jquery.com/jquery-3.5.1.js"></script>
<script src=" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.semanticui.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.semanticui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.min.js"></script>

Please let me know If I should add any bootstrap libraries in addition to what were added.

Thanks in advance.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    What exactly is broken?

    For help with this it is best to supply a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • PoorProgrammer007PoorProgrammer007 Posts: 6Questions: 1Answers: 0

    Hi Kevin,

    Thanks a lot for reaching out,

    I'm trying to customize a download button, if I use dom: Bfrtip, the other components of my UI are broken, like whatever is present in that line is getting broke and the download icon doesn't show too except broken components.

    So I haven't used Dom properties, however I've added code on how I'm trying to customize my download button,

    http://live.datatables.net/cogisoxa/1/

    Once again, Thank you, Kevin.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    if I use dom: Bfrtip

    You can use any combination of dom options, including "l" for pageLength.

  • PoorProgrammer007PoorProgrammer007 Posts: 6Questions: 1Answers: 0

    Hi Tangerine,

    Thanks for the reply.

    My problem is something like this.

    https://datatables.net/forums/discussion/47497/datatables-dom-blfrtip-renders-elements-unaligned

    I tried multiple combination of DOM options, could not fix the issue, so I left out DOM option and now, I'm not able to style the download button either using btn-primary or using custom styling, the style is getting limited to 'Download' text itself, the whole button ain't changing the text, I'm not sure if I'm doing it right way, but I'm sure I've gone through numerous examples before trying to customize the csv.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • PoorProgrammer007PoorProgrammer007 Posts: 6Questions: 1Answers: 0

    Hi Collin,

    Thanks for the reply.

    Here's the link.

    http://live.datatables.net/cogisoxa/5/edit

    I'm not able to customize the 'Download' button.

    secondly, in the header of the page I'm working on, the 'Show 100' entries field is present aligning to header fields like Home, about us, contact us, but when I add dom:Bfrtip, the show 100 option vanishes, and in my page, it vanishes and also breaks my UI.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Thanks for the test case. The libraries you're loading are all for SemanticUI, but you mentioned Bootstrap before. Could you say which one you're trying to implement, please.

    Colin

  • PoorProgrammer007PoorProgrammer007 Posts: 6Questions: 1Answers: 0

    Hi Collin,

    Yes I'm using semanticUI libraries, but I want to know how I can implement the customization for 'download' button, since btn-primary is a bootstrap class, I want to know if I import any libraries of bootstrap may fix my customization for download button.

    I'm not sure why I'm not able to customize the csv download button.

    Thanks for your help in advance. You guys are amazing.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    No, SemanticUI and Bootstrap are incompatible, as they're alternative ways of styling they can't be used together. You would need to style the button in a SemanticUI way - so would be best to check their docs.

    And thanks for the kind words :)

    Colin

  • PoorProgrammer007PoorProgrammer007 Posts: 6Questions: 1Answers: 0

    Thanks Collin,

    Although I'm using semantic UI libraries, the 'show 100 entries' field is happening because of 'dom' properties. Thank you very much for the support! :)

This discussion has been closed.