CODEWITHSUNDEEP
javascripthtmlcss
neversaint
neversaint

Reputation: 63984

How to use CSS to add a newline in JavaScript based buttons

I have created the table using DataTable. It looks like this:

enter image description here

What I want to do is to split them like this:

enter image description here

How can I achieve that with customized CSS? My HTML looks like this:

<html>
    <head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <link rel="stylesheet"  href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
    <link rel="stylesheet" href="http://cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.css">
    <script type="text/javascript" language="javascript" src="./src/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="./src/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="./src/dataTables.colVis.min.js"></script>


    <script>
     $(document).ready(function() {
         $('.sortable-table').DataTable( {
                // Allow column selection, based on this
                // https://datatables.net/extensions/colvis/
                "dom": 'C<"clear">lfrtip',
                // Except first column,
                // it should stay.
                // https://datatables.net/extensions/colvis/options
                colVis:{exclude:[0]}
            });
         } );
         </script>
    <style>
    body {
        font-family: 'Helvetica Neue';
        margin:150px;
    }
    img {
        max-width:65%;
        max-height:65%;
    }
    </style>
    <title>Experiment 11</title>
    </head>
    <body>

    <h2> G. Shared functional  annotation</h2>
    Here the functional analysis is scored with <tt>-log(Pvalue)</tt>.
    <h3> LN </h3>
    <table border="1" class="dataframe sortable-table display compact pure-table">
  <thead>
    <tr style="text-align: left;">
      <th>GO</th>
      <th>FOO</th>
      <th>BAR</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>                regulation of response to wounding</td>
      <td>  6.850</td>
      <td> 11.975</td>
   </tr>
  </table>
    </body>
    </html>

Upvotes: 0

Views: 103

Answers (3)

ARLCode
ARLCode

Reputation: 651

Okay, so after reviewing your code then hopping on the ColVis website and inspecting their search and show/hide button, I have come to the conclusion! I need to see your CSS because, at the moment, the way they have it is predefined to inherit from the parent class. So, if you want to adjust the predefined css then manipulate this: button.ColVis_Button, ul.ColVis_collection li, this is the class hierarchy they use to move the button around. Just add the !important tag to the things you need changed.

Upvotes: 0

Keval Bhatt
Keval Bhatt

Reputation: 6322

As Per your example: 




<div class="ColVis" >
  <button class="ColVis_MasterButton">
    <span>Show / hide columns</span>
  </button>
</div>

This is your html for that button now we are applying css to it




 .ColVis{
    width:100%
}
button.ColVis_Button{
    float:right
}

Provide Width 100% to your Colvis class and FLOAT:right to button.

Note :

If possible then apply new class for colvis and for button because if you change style of colVis then maybe it will change style in your other template or in your other layout so test it first.

example: http://jsfiddle.net/kevalbhatt18/urxk3q0z/2/

When you see output in jsfiddle first starch the size of output screen so you can see proper output

Upvotes: 1

Val
Val

Reputation: 217274

Try adding this rule to your CSS:

div.ColVis {
    float: right;
    margin-bottom: 1em;
}

Upvotes: 0

Related Questions