Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4243

The result of hflex="min" is not sufficient if the content has Font Awesome icons

    Details

    • gh.sprint.customfield.default.name:
      ZK 8.6.2 S2

      Description

      Steps to Reproduce

      http://zkfiddle.org/sample/29rtmf/1-ZK-4243

      • Clear the browser cache first then Run the sample.
      • Check the buttons are on the same line.

      Current Result

      The buttons aren't on the same line.

      Expected Result

      The buttons should be on the same line.

      Debug Information

      If the web fonts are cached, the result will be okay.

      If web fonts are not loaded yet, they are loaded only after being used for the first time.
      The width of <i> might be changed when loaded.
      https://www.zachleat.com/foitfout/#4000,4000,4000,4000

      Workaround

      Add z-icon-fw in sclass for fixed-width icons (e.g. "z-icon-fw z-icon-search")

        Activity

        Hide
        rudyhuang rudyhuang added a comment -

        It is an expected browser behavior.
        Using fixed-width icons are preferred.
        https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

        Show
        rudyhuang rudyhuang added a comment - It is an expected browser behavior. Using fixed-width icons are preferred. https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
        Hide
        rudyhuang rudyhuang added a comment - - edited

        https://www.zkoss.org/wiki/ZK_Component_Reference/Base_Components/LabelImageElement#IconSclass

        Since the web font is loaded after the character is being displayed if there is no cache, ZK doesn't know if the web font is ready when initializing. Therefore using hflex="min" with iconSclass may not get the desired result. Moreover, the final width of icons might not be the same. To make the width of icons always be fixed, add z-icon-fw.

        Show
        rudyhuang rudyhuang added a comment - - edited https://www.zkoss.org/wiki/ZK_Component_Reference/Base_Components/LabelImageElement#IconSclass Since the web font is loaded after the character is being displayed if there is no cache, ZK doesn't know if the web font is ready when initializing. Therefore using hflex="min" with iconSclass may not get the desired result. Moreover, the final width of icons might not be the same. To make the width of icons always be fixed, add z-icon-fw.

          People

          • Assignee:
            rudyhuang rudyhuang
            Reporter:
            rudyhuang rudyhuang
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Time Tracking

              Estimated:
              Original Estimate - 4 hours
              4h
              Remaining:
              Time Spent - 3 hours Remaining Estimate - 1 hour
              1h
              Logged:
              Time Spent - 3 hours Remaining Estimate - 1 hour
              3h

                Agile