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!
Related
So I am building a site with the hugo-book theme. The docs here (under Extra Customization) say to create scss files under ./assets, while the theme submodule itself stores its css defaults under ./theme/hugo-book/assets.
Following this logic I created an scss file at ./assets/_fonts.scss:
/* merriweather-regular - latin */
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: local(''),
url('fonts/merriweather-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/merriweather-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-italic - latin */
#font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
src: local(''),
url('fonts/merriweather-v28-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/merriweather-v28-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
font-family: 'Merriweather', sans-serif;
}
but hugo is still picking up the default roboto font from the theme directory. The fonts are stored under ./static/fonts and the hugo compiler seems to be picking up the changes.
Should I instead be making changes to the hugo-theme submodule and not worrying about it? That doesn't seem right. Searching the internet shows references to a custom_css params entry in config.toml but it would be pointing to ./assets - is this not the default?
Asking here before I ask the hugo-book author, in case I am missing something simple.
You have to create an assets folder from the root of your theme. This assets folder should not be inside any other folder.
For the fonts, create a folder by the name of static and inside of that create another one by the name of fonts and put your web fonts inside of it.
For the fonts to work, paste the font stylesheet into _custom.scss partial and change the URL path there. After that these should work without any issues.
Note: the static folder shouldn't be inside another folder.
assets
_custom.scss
static/fonts
webfonts.woff
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.
An image to be displayed inline in a JavaMail created message shows up twice in Apple Mail – but not Outlook?
EmailMaster sends a test email message that includes:
1) an image sent with the email to be displayed inline in the title when the message is opened
2) a link to an image that has to be downloaded from a remote URL after the message is displayed.
The goal is for the message to be fully rendered when it is opened (owl). Not require the reader download it before seeing full message.
The code below works perfectly when the message is opened in a client like Outlook.
-- the Owl image displayed in line when its opened, and
-- the underline must be downloaded.
When AppleMail opens the message the Owl is displayed twice. The screen show:
-- the owl as a standalone image,
-- then the message with the owl correctly displayed in the Title.
I can’t post a screen shot, but I put a screen shot of the AppleMail screen at
http://america-3.org/images/shot.jpg
Can anyone point me to the cause of the problem? Or a solution?
HTML code added as one MimeBodyPart.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="cid:fonts" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.text-blue-12 {font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; font-weight: normal;
font-size:12pt; color: #0F0F0F}
body { margin: 0; padding: 0; background-color: #1A4576; width: 480px;}
tr {width:100%; background-color: white;}
-->
</style>
</head>
<body>
<table width='480px' cellspacing='0' cellpadding='6' class='text-blue-12' align="center">
<tr><td style='text-align: center;'>
Hello! <img src='cid:owl'>
</td></tr>
<tr><td style='text-align: center;'>
<img align="center" alt="Shadow" class="kmImage"
src="https://d3k81ch9hvuctc.cloudfront.net/assets/email/bottom_shadow_444.png"
width="600" style="border: 0; height: auto; line-height: 100%;
outline:none; text-decoration: none; max-width: 100%; padding-bottom: 0;
display: inline; vertical-align: bottom" />
</td></tr>
<tr><td>
This is test # 1005. The Table should be a 480px wide and centered.
If not there is a problem.
</td></tr>
<tr><td>
Yours truly,
GLB
</td></tr>
</table>
</body>
</html>
Extract of Java Class I use to test JavaMail code
public class EmailMaster {
/* JavaMail attempts to use IPv6 to connect. Windows IPv4.
* The error message will be "Network Unreachable: Connect.
* To fix it, I ran this code from the command window
* setx _JAVA_OPTIONS -Djava.net.preferIPv4Stack=true
* I tried to set _JAVA_OPTIONS as an environment variable but that didn't
* work.
*/
/* the constructor instantiates EmailMaster.
* It parses a ".properties" text file that provides the everything
* needed to define a message:
* -- send from, reply to, subject etc. Strings
* -- local paths to one or more files:
* .. a text file containing the to addresses.
* .. the HTML file that holds the message body,
* .. one of more images to be displayed inline
* in the HTML message body. I used one.
* .. one or more files to be attached to the msg. I used one.
*/
/* then it calls sendEmail() to read through the list of addresses
* and sends an individual email to each address*/
sendEmail () {
/*this section of code is done once. */
Session session = Session.getInstance(this.sessionParameters);
SMTPTransport tr = new SMTPTransport(session, new URLName (host));
tr.connect(...); // this is successful
/* the method loops through this section for every to address provided*/
Message msg = new MimeMessage(session);
msg.setReplyTo(this.replyToAddress);// read from properties file
msg.setSentDate(new java.util.Date());// read from properties file
msg.setSubject(this.subject);// read from properties file
msg.setFrom(this.fromAddress);// read from properties file
msg.setRecipient(RecipientType.TO, singleToAddress);// read from properties file
MimeMultipart mmp = new MimeMultipart();
/* add a MimeBodyPart for each image be displayed inline the HTML text */
for (MimeBodyPart part : this.imagesBodyParts.values()) {
mmp.addBodyPart(part);
/* add a MimeBodyPart for each HTML page in the message. */
for (MimeBodyPart part : this.attachmentBodyParts.values()) {
mmp.addBodyPart(part);
}
mmp.addBodyPart(this.msgPart);
msg.setContent(mmp);
msg.saveChanges();
tr.sendMessage(msg, msg.getAllRecipients());
}
}
There's a limit to how much control you have over how mail readers display messages. In the end, you may not be able to accomplish what you're trying to do with all mail readers. That said, there's some issues with the code you posted...
You've got a double nested "for" loop that first adds an image body part, then adds a bunch of attachment (html?) body parts, then sends the message, then adds more of both to the same message, then sends the message again, and so on. Surely this isn't what you intended.
If you want the message to include a single html part and some image parts that are referenced by the html part, you need to create a multipart/related message, and the image parts need Content-ID headers. This JavaMail FAQ entry will point you in the right direction.
Finally, you should never be calling the constructor for SMTPTransport directly. Instead, you should use the Session.getTransport method.
Hey all. I've done tons of searching and still nothing. My element has the following CSS and the PIE.htc file is definatly in the correct folder. Still no curvey corners in IE6-8 :(
#nav {
width:500px;
border:2px solid #eee;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(/PIE.htc);
position:relative;
z-index: 0;
}
Check that your PIE.htc file is being served with the correct HTTP content-type header. It needs to be "text/x-component", but some servers do not have this set up correctly and send something like "text/plain" or "text/html" instead; IE will ignore the behavior file if this is the case.
More suggestions can be found at http://css3pie.com/documentation/known-issues/