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

Question

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>

Keval Bhatt · Accepted Answer · 2015-05-20 05:35:34Z

1

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

answered May 20, 2015 at 5:35

Keval Bhatt

6,3623 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Val · Accepted Answer · 2015-05-20 03:29:06Z

0

Try adding this rule to your CSS:

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

answered May 20, 2015 at 3:29

Val

218k14 gold badges377 silver badges384 bronze badges

Comments

ARLCode · Accepted Answer · 2015-05-20 05:45:17Z

0

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.

answered May 20, 2015 at 5:45

ARLCode

6516 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related