Duplicated Gutenberg Block content using Advance Custom Fields to create Gutenberg blocks - advanced-custom-fields

I'm using Advanced Custom Fields Gutenberg Blocks. I have a very simple block which just displays a heading, some text and a button. I want to be able to place this block on the page multiple times and so have set to allow duplicate blocks on the page with the SupportsMultiple: true
I am using get_field('heading') to retrieve the value. This works perfectly for 1 block on 1 page. But when I try two blocks the content is duplicated. Block 2 title is overwritten by Block 1 title. Block 2 is getting the data from BLock 1 instead of its own data.

Related

Wrapping html to other half of the page on page break and handling headings after the page break

I've got a table with very few columns but many rows on an html document. I'm trying to save paper during printing and I'm wondering if there is a way to wrap the table to the other half of the page.
It needs to keep the headings of the table on the other half as well like it does during a page break.
Another issue that comes up is that there are nested headers that need to repeat as well. For example:
Heading 1 Company A
Heading 1.1 Branch A
Some Data
Heading 1.2 Branch B
Some Data
Heading 2 Company B
Heading 2.1 Branch C
Some Data
Heading 2.2 Branch D
Some Data
That means that if there is still data for either of the sub heading they also need to be repeated after the page break.
I'm also trying to use base html so I can't use any libaries.
So far I have tried using the normal html table and using flex box form of a table

Is an HTML page created as a table with rows and columns which are invisible?

when i print 3 buttons they are in a single line, but is i print 10, some are shown in a new line? How does this happen. I didnt use a CSS.
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
<p></p>
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>```
Is an HTML page created as a table with rows and columns which are invisible?
No.
Not unless there is an explicit table element.
when i print 3 buttons they are in a single line, but is i print 10, some are shown in a new line? How does this happen.
By default, when multiple things are side by side, they wrap when they get to the end of the line.
It would be very hard to use most webpages if you had to scroll left and right all the time because of a lack of explicit line breaks suited for the window width you are using.
The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.
enter link description here

Move HTML tags onto a new page when printing

I'm writing a report based on data from a database, so the content is quite dynamic. I wrote a bit of code that outputs a "page-break-before:always;" on every second div tag, but because of the dynamic nature of the report, some div tags spread over the page when printed. What I want to know is, is there a way to have a div tag (or any other type of element) move down onto the new page?
An example is this:
See how the table starts on one page and then finishes on the second. In an ideal world, I would place some CSS on this that would start the table on the second page
I would use <table> element to print.
This one goes nicely from page to page.
Within a table you put some div(s) / nested table(s).
This is how I do majority of my reports.

Dynamically Populate Content Within Un-Orthodox Grid

I'm currently developing out a blog page with a 3 X 3 grid layout for content to fall into the different boxes (see attached example).
http://imageshack.us/photo/my-images/337/cssex.jpg/
The content blocks in the lighter gray are meant to be stationary, so any updated, recently added, etc. content will not affect these boxes, only the black ones. I'm trying to figure out the best approach with keeping the gray boxes stationary, but allowing the black boxes to be populated dynamically (WordPress blog entries) and floating naturally through the layout.
As of now, I'm thinking that each individual black box will query the recent post that aligns to it. So, the first black box would query the most recent post, the second black box would query the second recent post and so on.
A big order!
Here is the general idea to help get you going:
You need to make those blocks a <div> or <section> with an ID tag like this:
<section id=brief1>
(BTW, you can also use a "table" & merge cells to get that layout, just ensure you use an ID)
Then you need find a script to update the innerHTML using straight JavaScript, or a JS library like jQuery, MooTools, etc. This will allow you to inject text &/or an image inside those boxes. Example search: http://duckduckgo.com/?q=javascript+update+innerHTML+div
Once you have 1 spot updated with text, it is time to edit that script. Make an array of our ID tags, then loop though all of them to insert new content one at a time.
Good luck! If I see something pre-rolled on my travels, I'll update this thread.

Dynamically created elements from codebehind need to be inserted between specific elements

I created a method and pass the element type, id, and any inner text that instantiates a new html element. The last statement: Me.Controls.Add(element) adds it to the end of the page, but I would like it to be inserted in a specific position (between 2 divs within a form). What I am describing is very similar to this post on SO here, although it was for javascript.
Perhaps look at using a PlaceHolder control..