I'm helping a company build a website in Wix and some basic functionality just aren't supported, such as tables and tabbed containers. So I had to write it in a module, and then I had to write an editor to make it easily changeable.
I'm sort of done with it but now I'm having the issue that the Table just won't stretch.
Here's the module, pretty much hardcoded and working perfectly fine:
https://alexandersopov.github.io/wix-table
And here's the editor:
https://alexandersopov.github.io/wix-table-module-editor
The CSS is pretty much identical and except for a few wrappers, the html is pretty identical (in fact, the only difference is that for some reason, a tbody tag gets added in the table in the editor, but I've tried giving that width:100% as well but with no luck).
So in the editor, there's a preview window where you can see the table under "specifikationer" and it's barely half of the width, even though inspecting it tells you it's suppose to be 100% (and indeed the inspector identifies it as such) and when I copy/paste the raw code into an empty .html document and check that out I get the same result.
I've been stuck at this for hours and can't for the life of me understand where this problem stems from.
Your table has the .active-content class applied, which changes its display type to inline-block. Try changing the class to something which sets it to table or inline-table.
Related
I have html like
<table>
<tbody></tbody>
</table>
This template is getting converting to PDF with puppeteer where my tabular data is splitting across two pages however i dont want tabular data to split across the pages
I have tried all the solutions of SO for this issue https://github.com/puppeteer/puppeteer/issues/6366
but still I am not able to find the solution
I have tried page-break-inside :avoid in tbody/tr its not working
I know this css works on block level element so I have tried with wrapping the table in div and applied that css on div still table is breaking in pages
Please help if you have any solution
First of all, you need to generate your pdf for print. To do it, use this method :
await page.emulateMediaType('print');
This will allow you to control the presentation of content for print with css like break-before, see more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media
Answer
You have multiple solutions so :
If your table is small enough, you can put it on one page, with a css rule like style="page-break-before: always", to ensure that it start on a new page.
If your table is too long (most of the case for dynamics table), generate your pdf for print will repeat the table header on each page, so the pdf will still be readable. If you need to ensure that some elements groups will stay together, you can apply css rules like we saw above.
It could be an hard work to obtain precise render with puppeteer, but puppeteer is probably the best to do it for now. Be brave.
I have a site which uses the Bootstrap framework.
Unfortunately some of the classes of divs do not display in Chrome (only) & I can't figure out why.
Bootstrap sits on another PHP framework - I did not create this original code; but I can modify it easily enough.
The hidden divs are being rendered in the DOM (I can inspect them).
I've searched all references to the hidden div class (col-ad) & they all come up as nice & mundane CSS with no obvious things that could make the div hidden. No javascript references either.
If I rename the class (eg. Xcol-ad) in the DOM the div displays.
When I inspect the div I get the following:
Which is the only thing I can find which could be the culprit. Unfortunately I can't find a reference to this within any of my code.
Have tried modifying the DOM (display:block!important) without success.
When I click on the <style> tags it (I think) points to something called #shadow-root(open) at which point I'm lost. I've searched for info about this but haven't been successful (I'm not 100% sure this is even the problem) - have changed a setting within Chrome (Show user agent shadow DOM) without success.
It feels like my styling has been taken over somewhere & I don't know where.
EDIT: link to demo site where I got script - just tried looking at site with browsershots tool & ads appear even with Chrome, so may be my version(?)
That is clearly some kind of ad blocker extension, that inserts its own style rules to block/hide elements – look at the identifiers used in that selector, should be pretty obvious.
Edit: [further explanation, from comment]
The selector contains “ad” in all imaginable combinations, plus “advertisement”, “banner”, “sponsor” showing up as well. That is a typical kind of “kill ’em all (at least the most obvious ones)” attempt by an ad blocker – and that often leads to collateral damage.
You can also see .ads_320_100 there, which is targeting a specific, typical banner size; some blockers even remove all images that have that kind of “dimensions” specified in their name, for certain “ad-typical” image sizes. (Even though it makes server-side management of different image sizes easier, I’d recommend to stay away from such naming schemes – for this exact reason.)
I am developing a web application and I want the users to be able to copy some parts of the page and paste them into MS Word with minimum loss of html formatting. For example users should be able to copy only a table from the page and paste it into word with minimum loss (assume that the page contains necessary mean,scripts to select only a single table or div).
How should I develop the html so that users can copy-paste with minimum loss? For example should I prefer tags like b,i instead of css, should I prefer inline css etc.
As long as you don't rely on external CSS you're good; either inline CSS or tags such as B will do the trick.
Should probobly stick to CSS2 - no CSS3 fanciness. Only use websafe fonts of course, they have to be avaliable on the client's machine. If users will be able to copy multiple container elements you might want to design using tables rather than divs. Stick to a strict layout and don't use absolutely positioned elements and stuff like that. Aim for a strict, square and narrow layout that will fit an a4 page nicely.
If you know what your users will paste, the save option is to make that part in a seperate page so that it is easy to paste.
By default MS-Word will give the same formatting but the width is always fixed, which can cause some issues (too wide or too narrow).
Another point to consider is that copying from a website always follows the flow of the HTML and not how it may appear in the browser. So all the to be pasted data need to be adjacent in HTML.
Be careful about:
absolute positioned elements, overlays, etc.
Elements that are scripted or dynamically loaded using Ajax
Scripts will always be dropped
To test it just paste something into word and than save the word-file in HTML.
See how it looks.
I have a HTML document with many tables which I want to be printed. The problem is that sometimes, the paper end is reached in the middle of a row, so half of it is printed in one page and the rest in the next page, even cutting a single line of text in two parts.
Is there any way to avoid this?
NOTE: I have already read this question, but I need a solution which not involves CSS, because is not working at the target computer, and I can't change that.
Even with CSS, the issue is difficult due to limited browser support to CSS pagination (as can be seen from the answers to the question you refer to).
Through years, this problem has existed, and I don't think anyone has souped up an HTML trick for the purpose. There have been some tricks for trying to prevent page breaks inside a paragraph or list by placing it in a one-cell table, but this has worked occasionally only, and besides, in your case you already have a table.
So I’m afraid there is no solution, apart from using elements that cause extra vertical spacing, like a pre element containing empty lines (to push the entire table to next page—this may of course make things much worse when the parameters of the situation, like page formatting and paper size, differ from your expectations) or splitting a table into two tables, possibly with extra space between them (even more problematic).
If the target computer doesn't support (enough of) CSS, then you can create a PDF document on the server. If you set the Content-Type correctly, the browser will download the document and start the PDF reader of the system.
If this isn't possible, then there is no solution.
I am having trouble setting the width in an html excel file and then opening it in excel.
The width works perfectly in html when viewed with the major browsers, but when loaded into excel I see a big disconnect.
I spoke with other designers and they said to use the web preview technique in excel, but that is not working either. Another person suggested using the col tag and setting the attribute width, style width, and the style mso alternate width. Also it was suggested to use span, and match table width to the sum of td width which also is not working in excel, but they all seem to work great in all the browsers.
There are multiple tables, and each table has been customized for width and height.
Also I have tried to put everything under one table and set only the first row for widths which is also not working. Should I just switch to pdf.
Thanks,
Marc
I was able to fix this by loading the file in excel, adjusting all the columns and heights manually, resaving into html, and then redisplaying the file as html, and then loading the file into excel. Since my original html has certain css styles, I had to re-apply those, but the formatting widths and heights were perfect.
The only real problem with this technique is it can take a lot of time to get the formatting in html just the way you want it. I may have been faster to just save a xml, then convert from the xml into html.
FYI, I had the same issue - not being able to force the width to 1st column in HTML saved as XLS. I was using <td width="123"> too.
Actually, I was able to set the column size to some bigger value, like 50px or 100px, but couldn't set it below some minimum threshold of maybe 25-30px (I needed 1px).
It turned out that the cause for this confusion was that the content of used HTML file had another tag wrapped around it - when I removed it and left just single all started working well.
If you need to generate a well-formmatted excel file. html excel file might be a bad choice.
My final choice is: use HtmlAgilityPack to load html to DocumentNode tree, use POI to create rows and cells according to the node tree.