For an Ext JS 4.1 grid with GroupingSummary, I want to be able to print one page per group.
I am able to get a working solution on Firefox by adding a row after each summary, and setting its #media print style to page-break-before:always. However, this does not work on Chrome or Safari. As I understand it, the reason is that Webkit does not support page-break-before on table rows. I even tried setting the table row display style to block to try to force it, but the page top margins are messed up.
I also was able to get a working solution for all browsers by writing a special printer script, which basically extracts the grid html, clones grid html for each group, and moves each group's table rows to one of these new html grids. Then it takes all the html and writes it to an iframe that covers over the existing web page screen and calls window.print(). One nice thing is that the column headers are at the top of each new group's page.
My main two gripes with this solution are: (1) user can't print original web page using browser print function, i.e., user needs to click on my print button; and (2) it's hacky.
It seems like the best solution would be an Ext-native solution for rendering grouped grids, each its own html table. Does anybody have their own solution that they like?
Related
The application I'm testing is very complex. It has dozens of tabs and thousands of fields. For my tests I need to access ~150 fields.
I'm going through the process of collecting the necessary information to access the elements: xpath, id, css selector, etc. All of these elements sit inside of iframes, sometimes as many as 4 nested iframes. I'm using Firefox to inspect the elements and there is an easy way to get the xpath, css selector, etc. However, in order to figure out what iframe an item is in I have to look through the path in the scrolling bar at the bottom of the inspector window. This is working, my code works, but it's tremendously tedious and has the potential to introduce errors if I miss an iframe.
The question is: is there a way to get the list of iframes that wrap around an element that is easier/faster than the manual investigation that I'm doing now? Possibly something similar to the copy xpath, etc. that is built in to the inspection tool. I'm open to both ideas and applications/extensions.
Once you open the firepath as mentioned in below image :
If you see on top left corner it showing top window, Just click on it, It will show you all the frame present in your web page and once you select any frame then it also show that frams' html as well.
As shown in below image, the frame get highlighted once mouse over on that frame
So here you can easily identify your element is in which frame.
And once you move pointer to the element it will automatically shows that frame as selected where your element is. As shown here.
I want to show the user how a page will look when printed, without actually asking them to click on the print button. I have the necessary media query based CSS for printing, but that will only be applied in print preview and when the page is actually printed. My requirement is to display the print formatted page in a dialog box within the app.
I have come across this same requirement for a project. AFAIK this cannot be done as the #media print rule is specific for printing to low cost devices, as per the specification.
My workaround has been to emulate a printed paper using CSS. For instance, I created a div with a grey background and then an inner div with a white background, emulating paper. I set margins according to my print margins and placed html inside this container. This approach does not guarantee by any means a replica of what to expect when printing, since elements such as wide tables and images might make the container wider than the printed page, while a print engine could apply scaling.
Compounding these issues, it is not possible to reliably predict how print engines and printer configurations might handle page breaks. You can help with suggestive css attributes in the #media print rule, like page-break-inside, page-break-before, page-break-after, widows, and orphans. In my print preview div, I simply layout a continuous html within the emulation containers and make it clear to the user this is an emulation.
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
I have a page that I'm trying to set up for printing. This page contains a large number of individual tables. The tables are of varying size but, in general, I can fit 2.5 to 3 tables on each page. I'd like to be able to prevent the tables from being broken by a page break. Any idea how I can accomplish that?
I tried this:
.reportTable {
page-break-inside: avoid;
}
Unfortunately, page-break-inside only seems to be supported in Opera (according to W3Schools - I verified that this doesn't work in Firefox 4.0.1).
I can do this to force a page break before after every single table:
.reportTable {
page-break-after: always;
}
This works to insert the page breaks and seems to be supported in all major browsers, but it leaves me with tons of wasted space on the printed documents (roughly half of each page is blank). I really only want a page break if the entire next table won't fit on this page.
I know that I have users utilizing Internet Explorer, Firefox, and Safari so I'd really like to support those as much as possible. Finding something that would also work in Chrome and Opera would be a very nice bonus.
Any ideas?
I've also been looking for an answer to this. The closest I came is to knowing approximately how many lines of output would fit on a page, then calculating how many lines of output the page had. In your case:
1) figure out how many lines of output you can fit on a page.
2) keep track of how many lines you've used already by displaying your first table.
3) calculate how many lines table 2 will take. Add it to table 1's lines and see if you're still below your approximate threshold. If you are, display the table, if not, put a div down with the page-break:always in it to force a new table.
This would give you approximately what you are looking for, but it won't be perfect. every once and a while, you'll have a table that "could" have fit on the previous page, but just didn't quite make the cutoff because you have to be on the low side of estimating how many lines fit on a page.
I haven't however figured out a way to facter in if the content inside a cell or something like that will wrap around into a new line when smushed into a printout page.
Hope that sparks an idea for you.
At present, there seems to be no way to force the browsers that don't support page-break-inside: avoid to do so.
However, since you can fit 2.5 to 3 tables on each page and prefer not to print just a single table using page-break-after: always;, you could opt to insert a special div that forces a page break after every two tables.
So you would include <div class="pageBreak"></div> and hide it for the screen but display it for printing. And you would give it a style of page-break-after: always;. In this way, you get at least two tables per page.
Another suggestion would be to let the user decide whether or not he/she wants to print one table per page or as many as can fit (with some possibly being split over the pages). You can toggle a checkbox to add the page-break-after: always; style to the tables.
to fix this just make
#table{page-break-after:auto;}
This is a very old question, so just wanted to update that page-break-inside: avoid; is now supported in most major browsers. Though there are some quirks to making sure page-break-xxx works (NO parent at any level can have position: fixed, the element and direct parent need to be position: relative and display: block, etc.).
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside
https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside
Not all printers are created equally.
You are having problems because the printer is not controlled by either the web browser or the html code. It is controlled by the printer driver that came with the printer. This function (and its settings) belongs to the owner of the computer rendering the page, not to you.
Your code can not know in advance how many lines the printer attached to the user's system can put on a page, or how the printer will lay out a table. It will be different if a user with a different printer opens the page. Just like different screen resolutions, there are different printer pixel resolutions.
So all of the rules that apply to different screens (and their disadvantages) also apply to different printers. Not only can't you know where the printer will break a page, you can't even know how large the printed page is, in terms of how much content fits on a page.
To get all of a table (or multiple tables) onto a page, the user should select the parts he wants to print, and then use Print Selection on the printer dialog box.
I'd like to add a description field to an application that can be as long as several lines (or even paragraphs) or as short as a one-liner.
Instead of taking up a lot of screen real estate or have scroll bars, it would be preferable to have the textbox grow based on its input.
On IE6 adding Style="overflow-y:visible" accomplishes this nicely (both on display of read only, and if we are in edit mode).
However, it has no effect on Firefox, or IE7 for that matter.
Is there a relatively easy fix for this?
Thanks!
You can accomplish this using jquery if you want to go down that route. It's a nice effect, kind of like the comment textarea in facebook.
http://javascriptly.com/examples/jquery-grab-bag/autogrow-textarea.html