Questions about Dokuwiki wrap plugin extensions

[cuttherug]

Thank you for the reply on the fastwiki plugin page! I didn't think I'd ever get ahold of you and it only took about 20 minutes haha.

I've been trying to implement your 'Full width images' and 'Evenly spaced boxes' extensions for the WRAP plugin, but I think I'm doing something incorrectly. I've tried placing it in both my /lib/styles/screen.css and my /conf/userall.css

.plugin_wrap.wrap_full_width_img img {
    max-width: 100%;
}

&.wrap_even_widths {
  display: flex;
 
  .plugin_wrap {
    flex: 1;
 
    &:not(:last-child) {
      margin-right: 12px;
    }
  }
}

For reference here is the desired effect that I'm hoping to achieve. https://www.w3schools.com/howto/howto_css_equal_height.asp

I can tell something is working, but for some reason it still seems like the last child keeps the 12px margin, and the boxes don't extend the height of the container. Also full_width_image actually makes my images shrink haha. I'm probably using it incorrectly.

The code is about 77 lines so here is a link to a test page where you can see exactly what I've done.

https://definitiveversion.com/doku.php?id=code_testing

Also, if discord or some other form of communication is easier, please let me know.

I've attached my current userall.css as a .txt in case I've implemented the code incorrectly.

userall.txt

Thank you again for your response, and your time! Sorry if this is asking too much I'm extremely new to coding (1 week) and have had a little bit of a tough time getting help in the forums.

[zioth]

One problem is that I wrote that wrong in the extensions page. :) Replace &.wrap_even_widths with .plugin_wrap.wrap_even_widths.

The extra margin you're seeing on the right, though, comes from wrap_column, not from wrap_even_widths. This is a bug in the wrap plugin. Fortunately, you can just stop using <WRAP column> and rely on <WRAP even_widths> to do the layout correctly.

[zioth]

I see your goal is to make the columns equal height too. You can get pretty close to what you want by changing the .plugin_wrap piece of my css snippet to:

  .plugin_wrap {
    flex: 1;
    display: flex;
    flex-flow: column;
    align-items: stretch;

    &:not(......the rest of it
}

[cuttherug]

Thank you for the help! I'll attempt to implement this tonight, and I'll try my best to get it right haha.

[cuttherug]

I haven't tried the code yet, but just to clarify I want the boxes to be equal height, but maybe

<WRAP box even_widths>code</WRAP>

will be correct.

[cuttherug]

Zioth, you are incredible! It worked!! oh, I almost forgot, I think I had to remove "align-items: stretch;" for some reason when that was in the code the width of the element would stretch to 100% of it's container. (I think, maybe I coded it wrong the first time)

Now I unfortunately have a new question. I noticed that it doesn't "WRAP" the next column underneath when viewing on mobile. Is there a way to add that type of functionality? It used to work with the column command so maybe it's not too difficult to implement?

with <WRAP group even_widths>
Link to web page

with <WRAP group><WRAP column>
Link to web page

And very final question, I promise! I still can't seem to get <WRAP full_width_img> to work. Is this still the correct code to place in my userall.css? For now I'm just making my images 600px and they are shrinking to fit, which is perfectly fine, but probably won't work in the future as monitors get higher resolutions.

.plugin_wrap.wrap_full_width_img img {
    max-width: 100%;
}

Thank you again for all the help. If you don't have anymore time to spend on this I totally understand, you have already helped so much!

[zioth]

wrap_even_widths is designed to fit a number of items into one row with even widths. It's not supposed to wrap to the next line. You can use flex-wrap: wrap, but the last row will stretch its items to fit, so they might have a different width from items in every other row.

You might be able to fix this using grid layout instead of flex layout. The accepted answer in this stackoverflow question might help: https://stackoverflow.com/questions/44154580/equal-width-flex-items-even-after-they-wrap.

For full_width_image, that's designed to shrink images if they're too wide, but not to grow images that are too small. I think you can fix this in your case by using width: 100% instead of max-width: 100%.

[cuttherug]

Thank you again for all the help. I will look into implementing these solutions today!