Horizontal Stack

[drpicox]

Is it possible to create elements stacked horizontally? (with line wrap when required)

ex:

var dd = {
    content: [
        'can pdfmake layout two images side by side?',
        {
            image: 'sampleImage.jpg',
            width: 150
        },
        {
            image: 'sampleImage.jpg',
            width: 150
        },
        {
            stack_horizontal: [
                {
                    image: 'sampleImage.jpg',
                    width: 150
                },
                {
                    image: 'sampleImage.jpg',
                    width: 150
                },
            ],
        }
    ],
    images: {
        building: '....

[saralkochar]

Did you ever solved this issue? I'm still in research mode and we will definitely come across this issue too.

[drpicox]

Nope, I have been computing manually the available width and using columns to fit things horizontally.

[fakenickels]

have you tried using columns?

[drpicox]

Yes, this is how I made the workaround to emulate the behaviour, but computing "by hand" the width of each column content to know when to create a new row. But I do not think that it is a fine solution, because layout should be computed by the library.

[pacificobr]

Any solution?

[jonasao]

Is it possible that you can make a table with a single column that is 100% wide, and then stack columns horizontally within this row?

[ghost]

If you play with columns and the gap it works out pretty nicely in a row

var dd = { content: [ { margin: [0,0,0,2], columnGap: 2, columns: [ { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, ] }, { margin: [0,0,0,2], columnGap: 2, columns: [ { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, { image: 'sampleImage.jpg', width: 50, height: 70 }, ] }, ], }

[xuananpham93]

Any suggest?

[jmarks-joshua]

Columns isn't a real solution though, even disregarding that it's very static. If you have 200 lines of text and you want a small image or table to appear inline with one of those lines and let's say that's happening in the middle of the line. Then columns won't have the column on the far side of the image wrap over to the start of the next line it will wrap to its columns line start.

[MussaCharles]

@drpicox I am in the same situation, Did you manage to implement that horizontal images which auto wrap at the end of page? I am in a situation where I have to implement a 2 columns grid layout of dynamic images , I tried the suggested options but none worked, @bpampuch @liborm85 any thoughts?

[drpicox]

Hi @MussaCharles, nope. I did that manually. I wrote a code that computed the width of each row, and when the row was filled I added a new one. I cannot believe that 5 years later this library is still v0.1

[MussaCharles]

Hi, @drpicox Thanks for replying. I see I will try that approach when I get back to the project. It's a pain that the feature is still not internally supported, even after all those years passed lol. I will try to dive into the project in the future when possible to see if I can do something about it. Aww btw if you still have a working code of your implementation it will be a huge time saver sharing a couple of snippets if possible!

[ErineDupont]

I've tested a new solution by modifying margins. Indeed, if you put negative margins it allows you to align elements in some way.

[ykessler]

FWIW You can fake a horizontal stack by using a single table row. Better than using regular columns as this will auto-collapse widths to content of cells.

{table: {body: [[
  {svg:'<svg viewBox="0 0 16 16"><rect width="16" height="16" /></svg>'},
  {text:'Foo'}, 
  {svg:'<svg viewBox="0 0 16 16"><rect width="16" height="16" /></svg>'},
  {text:'Bar'}
]]},layout:{defaultBorder:false}}

[Jeremias-Nater]

I need this with wrapping to create a list like this one, but it needs to wrap when there is no space left on the right side and it needs dynamic widths:

[harithaped]

I have code like this:<>

//(Icon) HeadingText

1. Text

   value

>. I need to display the icon and heading text side by side. For converting the html code to pdf I'm using html-to-pdf and then that code I'm passing as a content to in the docDefinition of the pdfMake. I tired applying many styles but I'm unable to display the icon and the heading side by side. Can any one provide me any inputs on how to achieve this?(The html code is dynamic. )