I set up a VFP that pulls in a checkable list of records from a list view. It renders properly and shows the records. But for some reason when I download the page and open it in Adobe or the web it’s not showing the data in the table.
APEX CODE:
global virtual with sharing class LoadsBatchMill_V2 {
global List<FR__Load__c> loadList {get;set;}
global String renderAs { get; set; }
global ApexPages.StandardSetController standardController;
global Set<Id> loadIds = new Set<Id>();
global LoadsBatchMill_V2(ApexPages.StandardSetController standardController){
this.standardController = standardController;
loadList = new List<FR__Load__c>();
for (FR__Load__c load : (List<FR__Load__c>)standardController.getSelected()){
loadIds.add(load.Id);
}
loadList = [SELECT Name, Pickup_By__c, Quantity__c, FR__Commodity__c, E_BOL_Link__c FROM FR__Load__c WHERE ID IN: loadIds];}
}
VISUALFORCE PAGE CODE:
<apex:page standardController="FR__Load__c" extensions="LoadsBatchMill_V2" recordSetVar="Loads" sidebar="false" applyBodyTag="false" renderAs="PDF">
<head>
<style>
body {
font-family: 'Arial Unicode MS';
}
blackline {
border: 1px solid #000;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th{
<!--border: 1px solid #8f8f8f;-->
border: 1px solid #c7cdd4;
padding: 5px;
}
</style>
</head>
<apex:pageBlock >
<div style="body; font-size: .85em">
<apex:image url="{!$Resource.FR}" width="120"/> <br /><br /><br />
<apex:pageBlock rendered="true">
<apex:pageBlockTable width="100%" align="center" style="border: none; vertical-align: bottom;" value="{!loadList}" var="L">
<apex:column value="{!L.Name}"/>
<apex:column value="{!L.Pickup_By__c}"/>
<apex:column value="{!L.Quantity__c}"/>
<apex:column value="{!L.FR__Commodity__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
Comment out the <apex:image url="{!$Resource.FR}". Images in static resources generally don't display nice in PDF, you'd need a Document record with "externally available image" ticked. But it shouldn't cause the whole thing to fail, just render as broken icon.
<apex:pageBlockTable> renders poorly in PDFs because it comes with bunch of JavaScript that doesn't run. See https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_output_pdf_component_behavior.htm Printing nice PDFs is bit of an art, see if you can use <apex:repeat> and manually craft the <table><tr><td>.... See if you can steal some ideas from my answer to https://salesforce.stackexchange.com/q/194167/799
For debugging (and faster rendering) you can remove renderAs="PDF" from your page and add it when you're relatively happy with the output.
Related
I have built a web site for my local plastic model club which involves showing multiple images on a page. I like to show them 3 abreast. Up to now, I have done this using a nested series of table codes which gets very messy.
Is there a simpler way. Let us say that I have 12 images and I want to show them three across and 4 rows down. I can do this using html table, html table row, etc. but it gets very complicated with lots of if statements, etc.
As I have had problems maintaining the web site from day to day, I have taken down the seaside version but you can see an example of the type of display on the current home page at http://www.ipms-clacton.org.uk under "A selection of member's models"
David
If you want to make the table programmatically you could use the following code as a new message in your class. If you pass it the html and an orderedCollection it makes a new table 3 items wide and as many rows as it takes. The final row can be less than three elements. You will need to change it to display images rather than text but it's a place to start. The removeFirst: command removes a number of items from an ordered collection and returns those items as a new collection. That lets you break the collection apart into elements for your individual rows. Here is the message's definition:
make3Table: html using: anOrdCollection
html table: [
[ anOrdCollection size >= 3 ] whileTrue: [ html tableRow: [
(anOrdCollection removeFirst: 3) do: [ :item | html tableData: item ]
].
].
anOrdCollection isNotEmpty ifTrue: [
html tableRow: [
anOrdCollection do: [ :item | html tableData: item ]
]
].
]
The question isn't Seaside specific, but HTML/CSS related.
The solution for that is to use any element inside a container, and use CSS-grid layout for that container.
E.g.
.gallery-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
padding: 20px;
}
.image-container {
display: flex;
background-color: navy;
color: white;
align-items: center;
justify-content: center;
height: 150px;
}
#media (min-width: 600px) {
.gallery-container {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 960px) {
.gallery-container {
grid-template-columns: repeat(4, 1fr);
}
}
<html>
<body>
<div class="gallery-container">
<div class="image-container"></div>
<div class="image-container">2</div>
<div class="image-container">3</div>
<div class="image-container">4</div>
<div class="image-container">5</div>
<div class="image-container">6</div>
<div class="image-container">7</div>
<div class="image-container">8</div>
<div class="image-container">9</div>
<div class="image-container">10</div>
</div>
</html>
It will work for any number of elements, and it has two CSS width breakpoints to show 1, 2 or 4 elements per row.
Then the Seaside part is only about generating that container and the elements using the canvas tags.
If you don't want to use a table another couple simpler ways to do it with css + seaside is with CSS columns:
html div
style:'columns:3';
with:[ myCollection do:[:ea | html div:ea]]
There are several css styling rules for columns.
Or using CSS flexbox
html div
style:'display:flex; flex-direction:row; flex-wrap:wrap; justify-content: space-between';
with:[
myCollection do:[:ea | html div
style:'width:32%';
with: ea]
]
Those style: rules could/should be in your CSS file as a CSS class
I'm new to Materialize and Angular. I have the exact same question as the question in this thread Change the default color of materialize.css input fields. I have attached screenshot
However, the solutions do not answer the question. I implemented this code in styles.css:
input:focus {
border-bottom: 1px solid #005DAB !important;
box-shadow: 0 1px 0 0 #005DAB;
}
label:active {
color: #005DAB;
}
Here's what I'm seeing:
What I'm seeing is the bottom border changes to blue (which is what I wanted). However, the label changes to blue temporarily (I'm assuming while it's active) and then it goes back to teal.
How do I make the selected label remain blue (#005DAB).
Hey the problem here is that the default CSS rules of materialize outweigh the custom rule you have defined.
You can read more about this here :
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
In short the most specific rule overwrites the other so in order to make your change appear you need to make your rule more specific.
There's multiple ways of going about this like using the id in the selector or adding !important to your rule.
However these methods are not recommended, you can rewrite the original CSS rule or add a custom class to add weight to your selector
<div class="input-field col s12 label-color-alternate">
<input id="password" type="password" class="validate">
<label for="password" class="">Password</label>
</div>
For example I added a class "label-color-alternate" to the outer div, if we add this class to our selector it'll give us the necessary specificity.
div.row > div.input-field.label-color-alternate > input+label.active {
color: #005DAB;
}
You can of course experiment with the best way to write your selector and to which elements you want to add custom classes.
I hope this helps !
set this in your external css:
input[type=text]:not(.browser-default):focus:not([readonly]) {
border-bottom: 2px solid var(--yourcolor);
box-shadow: 0 0 0 0 var(--yourcolor);
}
I had a problem, I'm making a web page and I'm using text-align:justify in several parts of the web, everything fine, it works well in all the browsers I have tested it but opera, in there everythig gets messy and out of margins, some links in the menu those in left side appear but can't be selected, in other words they don't appear to be links, I'm using a hack to justify the li elements of my ul with an extra li span class="strecth"> to make it works, I think, that is a well know hack, using
font-size:0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines
in the ul element and
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
in the li elements.
So what's the question?, there is no question. This is the solution to make it works in opera. I have a menu wrapper, it has font-size:0px and the ul element is inside a nav id="#menu" which also has font-size:0px
#menuwrapper{ max-width:970px;
margin:20px auto 0px auto;
font-size:0px;
text-align:left;
padding:0px;}
#menu ul{ padding:0px;
margin:0px;
clear:both;
font-size:0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;}
testing I found out that the font-size was the problem but if i change that the rest of the page change, so I change this only for opera whith: noindex:-o-prefocus, #menu ul{font-size:1px; in this way.
#menuwrapper{ max-width:970px;
margin:20px auto 0px auto;
font-size:0px;
text-align:left;
padding:0px;}
noindex:-o-prefocus, #menuwrapper {font-size:1px;}
#menu ul{ padding:0px;
margin:0px;
clear:both;
font-size:0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;}
noindex:-o-prefocus, #menu ul{font-size:1px;}
In fact no parent must have font-size:0px to text-algn:justify to works.
An thats it, please excuese my English, is not my language
In my case adding :
noindex:-o-prefocus, #menuwrapper {font-size:1px;}
do not fix the problem (I test it on linux). When I set font size to 2px it start works. Finally I used:
noindex:-o-prefocus, #menuwrapper {font-size:100%;}
and everything works like a charm.
How can I internationalize the button text of the file picker? For example, what this code presents to the user:
<input type="file" .../>
It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack,
See the following links for some approaches:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.quirksmode.org/dom/inputfile.html
http://www.dreamincode.net/forums/showtopic15621.htm
Pure CSS solution:
.inputfile {
/* visibility: hidden etc. wont work */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile:focus + label {
/* keyboard navigation */
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
<input type="file" name="file" id="file" class="inputfile">
<label for="file">Choose a file (Click me)</label>
source: http://tympanus.net/codrops
Take a step back! Firstly, you're assuming the user is using a foreign locale on their device, which is not a sound assumption for justifying taking over the button text of the file picker, and making it say what you want it to.
It is reasonable that you want to control every item of language visible on your page. The content of the File Upload control is not part of the HTML though. There is more content behind this control, for example, in WebKit, it also says "No file chosen" next to the button.
There are very hacky workarounds that attempt this (e.g. like those mentioned in #ChristopheD's answer), but none of them truly succeed:
To a screen reader, the file control will still say "Browse..." or "Choose File", and a custom file upload will not be announced as a file upload control, but just a button or a text input.
Many of them fail to display the chosen file, or to show that the user has no longer chosen a file
Many of them look nothing like the native control, so might look strange on non-standard devices.
Keyboard support is typically poor.
An author-created UI component can never be as fully functional as its native equivalent (and the closer you get it to behave to suppose IE10 on Windows 7, the more it will deviate from other Browser and Operating System combinations).
Modern browsers support drag & drop into the native file upload control.
Some techniques may trigger heuristics in security software as a potential ‘click-jacking’ attempt to trick the user into uploading file.
Deviating from the native controls is always a risky thing, there is a whole host of different devices your users could be using, and whatever workaround you choose, you will not have tested it in every one of those devices.
However, there is an even bigger reason why all attempts fail from a User Experience perspective: there is even more non-localized content behind this control, the file selection dialog itself. Once the user is subject to traversing their file system or what not to select a file to upload, they will be subjected to the host Operating System locale.
Are you sure you're doing your user any justice by deviating from the native control, just to localize the text, when as soon as they click it, they're just going to get the Operating System locale anyway?
The best you can do for your users is to ensure you have adequate localised guidance surrounding your file input control. (e.g. Form field label, hint text, tooltip text).
Sorry. :-(
--
This answer is for those looking for any justification not to localise the file upload control.
You get your browser's language for your button. There's no way to change it programmatically.
much easier use it
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
I could achieve a button using jQueryMobile with following code:
<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>
Above code creates a "Upload" button (custom text). On click of upload button, file browse is launched. Tested with Chrome 25 & IE9.
To make a custom "browse button" solution simply try making a hidden browse button, a custom button or element and some Jquery. This way I'm not modifying the actual "browse button" which is dependent on each browser/version. Here's an example.
HTML:
<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>
CSS:
#import {
margin: 0em 0em 0em .2em;
content: 'Import Settings';
display: inline-block;
border: 1px solid;
border-color: #ddd #bbb #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font: bold 12px/1.2 Arial,sans-serif !important;
/* fallback */
background-color: #f9f9f9;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}
.hideMe{
display: none;
}
JS:
$("#import").click(function() {
$("#browser").trigger("click");
$('#browser').change(function() {
alert($("#browser").val());
});
});
Actually, it is possible to customize the Upload File button with its pseudo selector: ::file-selector-button.
Check this for more info: MDN ::file-selector-button - CSS
There is some drawbacks using textarea and input-text as input of text forms. textarea has a little annoying triangle in right-lower corner and input-text is a single-line input.
I try to have a input of text like the facebook update input form. The input auto resize after linebreaks. And the element or tag used was <div>. I said "used" because, after they redesigned Facebook, I can't figure-out which tag is used now. There is CSS property that enables the user to edit the text in a div element. I actually copied the CSS property, but now I lost it. Can someone tell me which CSS property it was? I have a weak memory that it began with the -webkit prefix though
If you use html5 you can use:
<div id="divThatYouCanWriteStuffIn" contenteditable>
<!-- you can write in here -->
</div>
If you couple this with the css:
#divThatYouCanWriteStuffIn {
min-height: 4em; /* it should resize as required from this minimum height */
}
To get rid of the 'annoying little triangle' in textareas:
textarea {
resize: none;
}
JS Fiddle demo of both ideas.
I know you can do this in javascript by doing getElementByID('mydiv').contentEditable='true';, but I do not know how this would be done in CSS
The Facebook update input field is a TEXTAREA element. The trick is to use the resize property:
textarea { resize:none; }
That will make the triangle disappear.
You should be able to add your style to a textarea like you do with tags like p, h1, h2 etc..
So you can target all textareas or ones with specific classes or ids on them
Example:
textarea {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
line-height:140%;
color:black;
margin:0 0 5px 5px;
padding:5px;
background-color:#999999;
border:1px solid black;
}
This example will target all textareas on the page.
Change textarea to .nameOfClass or #nameOfId if you want to target a class or an id.
Hope this helps.