I create page number that using counter property in css am trying to put it in the end of the page and I need to use pure css
this is my CSS:
#media print {
table.break {
page-break-after: left;
}
body {
counter-reset: table;
}
table::after {
counter-increment: table;
content: "page"" "counter(table);
}
.no-print, .no-print * {
display: none;
}
}
CSS
#page {
#bottom {
content: "Page " counter(page) " of " counter(pages)
}
}
This rule will generate page footers such as "Page 1 of 89".
For More Information
http://www.princexml.com/doc/page-numbers/
https://stackoverflow.com/a/6109932/4513879
Related
I am developing a Bootstrap Alert in ASP.Net
This is my code in ASPX:
<asp:Label ID="AlertLB" runat="server"/>
This is my code in CSS
<style>
.alert {
display: block;
margin-bottom: 1px;
height: 30px;
line-height:30px;
padding:0px 15px;
display:inline-block
}
</style>
This is my Code Behind:
private void SetAlert(string message, string typeAlert)
{
AlertLB.Visible = true;
AlertLB.CssClass = "alert alert-" + typeAlert;
AlertLB.Text = message;
AlertLB.Focus();
}
This works fine when it is a short message but when it is a very long message the text goes outside the alert:
The perfect solution would be for the text to be truncated to the width of the alert:
Another solution would be for the alert height to be adjusted automatically:
Could you help me? Thank you.
According to bootstrap you can add text-truncate class to alert label:
For longer content, you can add a .text-truncate class to truncate the
text with an ellipsis. Requires display: inline-block or display:
block.
private void SetAlert(string message, string typeAlert)
{
AlertLB.Visible = true;
AlertLB.CssClass = "alert alert-" + typeAlert +" text-truncate";//added text-truncate
AlertLB.Text = message;
AlertLB.Focus();
}
Searching I found the following article that helped me find the solution:
https://asp-net-example.blogspot.com/2013/11/aspnet-example-label-ellipsis.html
I added to my CSS code:
<style type="text/css">
.LabelEllipsisStyle {
text-overflow:ellipsis;
white-space:nowrap;
display:block;
overflow:hidden;
}
</style>
I modified my Code Behind:
private void SetAlert(string message, string typeAlert)
{
AlertLB.Visible = true;
AlertLB.CssClass = "alert alert-" + typeAlert + " LabelEllipsisStyle";
AlertLB.Text = message ;
AlertLB.Focus();
}
The Solution:
Solution Image
I would like to change the color in the (td) field [change color - change / transfer to a different css class?]
Condition:
The condition comes from the "if" query. if (sb == true) then nothing changes, if (sb == false) "[else]"
then the css class in (td class="InputsForUserColor1") may change to class="InputsForUserColor1Change".
Notes
(td class="InputsForUserColor2") is unchanged
My html code (razor/C#):
the variable "sb" is outside "if", assumes a different value
#for (int sth = 0; sth< ViewBag.sth; sth++)
{
if (sb == true)
{
varSth = "00:00";
}
else
{
varSth = "20:00";
}
#for (int sthElse = 0; sthElse< ViewBag.sthElse; sthElse++)
{
if (nr_columns == 2)
{
<td id="td01" class="InputsForUserColor1"></td>
}
if (nr_columns == 3)
{
<td id="td01" class="InputsForUserColor2"></td>
}
}
}
My CSS code:
.InputsForUserColor1, area {
background-color: papayawhip;
border: hidden;
align-content: center;
align-items: center;
vertical-align: central;
}
.InputsForUserColor1Change, area {
background-color: white;
border: hidden;
align-content: center;
align-items: center;
vertical-align: central;
}
personally I didn't write it because I don't know how to approach it
If the color should only be set once, while the page is rendered on the server:
set the target class in a variable of the CSHMTL page (Razor C# code block with #{}).
use the value of this variable (Razor #variableName Syntax).
#* assume that 'sb' does not change its value inside the for loop *#
#{ var userColor1 = sb == true ? "InputsForUserColor1" : "InputsForUserColor1Change"; }
#for (int sth = 0; sth< ViewBag.sth; sth++) {
#for (int sthElse = 0; sthElse< ViewBag.sthElse; sthElse++) {
if (nr_columns == 2) {
<td id="td01" class="#userColor1"></td>
}
else if (nr_columns == 3) {
<td id="td01" class="InputsForUserColor2"></td>
}
}
}
This will render the HTML with the correct class set when the page is delivered to the client browser.
This will not work if the color needs to change due to user interactions on the client (browser) side. In this case, you have to use a client script (JavaScript) to change the color dynamically. To do this, see jQuery addClass.
I'm trying to generate HTML page ( C# Razor View ) that will be converted to PDF ( using wkhtmltopdf )and printed on pre-printed stationery.
My problems is, that the pre-printed stationery has a header ( easy )
and tear-off part at the bottom (4cm) which should be blank until the very last page where some additional information is printed.
The whole invoice is being generated as
<table><thead></thead><tbody></tbody></table>
So how can I set margin of X on every page except the last printed
and on that last printed page instead of margin actually print something?
Tried to use with last-child selector but that did not work.
Perhaps some other solution will be more suitable for this using .Net Core ( some linux apps can be used as well )?
You can use the CSS #page rule to specify the page margins. You can also use this to specify additional margins for left & right-hand pages (to account for binding) and for the first page but not, it would seem, for the last page!
/* Default left & right is 2cm, top & bottom margin is 4cm */
#page { margin: 4cm 2cm }
/* First page, 10 cm margin on top */
#page :first {
margin-top: 10cm;
}
/* Left pages, a wider margin on the left */
#page :left {
margin-left: 3cm;
margin-right: 2cm;
}
/* Right pages, a wider margin on the right */
#page :right {
margin-left: 2cm;
margin-right: 3cm;
}
Further reading: https://www.w3.org/TR/CSS21/page.html#page-box
Finally I got to the bottom of that.
As the top of the page should not be a problem ( can be handled the same way as well , but the table thead is another option )
My solution is:
wkhtmltopdf test.html --footer-html footer.html output.pdf
And the whole trick is withing the footer.html file:
<!DOCTYPE html>
<html>
<head>
<script>
var mainHeader = "test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>";
var secondHeader = "OOOOOOOOOOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPPOPO<br>";
function selectHeader() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2);
vars[z[0]] = decodeURIComponent(z[1]);
}
if (vars["page"] == vars['topage']) {
document.getElementById('main').innerHTML = secondHeader;
} else {
document.getElementById('main').innerHTML = mainHeader;
}
if (vars["page"] == vars['frompage']) {
document.getElementById('test').innerHTML = secondHeader;
}
}
</script>
</head>
<body onload="selectHeader()">
<div style="min-height: 6cm; background-color: aqua; max-height: 6cm; overflow:visible;">
<div id="main" onload="selectHeader()">
</div>
</div>
</body>
</html>
ps.
Read somewhere that without !DOCTYPE html it might not work.
Thanks for all the help
I am having trouble finding an iframe. I want to switch to this iframe then click on an element within it.
I have tried finding the iframe using Id, Xpath, TagName, and CssSelector but my test times out while looking for the element each time.
This is the iframe as it appears in the page source:
<div xmlns="http://www.w3.org/1999/xhtml" id="dashboardView" style="display: block;">
<iframe id="dashboardViewFrame" border="0" scrolling="no" frameborder="0"
style="visibility: visible; height: 607px; width: 1280px; background-color: transparent;"
src="HtmlViewer.ashx?Dd_ContentId=6a8a44ae-2bd5-4f3c-8583-e777279ad4f2"></iframe>
</div>
<iframe xmlns="http://www.w3.org/1999/xhtml" id="dashboardViewFrame" border="0" scrolling="no"
frameborder="0" style="visibility: visible; height: 607px; width: 1280px; background-color:
transparent;" src="HtmlViewer.ashx?Dd_ContentId=6a8a44ae-2bd5-4f3c-8583-e777279ad4f2"></iframe>
Here is my current code:
public static bool IsAt
{
get
{
try
{
var dashboardiFrame = Driver.Instance.FindElement(By.Id("dashboardViewFrame"));
//todo switch to iframe
//todo find element within iframe
return true;
}
catch
{
return false;
}
}
}
Can someone please suggest a way to find the iframe and switch to it?
some times you have to sleep around 5 second till page load completely then find frame.
try this
thread.sleep(50000);
IwebElement Frame = Driver.SwitchTo().Frame("id of the frame");
//then any element inside frame should get by this line
Frame.FindElement(By.id("ID of element inside frame");
The main problem was that my test opened a new window, but my test was looking for elements on the old window. I resolved that by switching to the new page using:
Driver.Instance.SwitchTo().Window(Driver.Instance.WindowHandles.Last());
Then I could switch to the iframe also by also using SwitchTo() as shown below:
public static bool IsAt
{
get
{
try
{
Driver.Instance.SwitchTo().Window(Driver.Instance.WindowHandles.Last());
var DBViFrame = Driver.Instance.FindElement(By.Id("dashboardViewFrame"));
Driver.Instance.SwitchTo().Frame(DBViFrame);
var dataEntryButton = Driver.Instance.FindElement(By.Id("HyperlinkDataEntry"));
dataEntryButton.Click();
return true;
}
catch(Exception ex)
{
return false;
}
}
}
I have read and try to reproduce steps from this question/answer How to extend Orchard navigation module to add images to menu items
Have created MenuImagePart with "Image" Content Picker field
Have added this part to "Content Menu Item"
Changed code in MenuItemLink-ContentMenuItem.cshtml
But got next error:
https://dl.dropboxusercontent.com/u/86009304/MenuImagePart.png
#using Orchard.Utility.Extensions;
#using System.Dynamic
#{
/* Getting the menu content item
***************************************************************/
var menu = Model.Content.ContentItem;
/* Creating a unique CSS class name based on the menu item
***************************************************************/
// !!! for some reason the following code throws: 'string' does not contain a definition for 'HtmlClassify'
//string test = menu.ContentType.HtmlClassify();
string cssPrefix = Orchard.Utility.Extensions.StringExtensions.HtmlClassify(menu.ContentType);
var uniqueCSSClassName = cssPrefix + '-' + Model.Menu.MenuName;
/* Adds the normal and hovered styles to the html if any
***************************************************************/
if (menu.MenuImagePart != null)
{
if (!string.IsNullOrWhiteSpace(menu.MenuImagePart.Image.Url))
{
using(Script.Head()){
<style>
.#uniqueCSSClassName {
background-image: url('#Href(menu.MenuImagePart.Image.Url)');
width: #{#menu.MenuImagePart.Image.Width}px;
height: #{#menu.MenuImagePart.Image.Height}px;
display: block;
}
</style>
}
}
if (!string.IsNullOrWhiteSpace(menu.MenuImagePart.HoverImage.Url))
{
using(Script.Head()){
<style>
.#uniqueCSSClassName:hover {
background-image: url('#Href(menu.MenuImagePart.HoverImage.Url)');
width: #{#menu.MenuImagePart.HoverImage.Width}px;
height: #{#menu.MenuImagePart.HoverImage.Height}px;
}
</style>
}
}
}
}
<a class="#uniqueCSSClassName" href="#Model.Href">#Model.Text</a>
What I done wrong and how should I create this image to add to newly created "Content Menu Item"?
You have a contentpicker field on there, you want a mediapickerfield (if you are Orchard 1.6).