How to avoid Overlay placeholder on top of component | Community
Skip to main content
viswac
Level 2
Sep 14, 2017 9:49 AM UTC
Solved

How to avoid Overlay placeholder on top of component

I have a template with "wcm/foundation/components/responsivegrid".

when in insert a component into the page, the "drag component here" place holder showing up on top of the component. Usually it should be at the bottom of the page.

After debugging using developer console, i found out that it's css conflict between my app css and author ui css.

How to avoid this css conflict ? or do i need to make changes in my app css (This will be my last option) ?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    VeenaVikraman
    VeenaVikramanAccepted solution
    New Participant
    Sep 15, 2017 12:36 PM UTC

    okay. is your place holder inside the parent div and is the parent div appearing properly ? Can you take a screenshare (a video grab) and show the inspect element which replicates the issue ?

    CSS issue is something which needs a working session to fix Viswac. But for now can you try adding position: relative or position:absolute and see which will work.

    View reply

    6 replies

    viswacAuthor
    Level 2
    Sep 15, 2017 2:35 PM UTC

    Thanks @Veena_7. i fixed the issue with a div applying "clear:both" at the end of the component.

    Translate
      VeenaVikraman
      VeenaVikramanAccepted solution
      New Participant
      Sep 15, 2017 12:36 PM UTC

      okay. is your place holder inside the parent div and is the parent div appearing properly ? Can you take a screenshare (a video grab) and show the inspect element which replicates the issue ?

      CSS issue is something which needs a working session to fix Viswac. But for now can you try adding position: relative or position:absolute and see which will work.

      Translate
      viswacAuthor
      Level 2
      Sep 15, 2017 9:05 AM UTC

      @Veena_7  pls see read above answer.

      Translate
      viswacAuthor
      Level 2
      Sep 15, 2017 9:04 AM UTC

      I am not allowed to post complete css, but to show i am using following css class

      .le_getstarted_carosuelCon{ width:100%;  float:left;  min-height:243px;  border-bottom:1px solid #eee}

      from the above class if i remove "float: left" i can able to solve this problem and i have my css in etc/design/myapp/clientlib-myapp/css/myapp.css.

      As you can clearly see "vle_gettingstarted_carosuelContainer" name is not used by AEM author UI (As far as i know). I checked complete app css file.

      I know this may not help you to understand the problem completely, help me with you suggestion.

      Translate
      VeenaVikraman
      VeenaVikraman
      New Participant
      Sep 14, 2017 3:59 PM UTC

      This clearly says that u have some class names which is same as for Author UI used by AEM. The most genuine way to solve this issue is to fix your APP css. When designing your HTML, please make sure not to have any class names which may conflict with AEM Author UI or any other such things.

      Translate
      smacdonald2008
      smacdonald2008
      Level 10
      Sep 14, 2017 1:29 PM UTC

      What CSS are you using in your AEM App? Where are you loading it?

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...