I am building an AEM component but it is overlapping with existing components on edit page
Here's the html file:
<sly data-sly-use.template="core/wcm/components/commons/v1/templates.html"></sly>
<sly data-sly-call="${template.placeholder # isEmpty=true}"></sly>
I have also tried the following code in the html file:
<sly>
<sly data-sly-test="${wcmmode.edit}">
<div class="cq-placeholder" data-emptytext="sample component"></div>
</sly>
</sly>
But both code result in the same situation, as you can see the below screenshot, the sample component is overlapping with the "Drag Component here":
Does anyone know how to fix this issue? Based on this tutorial I think I have followed everything: https://blogs.perficient.com/2017/08/06/aem-component-placeholders-the-wcm-core-component-way/
Related
I uploaded my code into Stackblitz my code
I want to get <app-footer> view in my endlessblow.component.ts by #ViewChild (line 24) or similar adnotation but the problem is this <app-footer> is placed in app.component.html so it is not a child of endlessblow.component.html so adnotation #ViewChild will not work here. If I put <app-footer> into endlessblow.component.html it works correctly but I want it to be places in app.component.html.
Kind regards Andrzej.
I'm building landing pages with the amazing Gatsby framework (version 2.16.1).
Everything would have worked perfectly, except that I can't find a way to make changes to the HTML that's being loaded before any script is loaded (the 'over-the-fold' initial HTML).
For example, if I change the HTML's background color in Gatsby - Users can wait up to 5 seconds since the 'over-the-fold' initial HTML is displayed, until the background color is applied.
I know about gatsby-browser.js and the ability to make global CSS files, but that's no use for me as I use a different color or background-picture for each landing page.
My question is: Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Illustration: I color the background color as yellow, but the flow is like this -
HTML is first displayed (background=while) -->
3-5 seconds later -->
all scripts are loaded, and background changes to yellow
#ksav answered the question in a comment to the question! Thank you!
The answer is using a function called onRenderBody under the gatsby-ssr.js file, as explained in the article that was mentioned: https://www.gatsbyjs.org/docs/custom-html/
exports.onRenderBody = ({setBodyAttributes,pathname,}) => {
// Differentiate between the landing pages here
switch(pathname) {
case 'landing_page_a':
case 'landing_page_b':
}
// Affect the HTML that gets loaded before React here
setBodyAttributes({
style: {
backgroundColor: 'red',
},
});
}
The funny thing is, that I've already bumped into this article before, but didn't think it was relevant because it talked about server-side-rendering, and I know that Gatsby is server-less. After #ksav 's comment, I re-read it, and understood that the server-side-rendering happens during Gatsby's build process, and not during run-time (i.e. when the user enters the landing pages).
Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Yes, you can directly in the JSX React code. Google has documentation how you can optimize CSS delivery so your above-the-fold content is always styled correctly. It comes down to using inline CSS for all your components above the fold. With inline CSS your HTML elements are always styled when they are loaded because the styling is part of the HTML code.
See the React documentation for how to handle inline styles in React.
An example from the Gatsby tutorial:
src/pages/index.js
import React from "react"
export default () => (
{/* inline CSS */}
<div style={{ margin: `3rem auto`, maxWidth: 600 }}>
<h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
</div>
)
Starting out with AEM by using CRXDE, and making a structure component for a header hero component that will show a title and subtitle.
I wanted to add a cq:dialog by just copying the libs/wcm/foundation/components/title/cq:dialog component, and pasting it inside the hero component. There are two values: jcr:title and jcr:subtitle. When it comes to those values, they do display if I manually add them to my page from the contents directory.
The problem that I am facing is that the dialog is not showing at all when I hover over the hero area of the website from the editor.html view.
Is there something I am doing wrong?
Do not use jcr:subtitle. This property name appears to be outdated/invalid and will most likely throw an exception related to the node type definition. Simply use subtitle and you should be fine.
I want to override the Login module. I have created the override in the html folder, but I can't seem to find the upmost div with class="login" that is visible when viewing the original Login module with Firebug. I have searched all files in mod_login.
I want to place the following above the module:
<div class="item-page">
<div class="page-header">
<h2 itemprop="name">Login</h2>
</div>
</div>
Thanks in advance
EDIT: I'm using Joomla 3.4.6. Login_Module is in it's original state.
Based off the limited information provided...
You should only have to place the default.php file from /modules/mod_login/tmpl/ into /templates/[template_name]/html/mod_login/ to override the frontend module.
To modify the module for the administrator side, you would copy /administrator/modules/mod_loing/tmpl/default.php to /administrator/templates/[template_name]/html/mod_login/default.php
If the code you're trying to edit isn't in that file, then you may want to try looking at the com_users component which has the file: /components/com_users/views/login/tmpl/default_login.php and see if that's what you're looking for.
I am working on converting a html to angular js and one of the issue i have is, a button on the page uses ID and based of that id there is a div class that runs set of texts to be displayed accordingly.
Code that we have is something like this.
Continue
From the HTML page when the user clicks on the button continue... below code will be executed.
<div class="ContinueClicked">
text.......
</div>
I am trying to figure out a way to see how i can make it work with angular js. So when the user is clicking on the continue button, the page should display the content in div continueClicked. Should i be using any directive here? please help.
You have to adhere to AngularJS principles and conventions. Angular uses Directives for most of the DOM transformations, and Bindings for constant DOM and Model updates (two-way data bindings.)
In your case scenario you might want to have the following DOM elements (inside a Controller inside an ng-app Module, see AngularJS docs):
<!-- The button with the event handler as ng-click directive -->
<button ng-click="isContinue = true">Show continue content</button>
<!-- The content wrap with ng-show directive -->
<div class="ContinueClicked" ng-init="isContinue = false" ng-show="isContinue">
My content to be shown
</div>
You can also read and practice basic concepts following the Angular Tutorial.