How to place a button in a div tag
How to place a button in a div tag
CountLessQ
Posts: 33Questions: 9Answers: 0
i have this sample: http://live.datatables.net/juxogora/1/edit I can't seem to display the btn in the bottom left of the fixed footer div tag.
Also I can't disable the hoover affect. I tried this:
.dt-button.red.tooltip {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.dt-button.red:hover .tooltip {
visibility: visible;
}
.dt-buttons .dt-buttons:hover {
background: none;
}
.dt-buttons .dt-buttons:active {
background: none;
}
Thank you
This question has an accepted answers - jump to answer
Answers
You can use the Direct Insertion method to place the button where you would like. Remove the
Bfrom yourdomoption.See if the
buttons.buttons.titleAttroption will do what you want for the tooltip.Kevin
@kthorngren for the title attr works great. For the btn location. when I remove the B from dom it disappears, also I tried this:
table.buttons().container().appendTo( $('.div', table.table().container() ) );No change happened.
I suspect the selector (
$('.div', table.table().container() )) you are using is not correct. Please provide a link to your page or a test case so we can take a look.Kevin
This is the link for the test case : http://live.datatables.net/juxogora/1/edit
Here is your example updated with
table.buttons().container():http://live.datatables.net/juxogora/1/edit
Kevin
I am sorry i don't understand. The button is still not inside( bottom left) the footer div tag.
Sorry, posted the wrong link:
http://live.datatables.net/jejurije/1/edit
Kevin
Can I ask how to remove the button hover affect.
@kthorngren An important issue is that if the page is small (my case) the btn will be centered in the middle i tried div tag col-sm-12 col-xs-12 and
Maybe Allan's answer in this thread will help:
https://datatables.net/forums/discussion/comment/136639/#Comment_136639
If not please update the test case so we can see where you are at.
Kevin
I added this to the sample and worked, thank you:
css
in js:
dom: 'rtip',http://live.datatables.net/juxogora/1/edit