Log in / Register

Forum › Bugs

inline-block and 100% width

bubu
Hi Prince developers!

Thank you for developing this tool. It's wonderful.

It trying to use Prince in this prototype project to display OpenLyrics XML with chords in pure CSS. I need some tricky formatting... I found an interesting layout bug: Inline-block element formatted to 100% width don't respect that parent box is inline-block too. See this example (chord "E/Gisz" on the end of the line, end new line in the text).

1. It's a little bit complicated, so I made a simple sample for you: https://jsfiddle.net/gLwxxvh9/2/
If you comment out 13. line ("width: 100%;") you can easier understand what happens.
I attached HTML and Prince 11 PDF output ("Sample").

2. And I made a simple test case for you: https://jsfiddle.net/qomxmcao/2/
I attached HTML and Prince 11 PDF output ("Test case").

This is the last hard issue in this prototype. If you can solve this bug, project is successful. If you find interesting this project, you can use it as sample, I'm open for that.

Gellért Gyuris
  1. inline-block&width.html‎ 0.8 kB ‎
    Sample
  2. inline-block&width.pdf‎ 19.3 kB ‎
    Sample PDF output
  3. inline-block&width_testcase.html‎ 0.5 kB ‎
    Test case
  4. inline-block&width_testcase.pdf‎ 15.8 kB ‎
    Test case PDF output
hallvord
Hi, this is an interesting issue indeed. Thanks for your very useful demos! I'll try to describe the expected rendering in more detail and push this in the direction of a developer who might be able to fix it :) I can unfortunately not at this point promise anything about when it might get fixed, but if I find a workaround I'll certainly let you know.

Announcement: repos for tests/utils

hallvord
Hi, haven't found a workaround but I've written a test case with a clear pass condition and added it here:
https://github.com/yeslogic/miscellaneous-testcases/blob/master/layout/inline-block-nesting-width-001.htm
I hope you agree that this captures the problem you're seeing.

Announcement: repos for tests/utils

bubu
Hi Hallvord,

I tested your test case. I can confirm: this is same problem. Thank you.
jeric
I think I found the same bug, but this time with input elements inside a table. The input elements are rendered as inline-block in the default xhtml stylesheet.

The following minimal case triggers the problem: 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <body>
    <table width="400" border="1">
      <col width="50%">
      <col width="50%">
      <tr>
        <td>question?</td>
        <td><input type="text" style="width: 100%" /></td>
      </tr>
    </table>
  </body>
</html>


I would expect 2 equal sized columns, instead the left column is downsized to the minimal width possible and the right column is greater than the size given for the table (I expect the size to be 400px for the right column, as it seems the width of inline-block elements are calculated based on the wrong parent, but I did not measure this)

Adding a display: block to the input type=text fixes the issue:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <body>
    <table width="400" border="1">
      <col width="50%">
      <col width="50%">
      <tr>
        <td>question?</td>
        <td><input type="text" style="display: block; width: 100%" /></td>
      </tr>
    </table>
  </body>
</html>



This displays 2 equal columns
hallvord
Hi jeric, this seems like the same problem indeed. Thanks for the test case, I simplified it a little and put it on Github here: https://github.com/yeslogic/miscellaneous-testcases/blob/master/layout/inline-block-nesting-width-002.htm

Announcement: repos for tests/utils

hallvord
(Or maybe "complexified it" I suppose.. It's useful to be able to see at a glance if the test passes or fails :))

Announcement: repos for tests/utils

seisenach
Hi,

Is this bug still open? I'm having a similar issue with version Prince 12.5

I can provide test case, but matches examples above.

Have some dives in a table, divs are set `display: inline-block` with widths to fashion a ratio bar chart.
Once Prince runs, that specific cell overflows. Can confirm it is the inline-block attribute causing the behavior.
seisenach
Update on this. I updated to 13.6 and the issues appears to be resolved.
bubu
Hi all, thanks @seisenach for updating. I can confirm that this bug is disappeared. I'm testing with Prince 13.5. I attach all test cases appeared previously here. Thanks devs!
  1. inline-block&width.pdf‎ 19.6 kB
  2. inline-block&width_testcase.pdf‎ 16.0 kB
  3. inline-block-nesting-width-001.pdf‎ 21.1 kB
  4. inline-block-nesting-width-002.pdf‎ 19.2 kB