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
Related
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;
}
I'm looking for a way to replace ::shadow now that it is gone. I've found two topics about it on this website, but both imply to modify the shadow element.
here and there
But the point of Web Components is to be able to import any element we found on the Internet in our webpage / app. So, it means that I don't wanna modify anything on these "third parties elements", because there are sources, and if I modify them, it will be overwritten when I later update them.
So, imagine that I download on webcomponents.org an element that creates some sort of button, but I need to change the color of this button because it doesn't fit the style of my page/app. The element creator has put no variable in his CSS, no #apply rule, no imports, nothing. Just the polymer element itself, working properly.
How can I do this without modifying the element's source code?
One option would be to style it imperatively. Get a reference to the element, use the DOM API on it to query its shadow DOM for the inner element you want to modify, then set the style property of that reference.
For example, the <gold-cc-cvc-input> currently has no extension points for styling its credit card icon.
Right-click the icon in Chrome, and inspect it in DevTools. We see the icon has an id of "icon".
Get a reference to <gold-cc-cvc-input id="cvc">, and set the style of the "icon" element. Here, we're using Polymer's automatic node finding to get a reference to the <gold-cc-cvc-input> by its ID (i.e., this.$.cvc) and then a reference to the inner "icon" element (i.e., this.$.cvc.$.icon).
this.$.cvc.$.icon.style.border = 'solid 2px blue';
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
attached: function() {
this.$.cvc.$.icon.style.border = 'solid 2px blue';
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="gold-cc-cvc-input/gold-cc-cvc-input.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<gold-cc-cvc-input id="cvc"></gold-cc-cvc-input>
</template>
</dom-module>
</body>
codepen
You can style it from your container element, just look at the structure of the 3rd parties element. E.g.<paper-card> is the element you whant to style. paper-cards have divs inside:
shady DOM (Polymer 1.*)
<style>
paper-card div{
background-color: red;
padding: 30px;
}
</style>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-card/paper-card.html">
<style>
.thirdPartEl div{
background-color: red;
padding: 30px;
}
</style>
</head>
<body>
<paper-card heading="I'm unstyled 3rd parties element"></paper-card>
<paper-card class="thirdPartEl" heading="I'm styled 3rd parties element"></paper-card>
</body>
shadow DOM (Polymer 2.0)
for styling element from outside just use tag name as selector
<style>
paper-card{
background-color: red;
padding: 30px;
}
</style>
but if you want to style internals, you need custom CSS properties. if these aren't set, you can style them imho only via js at the moment
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.
My intro photo slightly covers the breadcrumbs panel on IE and Chrome, see here https://www.hawaiidiscount.com/luaus.htm
It looks fine on Safari and Firefox.
I have been reading on the Internet about css specific code for IE and tried different methods to fix that, but it doesn't work. What am I doing wrong? Thanks!
<!--[if IE]>
<style>
.breadcrumbs {
margin-top: -22px;
}
</style>
<![endif]-->
<style>
.ie .breadcrumbs {
margin-top: -22px;
}
</style>
<style>
#breadcrumbs {
margin-top: -22px;
}
</style>
It's possible that the different heights are due to the different font rendering engines on the different browsers, as this element is being positioned by <br /> elements.
You're able to use conditional statements, such as
<!--[if IE]>
.element{
margin-top: 10px;
}
<![endif]-->
.. to add code that only IE6 - 9 will render, however this will not work in IE10 and above.
You could also browser sniff, but this is really not a good solution as it's better to have one codebase that works across browsers. You also won't be able to anticipate all browsers that your users will use.
The website you've shared is also using quite a few negative margins and absolute positions, which can also cause inconsistent layout issues.
My suggestion would be to remove all <br /> elements, remove as many of the negative margins and absolute positions as possible and lay the page out using a simpler system. For instance, you've split out the background of the breadcrumbs from the text of the breadcrumbs - these should really be together so that you can easily style them together.
Hope that helps
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;
}