Can you please help me to find a way to remove the spaces in the datatables pagination buttons?
I've referred the below URL's for doing so :
DATA TABLES BOOTSTRAP 4 EXAMPLE
I've added the .js and CSS files exactly as it was said in above, but it did't work.
Datatables pagination buttons - Remove unwanted space
None of the above are working. Kindly help me to override the current functionality. Thank you.
Please find the code I've worked below :
HTML
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script src="javascript/third_party/popper.min.js"></script>
<script src="javascript/third_party/bootstrap.min.js"></script>
<!-- DATA TABLES -->
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css" />
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
CSS
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding : 0px;
margin-left: 0px;
display: inline;
border: 0px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 0px;
}
Jquery
$.fn.dataTable.moment('MM/DD/YYYY');
$(`#${ID}`).DataTable({
columnDefs: [{
targets: [0, 1, 2, 5, 6, 7],
orderable: false
}],
"order": [[4, "asc"]]
});
After so many research, I found out that
while using bootstrap css, do not use jquery.dataTables.css with it. else it will create spacing issue in pagination.
Bootstrap Datatable 4 independently works good as you see in JsBin that i created.
Hope, if you point correct URL of poper.js which is as following :
else this will also create issue with bootstrap 4 css.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
EDIT :
If you see below codepen, which has same issue that your are facing.
if you open that codepen, and remove the following line and it's work fine for you.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10-dev/css/jquery.dataTables.css">
Hope this may work for you. if not, comment down below.
As Yash pointed out, including 'jquery.dataTables.css' does cause this bug.
But, if you are using the DataTables' 'select' functionality, the visual aspects will be lost by removing this .css file.
So, it really is a decision you make of removing the .css file if you do not use 'select', if you do, you'll have to pinch the css styling for selected items.
Or, keep the .css and overwrite the css so that the pagination is not messy.
This CSS will remove all of the messy spacing around pagination.
.dataTables_paginate ul li {
padding: 0px !important;
margin: 0px !important;
border: 0px !important;
}
Related
I am working on a private Codeigniter project and want to display some events in my view with the help of fullcalendar.
So far - so good. But i want to display more information than the events name and time, i want to display aditional information like room und lecturer. The fullcanender docs reccomend this solution: event-tooltip-demo .
But that only works as long as i am not using bootstrap. As soon as i am integrating bootstrap.css, the tooltips won't show.
Even the official example on codepen behaves the same, when you add Bootstrap. Any ideas? Thank you very much in advance!
Edit:
By the way, here are some additional information, that might help. When i am hovering the event while bootstrap.css in included, the following element shows up in the Inspector:
<div class="tooltip" role="tooltip" id="tooltip_zvh8nhyqlo" aria-hidden="false" x-placement="top" style="position: absolute; will-change: transform; visibility: visible; top: 0px; left: 0px; transform: translate3d(488px, 179px, 0px);"><div class="tooltip-arrow" style="left: 65px;"></div><div class="tooltip-inner">Lecture</div></div>
So that seems to be like indended.
And here is teh order of my "imports":
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.0/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.0/locales-all.min.js"></script>
<script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>
As soon as i uncomment the first line (bootstrap.css) the tooltips are shown. Same behaviour in the official codepen example. Not matter if i use Bootstrap 4 or 3
The reason of your problem is the Tooltip conflicts with bootstrap CSS. You can easily solve the conflict by just adding 2 simple CSS.
You need to add opacity: 1; on tooltip class and background-color: transparent; on tooltip-inner class to get the same result as before adding the bootstrap.
Here is codepen with those updates:
https://codepen.io/sasiddiqui/pen/oNxzBMe
I'm using slick.js to create a slideshow. All is working well except the dots. They're showing up, but they're showing up as this weird character string (http://newsinteractive.post-gazette.com/40for10/img/slideshow/weird_chars.png).
My code seems right. What's wrong?
jquery:
$('#slideshow2').slick({
arrows: true,
prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>",
accessibility: true,
adaptiveHeight: true,
dots: true
});
css:
.slick-dots
{
position: absolute;
bottom: 0px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
background-color: white;
}
It is an encoding issue as Mindaugas suggested.
Matheus's solution is misleading, you do not have to download the css file although this works because in the actual .css file the encoding is stipulated.
For instance, I did not download the css and was successful pulling from a CDN simply by adding a charset="UTF-8" attribute to my <link> tag.
Full solution would look like:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" charset="UTF-8" />
meta charset="utf-8" << thats it
You need to download and import Slick's CSS files as following:
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
In my case i needed to go into the slick-theme.css file and remove the IE fix (only using on safari and chrome) and then change the font it was using to use the .ttf not .otf file.
That sorted it out for me.
TO SOLVE THIS ISSUE, JUST GO :
-in, slick-theme.css, go to .slick-dots li button:before, go to, content: 'PUT YOUR VALUE'
Just put a dot (or whatever you prefer).
(all others solutions I found in forums didn't work for me, then I found this EASY solution.
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I'm having issues getting my CEWP to apply any of the code inside of it.
There are no errors, no problems whatsoever, it just doesn't do anything.
I've tried putting the code directly inside of the CEWP or linking to the file.
The link to the file works perfectly too.
Here are all combinations of code I have tried to add to the CEWP; perhaps someone can spot the mistake:
With the webpart id from webpage:
<script>
<style>
#WebPartTitleWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
</script>
With the webpart id from SPD:
<script>
<style>
#g_daea6bc5_92ba_4702_9956_55d5077c4440 .ms-viewheadertr
{display: none;}
</style>
</script>
I have also tried with and without the script tag, messing with the spacing, messing with lines, messing with indents and nothing changes whatsoever.
I just want to remove the header from WebPartTitleWPQ9.
The style works just fine on the custom listview page when I add it directly to the page source, but the style doesn't remain when I add the list to other pages. I need the style to apply wherever the list is being used.
You have the a style tag inside the script tag.
Try this:
<style type="text/css">
#WebPartTitleWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
or this:
<style type="text/css">
#g_daea6bc5_92ba_4702_9956_55d5077c4440 .ms-viewheadertr
{display: none;}
</style>
The name of the webpart needs to have "title" / "caption" omitted. The real name of the webpart is WebPartWPQ9 and not WebPartTitleWPQ9.
Changing the css to:
<style type="text/css">
#WebPartWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
fixed it.
I have a problem when I am trying to include jQuery Notebook plugin into my twitter bootstrap page. The problem is that CSS of the plugin became messed up. For example on this fiddle if you will select text, you see that controls are not on the right places.
But if you will remove bootstrap CSS - everything is ok.
Looking at jQuery notebook css, I can see that all of the classes use
.jquery-notebook ....{
}
So it is highly unlikely that they overwrite any of twitter's styles. How can I fix the styles here?
If out of a sudden in 5 years the jsfiddle will disappear, you can still find the code here:
<link rel="stylesheet" href="css/jquery.notebook.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="my-editor">
Here is my text
</div>
<script>
$(document).ready(function(){
$('.my-editor').notebook();
});
</script>
<script src="js/libs/jquery-1.11.0.min.js"></script>
<script src="js/libs/jquery.notebook.js"></script>
The reason is Bootstrap override ul margin property. so you can use bootstrap with jquery notebook plugin you just change small modification to solve this problem,
jquery.notebook.css
Old style (line number 74)
.jquery-notebook.bubble ul {
padding: 0;
margin: 0;
list-style: none;
}
new style
.jquery-notebook.bubble ul {
padding: 0;
margin: -20px 0; // Add top margin -20px
list-style: none;
}
The bootstrap adds a margin top and bottom to the elements with class names h1 and h2. Try making the margins zero for these two elements in your css.
.h1,.h2{
margin:0;
}