Component's dialog tabs are broken in AEM 6.3, CoralUi3 | Community
Skip to main content
AshishRa17
Level 2
Aug 8, 2018 3:30 PM UTC
Solved

Component's dialog tabs are broken in AEM 6.3, CoralUi3

I was migrating the sling:resourceType granite/coralUi3 properties by follwing this helpex article : Migration Guide to CoralUI 3-based — Granite UI 1.0 documentation 

Where i was trying to modify the textImage component. This article says that in AEM 6.3 layouts have been removed. so i modified my component as:

I removed the "layout" from starting. But my dialog tabs appears to be broken:

I changed all the sling:resourceType properties inside second tab according to that helpex document and after that this dialogs is showing distorted.  Also the margin in the two tabs also not looking good.

Is there problem going on with coralUi3 or something i missed here? Any suggestions would be appreciated.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    smacdonald2008
    smacdonald2008Accepted solution
    Level 10
    Aug 9, 2018 11:22 AM UTC

    Here is the link with the package that works.

    https://helpx.adobe.com/experience-manager/using/aem64_htl_movie_component.html

    Also - here is a video that shows Granite/COral component dialog looks good with tabs.

    View reply

    32 replies

    AshishRa17Author
    Level 2
    Aug 9, 2018 5:47 PM UTC

    Thanks! Scott!! That's awesome. It works fine now. Little modification but ow perfect!!

    Thanks again!

    Translate
      smacdonald2008
      smacdonald2008
      Level 10
      Aug 9, 2018 4:48 PM UTC

      It should be perfect now...

      Translate
        smacdonald2008
        smacdonald2008
        Level 10
        Aug 9, 2018 4:47 PM UTC

        Should be updated now - you should see this in Package description...

        Translate
        AshishRa17Author
        Level 2
        Aug 9, 2018 4:44 PM UTC

        That will be awesome!!  Thanks Scott!

        Translate
          smacdonald2008
          smacdonald2008
          Level 10
          Aug 9, 2018 4:35 PM UTC

          New package will ahve this dialog JCR branch - that has same look and feel - but all are coral/granite types that work

          Translate
          smacdonald2008
          smacdonald2008
          Level 10
          Aug 9, 2018 4:26 PM UTC

          I am updating again - i like our community articles to reflect best practice. The artilce will be updated within 45 mins

          Translate
          AshishRa17Author
          Level 2
          Aug 9, 2018 4:24 PM UTC

          Or may be we can keep this way for content node. But I will wait to see. If it gets changed to coral3 type specifically the sling resource property for content node    Thanks for the help though!! Appreciate that

          Translate
            smacdonald2008
            smacdonald2008
            Level 10
            Aug 9, 2018 4:10 PM UTC

            THis will be updated to reflect CORE Component dialog structure where tabs are used.

            Translate
            AshishRa17Author
            Level 2
            Aug 9, 2018 4:06 PM UTC

            please see the content node for the tab-component it is not in accordance with coral3. If you will add coral in the url the tabs will break again so this is like a mismatch now

            Translate
              AshishRa17Author
              Level 2
              Aug 9, 2018 3:57 PM UTC

              Hi I am not mixing both, but in the same compoentn you see "/apps/moviecomponent/components/content/tab-component/cq:dialog/content"

              they have used granite/ui/components/foundation/container  instead using coral.

              Please see the content node. There is some issue with the coral6.3 ui i believe.

              try to change the content node to "granite/ui/components/coral/foundation/container"  you can observe that

              Translate
                Show more replies
                Terms & ConditionsAccessibility statement

                Loading footer...