Why does adding a second Selector affect the first?
It was suggested I construct a dynamic table with the maximum number of columns I would need, then use scripts like this to remove columns and span others. I know order of execution will need to be considered, but this is 1 script. I have 3 or 4 more Classes of s that need to span the entire table.
This is more about HTML than about JS; the script is just a shortcut to add HTML attributes.
Instead of sharing your HTML here, I suggest that you press Alt+Shift+E or click the Preview HTML button to open the scripted content in an external browser. The table in the external browser should look the same as in the Designer.
Assuming your default browser is Chrome, either press Ctrl+Shift+I or right-click and choose Inspect. Then go to the AI assistance tab, and explain what you want to achieve using natural language. The AI can inspect your HTML and tell you what is happening and how you might fix it.
If what the AI is saying is too technical, try asking for an ELI5. I also do that myself sometimes if I am unfamiliar with a particular subject matter.
OK, this is starting to come together, but now my confidence is boosted and that always gets me in trouble.
All of these transaction lines occupy a single table, and a mix of style and scripting is altering how each line looks. But, since they are all 1 table, spacing is uniform. I added some padding attributes to some styles, but the account header is giving me trouble.
I would like to add some space above each account heading to separate it from accounts above, but padding increases the size of the box/border and that needs to remain unchanged. I tried adding the “margin-top” attribute to this style, but no effect. The same with the script below.
Can I do this in a script? I assume adding margin-top to the style doesn’t work because inline styles for the table overwrite CSS, but how about a script? Is my script wrong, or can this not be done in this way?
Any suggestions on how to add a little space above 1 row of a table with a specific style class?
The script is wrong. With this.attr you are adding an attribute. The result will be <td margin-top="0.1in">, which has no effect.
What you need is this.css, which sets an inline style: <td style="margin-top: 0.1in">. If this does not add a margin you can use the Styles panel to track down what is overriding the margin-top value.
The Style panel says the margin is there, but not showing on the page.
But if I change “margin-top” to “padding-top” in this script, the padding is affected. And padding would give the desired effect if this row did not have a border around it.
I also realized since this is a unique class, I could add my margin adjustment to the style sheet, but also no change is displayed. Padding can be adjusted, but the margin is locked.
Is there a style in the table itself that must be edited to allow dynamic changes to cells in a table? I have used scripts to delete cells and span them across multiple columns, but is actually changing their dimensions on the fly possible?
Depending on where that information resides, I can see several ways to achieve the desired result.
Unfortunately, adding a top margin to a table row will not work. As an alternative, you could wrap the Account No. in a <div> or <p> element and assign a class to it. You can then target that class from your stylesheet and add the required spacing there. No need for scripting.
I did try this. All the transaction lines in this table are assigned a class based on an extracted field in that row. The Account Header row already has a class, and I used the CSS to style the font, border, background color and padding. But adding a margin-top to this class in the CSS has no effect, presumably because it is part of a table?
So adjusting the margin of 1 particular table row is not possible? That is frustrating.
How about adjusting the width of each cell element in a row on the fly, based on that same extracted field. Can that be done through style or scripting?
Would it be possible to share the template along with some sample data? That would help me better understand the context and advise you better.
As margin does not work on tr elements, I wrapped the content in a div element (sitting inside the table cell) and applied the margin to the div, which creates extra white space within the cell while maintaining the border and background color on the content. No need for scripting.
Thank you for offering. I did share an earlier version of this project with jchamel, and he helped me with previous issues, but I will package up this latest version for you.
I am excited to hear you may have a solution, as I have many jobs structured like this and I need to convert them all from PlanetPress.
