We're having a weird problem in our AEM 6.3 application.
For some reason, the link to the contact-us page gets rendered with a space at its end, making it useless.
I'm trying to figure this out but I'm kinda new to sightly (I used to be working on CQ5).
To visualize it better, the configured link in the page properties is:
/content/app-name/hk/hk/info/contact-us
And the code in the HTML/sightly page is:
<a href="${inheritedPageProperties.linkToContactUsPage # extension='html'} ">
Contact Us
</a>
While what gets rendered in the actual page is:
<a href="/hk/hk/info/contact-us%20.html">
Contact Us
</a>
This happens only in the chinese pages of the site, I'm not sure if this is relevant or just a coincidence.
At first I thought the problem could be the blank space at the end of the href attribute, but shouldn't it result in "/hk/hk/info/contact-us.html%20" then? Also why would this problem affect only the chinese language pages and not all the other languages?
AFAICT you do have a space in the page properties link:
Please remove the space in your
<a href="${inheritedPageProperties.linkToContactUsPage # extension='html'} ">
like this
<a href="${inheritedPageProperties.linkToContactUsPage # extension='html'}">
Related
I have a simple pagination that looks like
<ul class="pagination justify-content-end" th:field="*{page}">
<li class="page-item page-item disabled">
<a class="page-link" href="action">1</a>
</li>
</ul>
I would get the following behaviour with Thymeleaf. Clicking on the page and before submitting the action, the value of the th:field associated with the pagination should be changed by setting it to the th:value of the selected page. In other words, clicking on the page number should change the value of "*{page}" and then call the method. Is there any way to do that, for example, combining th:onclick with th:action?
Thymeleaf is a rendering engine, as such it can do nothing once the page is served to the end user. At best u can fill variables into javascript when rendering to achieve the desired result.
As for your described functionality the given code is far to limited or faulty to give a suggestion for a javascript solution, for one th:field on a non-input element doesn't do much. Also the shown href is just a simple href that doesnt interact in any way with the encapsulating th:field.
grails v 3.3.9, fields plugin
fighting with fields plgin and theres a problem when rendering domain objects and using bootstrap
i've got a sample here from a simple standalone page to show the problem
<p>f:display category </p>
<f:display bean="maintenanceAgreement" >
</f:display>
<hr />
<p>f:field category</p>
<f:field bean="${this.pageScope.maintenanceAgreement}" property="category">
<g:render template="/_fields/map/displayWidget" ></g:render>
</f:field>
<hr />
in essenence i have added a template in "/_fields/map/displayWidget" that renders a drop right table on a button
when you render a map field directly from your Domain object the sample table opens and you get all of the table
however when you
you can see the differences between using f.display (has clipping problem), f.field ( which seems to work) and f.all that ignores my _fields/map/_displayWidget.gsp
I dont want to have not use the fields plugin but its not working with bootstrap templating
has any one come up with a fix for this problem?
the project demo page is here
github standalone page to show rendering problem
the attached shows the output as you try each and select category property
well goldarn it another 2 days down the pan - but i have it !
I thought at first it was something to do with fields plugin processing. so i hacked a clone of plugin project locally and added some bits so i could watch it/debug step through it
in doing so i noted that my dummy web domain class page i'd cut across to the plugin didnt have the clipping problem. but the styles were not the same so i copied main.css and grails.css from ordinary project back into the plugin, then re rendered in the browser - and the clipping happened again.
so its in the css!. some very careful watching of browser and looking at the browser 'inspect' indicated that the clipping seemed to be enabled very early on in the journey.
so in my dummy page i just used
I then spent a day wandering round the various bits of fields plugin as its not that well explained anywhere.
if you look at the plugins taglib display method, by default that triggers the /templates/fields/_list.gsp. naming is a little odd but its the gsp that renders the domains persistent attributes as an ordered list - the plugins default _list.gsp looks like this
<ol class="property-list ${domainClass.decapitalizedName}">
<g:each in="${domainProperties}" var="p">
<li class="fieldcontain">
<span id="${p.name}-label" class="property-label"><g:message code="${domainClass.decapitalizedName}.${p.name}.label" default="${p.defaultLabel}" /></span>
<div class="property-value" aria-labelledby="${p.name}-label">${body(p)}</div>
</li>
</g:each>
</ol>
so after much exploration coming up through templates, from the bottom I ended up right at the top with the '
so nearly there now. back into main.css that i'd copied in. if you edit that, down around line 215 you get this style. If you comment out the overflow property - its all fixed !
.property-list .fieldcontain {
list-style: none;
/*overflow: hidden; */
zoom: 1;
}
I tried auto, scroll, and visible but that seems to much about with too much of the page so best to just comment it out.
once you do that - the rest of the rendering of your forms starts to work !! blimey one line of css for all that pain. Attached is the page using
Lastly through out all this, id ended up digging through /tracing fields plugin. What a nest that is. Not really finished here, but basically
with no body just renders a label and no content. So you either need to provide provide a body tag, say to get the value field displayed.
as
if no widget template has been defined then the renderDefaultDisplay is called which again has very limited options for controlling the rendering by falling through a 'switch (prop.type)' and basically calls either g.format (bool), g.formatDate (but no LocalDateTime/LocalDate Support) or g.fieldValue, non of which are bootstrap enabled.
if you call
these two diagrams are not beautiful but just high level pseudo code walk through for what the core tags are trying to do. One day i'll try and pretty that up but it might help you if you get stuck
I'll raise a bug for the main.css clipping directly to the grails team and see what happens, but you can comment the line out yourself if you fall foul of it.
I'm showing this thought a different URL using Dreamhost's tool for this, which, I understand, puts the whole site in a frame.
(This is the URL I serve from http://communikate.equalitytime.co.uk/)
My issue is that the links all try and open within the frame, even when that isn't helpful. More to point, linking page to Github fails because "Load denied by X-Frame-Options" (which is udnerstandable).
My question is - how can I ensure that any external links that are opened within the frame, open outside the frame?
Dreamhost's tool for this, which, I understand, puts the whole site in a frame.
That seems somewhat bizarre, you may want to contact the host about why / how they are doing this. It seems strange that they would want to have all links in a frameset. This seems like very undesirable behavior.
how can I ensure that any external links that are opened within the frame, open outside the frame?
The best way to do this is set target="_top" in the anchor elements, so you'd have to modify the HTML. For example:
<a target="_top" href="https://github.com/joereddington/CommuniKate" class="btn btn-default btn-lg">
<i class="fa fa-github fa-fw"></i>
<span class="network-name">github</span>
</a>
Alternatively you could write some JavaScript to set this on all anchor elements instead of adding it to the elements individually.
I have the following link on my website:
<a href="/pages/getting-started-step-2-of-5" title="Next Step">
<span style="text-decoration: underline;">Next Step</span>
</a>
It works fine, however, would it be possible to change it so that when the link is clicked and the new page is opened it does not automatically scroll to the top of the page? i.e. the new page is in the same position as the previous page was?
Yes, if you read about Internal links.
Yes it is possible using HTML tags.
You should be using anchors.
You can have named anchors to jump to.
<a name ="jumphere">here</a>
You can jump to named anchors by using there names after a #.
http://somedns.com/index.php#jumphere
more info
Named anchors are no longer supported in HTML5 - use id instead in HTML5 pages.
At first If something similiar to this already has been asked, I am sorry, but that is my first question here and i didn't find anything that could had helped.
Since i dont know if it's important, my doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="container"> /* container i which everything is nested */
<div id="header">
</div>
<div id="Navigation">
<a onmouseover="Bildwechsel('Galerie','HGalerie.png');"onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> //one of the links which is causing trouble
</div>
<div id="content"></div>
</div>
and that is the mouseover function (hope you don't mind the names, i'm German):
function Bildwechsel(Bild, BildSource) {
document.images[Bild].src = BildSource; /* function i use to change pictures on mouseover */
}
In my header, i have also included two versions of jQuery (that is because a plugin needs an older version to work properly) and lightbox v2. I have implemented them with var something=jQuery.noConflict();, also inserting true in one of these declarations because otherwise it wouldn't work but since everything works fine, I think there shouldn't be a problem.
My problem know is that when i click the link with href="Galerie.htm" every browser I mentioned at the beginning excluding opera (I am using version 11.62) is navigating to Galerie.htm. But in Opera it's like the Browser's only refreshing the site, so he always stays on the same page no matter what link i click. Maybe good to know: When i right-click on the link and open it in a new tab, everything works fine.
And the second question is: Although i know what doctypes are good for, how do i know which one is best to use in my case? i already did check my html markup, getting about 50 results(?) with errors like :link rel="stylesheet" type="text/css" src="something.css" > missing slash between [...] .css" and >, but when i look it up in selfhtml it's written that way. I know that i depends on the doctype if the slash is needed or not ,but do i have to look every single slash up or is it not that important? If yes how can i achieve a valid html with 0 errors?
Since I always thought a (anchor?) links are the last thing i will have problems with I have really no clue whats going on here.
Any help would be appreciated ;)
without firing up Opera and playing with all this myself.. first, in that link you need a space between your onmouseover and onmouseout attributes.
e.g.
<a onmouseover="Bildwechsel('Galerie','HGalerie.png'); "onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> <!-- btw, "//" starts a javascript comment, but not so in HTML. //one of the links which is causing trouble -->
Does that help?