I have a form for printing with code that looks like this:
<p><span style="font-size:18px;"><small>[GUESTADDRESS]<br />
[GUESTCITY]<br />
[GUESTCUSTOMQ4]<br />
[GUESTPOSTCODE]<br />
[GUESTCOUNTRY]</small></span></p>
</td>
When I want to print, I get a blank line if there is no entry for a particular field.
Is there a way to hide blank lines for printing?
Please keep it simple for me as I am not an expert. I think that this is CSS, but I am not sure!
if there is no entry for a particular field then you get br tags in one place for eg:
[GUESTADDRESS]<br />
<br />
[GUESTCUSTOMQ4]<br />
[GUESTPOSTCODE]<br />
[GUESTCOUNTRY]
So, whenever there is no contents for the field, you see multiple breaking line in one place and you can do like this:
#media print{
br~br{display:none;}
}
Related
I have a custom built CMS and content looks fine in the WYSIWYG editor, but on the web site front end there are extra br tags that shouldn't be there, I'm wondering if I can hide them using CSS (there is a master.css file)
Here's an example of the problem - note the br tag at the end of each line
<div class="column threequarter">
<h3>I need to hide the break tag at the end of this line and the following line</em></strong> </p><br />
<p> </p><br />
<h4>I need to hide the break tag at the end of this line</h4><br />
<p>I also need to hide the break tag at the end of this line.</p><br />
Trouble is, I don't want to hide ALL br tags throughout the site but if I could just hide them within the then that would probably suffice.
As the HTML documentation in the link https://www.w3schools.com/tags/tag_br.asp says, The <br/> tag also supports the Global Attributes in HTML. You just set a class for the required <br/>tag and then set display:none; for those particular elements. Here is an example,
HTML:
<br class="mystyle" />
CSS:
.mystyle{
display:none;
}
I want to display blank value onload of h:selectonemenu without adding blank item in dropdown list. But i am not able to get it.
I tried with a few scenario by adding display:none but to no avail.
I even tried adding css but it too didnt work.
Please find the below code:
<h:selectOneMenu
id="testid" style="width:22%;" maxlength="29"
value="#{myVal.val}" >
<f:selectItem itemLabel="" itemValue="" style="display:none;"/>
<f:selectItems
value="#{myController.animalsData}" var="data" itemLabel="#{data.animalName}"
itemValue="#{data.animalCode}" />
</h:selectOneMenu>
I'd like to know, if there is any way to replace the default button of <b:commandButton> with a <b:iconAwesome>.
However, it does work with a <h:commandLink>, perfectly.
<h:commandLink>
<b:iconAwesome name="arrow-down"></b:iconAwesome>
</h:commandLink>
And with replacing, I mean fully replaced and not, that the icon is on the button. Just check the working code above.
Are there other hints to be mentioned?
(Note: <b:...> is a component of BootsFaces.)
Two answers:
To show an icon within a commandButton, just add the iconAwesome attribute:
<b:commandButton value="" ajax="true" update="form:inform infoshow"
iconAwesome="thumbs-up" look="info" />
If you want to display the image instead of the button, while keeping the button functionality, add a couple of inline styles (also see here):
<b:commandButton value="" ajax="true" update="form:inform infoshow"
iconAwesome="thumbs-up" look="info"
style="padding: 0; border: none; background: none;color: #000" />
If you need more flexibility: we're already working on it. BootsFaces 0.8 is going to allow you to nest arbitrary HTML within the <b:commandButton />, exactly the way you did in your <b:commandLink /> example. You can watch the progress on our bug tracker: https://github.com/TheCoder4eu/BootsFaces-OSP/issues/65
I am currently working on my first SAPUI5 mobile application. I found the options for horizontal layout positioning, but my labels are shown "too high". For display I am using Google Chrome.
My page theme is sap_bluecrystal and the content structure is as follows:
sap.ui.layout.form.SimpleForm (Max Container Cols: 2)
--> sap.m.Label (Text: Name, LabelFor: "Name")
--> sap.m.Input (Id: "Name")
There are some more fields following the same structure. The result is:
Has someone an idea how to solve this problem?
Thank you in advance,
Best Regards, Jonathan
You can use the editable property like this:
<f:SimpleForm id="form"
editable="true">
<f:content>
<Label
text="Name"
labelFor="Name" />
<Input id="Name"
value="DJ" />
</f:content>
</f:SimpleForm>
That should do what you need.
Here's an example (switch the switch to turn this on and off to see the effect).
How would I set the default properties of server controls that I'll always use?
For example I have combos all over my pages which almost always look the same in the mark up text (e.g. CSS CLasses for PopUp, TextBox, Button, etc.)
I thought of putting the control inside an user control and set the properties there.
But then I would have to access the control itself with a property of the UC.
I want to get rid of these repeating tags:
<Appearance>
<AnyRecordFieldCell CssClass="SFGridAnyRecord"></AnyRecordFieldCell>
<AlternateRecordFieldCell CssClass="SFGridAlternateRecord"></AlternateRecordFieldCell>
<RecordPreviewCell CssClass="SFGridRecordPreview" />
<GroupIndentCell CssClass="SFGridGroupIndentCell" />
<GroupCaptionCell CssClass="SFGridGroupCaption" />
<AnySummaryCell CssClass="SFGridAnySummary" />
<GroupCaptionPlusMinusCell CssClass="SFGridPlusMinus" />
<TopLeftHeaderCell CssClass="SFGridTopLeftHeaderCell" />
<RowHeaderCell CssClass="SFGridRowHeaders" />
<ColumnHeaderCell CssClass="SFGridColumnHeaders" />
<GroupHeaderRowHeaderCell CssClass="SFGridGroupedColumnHeaders" />
<FilterBarCell CssClass="SFGridFilterBarCell" />
</Appearance>
Any ideas?
Consider using ASP.NET Themes, you can use them to set mark-up for controls.
You could go with a purely CSS solution if these elements are almost always the same - i.e. have styles for input and button elements.
Where styles differ the enclosing div, for example, can be referenced to change the style.