Uploaded image for project: 'PUBLIC - Liferay Alloy UI'
  1. PUBLIC - Liferay Alloy UI
  2. AUI-3086

Images nested in buttons, nested in table cells, can cause contents to break out of buttons

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.0.x
    • Fix Version/s: 2.0.x, 2.0.0.79-deprecated
    • Component/s: CSS
    • Labels:
      None
    • Environment:
      Chrome

      Description

      Markup similar to below could cause the Verylongcontent to escape from it's parent container.

      <table style="width:50px;">
      <tr>
          <td>
              <a class="btn">
                  <img src="..."> 
                  VerylongcontentVerylongcontentVerylongcontentVerylongcontent
              </a>
          </td>
      </tr>
      </table>
      

      This is caused by the rule:

      .aui img {
          max-width: 100%;
          //...
      }
      

      Not 100% sure why this happens, but I speculate that the max-width is fooling the parent to calculate it's size incorrectly, because the "max" width of the table cell has been reached. But the children do not resize, because they cannot.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              jonathan.mak Jonathan Mak
              Reporter:
              byran.zaugg Byran Zaugg (Inactive)
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Days since last comment:
                4 years, 20 weeks ago

                  Packages

                  Version Package
                  2.0.x
                  2.0.0.79-deprecated