I'm having an issue with my react-slick carousel. I'm following official documentation and installation steps but I'm getting this error:
It seems to be a very common error, and I've tried solution which I've found here on stackoverflow - delete this block of code from slick-theme.scss.
/* Slider */
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}
/* Icons */
#if $slick-font-family == "slick" {
#font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}
Firstly, it doesn't help, but after 5 minutes of trying to find another solution it magically starts working and now, after 10 minutes of trying to configure it, stylize it and add content to slides, this error fires again.
Does anybody please have solution for this? Or maybe some advice for different React carousel which is not as buggy as this one? Even if it starts working for 10 minutes, some features didn't work, for example, dots, the were no arrows for switching slides, etc.
Thanks for any help.
I've run npx create-react-app . and imported clip-path manually. Development build works without a problem, but the production one doesn't seem to work. Issue is the same on IE11 and Edge44
Steps to reproduce:
npx create-react-app .
add "ie 11" to browserslist in package.json for prod and dev
npm i react-app-polyfill
in index.js add import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
Grab shapes-polyfill.js from css-shapes-polyfill and insert script in .index.html > head, and also add browser polyfill.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src='shapes-polyfill.js'></script>
include <style> in index.html > head
<style>
#polygon-shape-outside {
width: 200px;
height: 200px;
float: left;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><polygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/></svg>");
shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
}
</style>
Insert div in App
<div style={{
width: 400,
fontSize: 10,
background: 'grey'
}}>
<div id="polygon-shape-outside"></div>
<p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.</p>
</div>
The image didn't show in IE because of IE is strict to SVG. You can refer to this Codepen Blog for details and here are the points:
Most browsers are lenient about the charset= string, but it's required for Internet Explorer. That means you need to use ;charset=utf8, instead of ;utf8,.
You will have to percent-encode characters that aren't URL-safe. For example, <svg> to %3Csvg%3E. You can minimize the amount of percent encoding that needs to be done by using single quotes ' instead of double quotes ".
According to this, I changed some parts of your code in <style> of index.html:
#polygon-shape-outside {
width: 200px;
height: 200px;
float: left;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'%3E%3Cpolygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/%3E%3C/svg%3E");
shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
}
Then it can run well in dev mode in all browsers.
About the difference between dev mode and prod mode: add data-shape-outside="polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px)" in <div id="polygon-shape-outside">. Then the content will wrap around the image and the page runs well and exactly the same in both modes and in all browsers.
I've searched a lot but I can't hit the answer, my problem is that I have a datatable with a context menu. On desktop I have no problem, it shows up on right click, but on mobile devices I can't get it to work: when I tap and hold the row it selects the nearest text and shows up the browser's context menu.
I've tried a lot of things:
Adding a css class style:
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
and the implementation as:
<p:dataTable id="lista" widgetVar="lista" var="unElem" ...>
<p:column headerText="Column 1" styleClass="noselect">
<h:outputText value="#{unElem.codigo}"/>
</p:column>
</p:dataTable>
<p:contextMenu for="lista" id="context" model="#{view.modeloMenuContextual}"/>
Searching on the web about the "event" attribute of the p:contextMenu and found that the default event is "contextmenu", so if you need other events you can add them space separated. The other event I found was "click", but I don't need it
<p:contextMenu model="#{view.modeloMenuContextual}" event="click contextmenu"/>
Searching in the official documentation (web and pdf) (https://www.primefaces.org/showcase/)
Searching in Primefaces' code in github (https://github.com/primefaces/primefaces)
I'm working with PrimeFaces 6.2
Hope anybody can help me.
Thanks!
6I am trying to target android device and iphone 6 with media queries.
My android device is ZTE Blade Vec 4G. I think it has same resolution with galaxy s3. (1280x720)
However my android device use iPhone 6 media queries even I specified them separately
#media only screen and (min-device-width : 360px) and (min-device-width : 640px) and
(-webkit-device-pixel-ratio : 2) {
}
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and
(orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
}
I am making a responsive site www.sandbox.mercomcorp.com and I am getting a parse error on wordpress in my css on my media query for iphone 5. I have no idea why
#media only screen and (device-height:568px) and (device-width:320px) and (-webkit-min-device pixel-ratio:2) and (orientation :landscape)
I guess it should be -webkit-min-device-pixel-ratio:2. You've got a space between device and pixel.