<%#include file="/libs/foundation/global.jsp"
%>
<div class="container_16">
<div class="grid_8">
<cq:include path="logo" resourceType="/apps/traningCQ5/components/logo" />
</div>
<div class="grid_8">
<div class="search_area">
<div> userinfo </div>
<div> toptoolbar </div>
<div> search </div>
<div
class="clear"></div> </div>
</div>
</div>
The above code includes logo component. This is added in header.jsp however, if I add this component anywhere else it works but not in header.
Could any please help me in this ?
Related
Hi been searching for few days now but couldnt find anything. I have an accordion that has three accordion group, I have added a button to open the next accordion but cant seem to get it working. Can some one please help. here is what I have so far
<accordion [closeOthers]="true" style="margin-top:5px;">
<accordion-group *ngFor="let registration of registrationArray; let i = index" #groupval style="margin-top:5px;" [isOpen]="registration.isAccordionOpen">
<div accordion-heading style="width:100%;">
Registrant No. {{i + 1}}
<i class="pull-right float-xs-right glyphicon"
[ngClass]="{'glyphicon-chevron-down': groupval?.isOpen, 'glyphicon-chevron-up': !groupval?.isOpen}"></i>
</div>
<form [formGroup]="myGroup" (ngSubmit)="gotoAddons(myDetails)">
<div formArrayName="myDetails">
<div class="panel-body" [formGroupName]="i">
<div style="padding-top:20px;clear:both;">
<div style="width:100%;background-color:#578ebe;border: 1px solid #7ca7cc;">
Your Address
</div>
<div style="padding-top:30px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Address Line 1</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input autofocus class="form-control" type="text" id="address" name="address" formControlName="address" required>
<div *ngIf="myGroup.controls.myDetails.controls[i].controls.address.errors && (myGroup.controls.myDetails.controls[i].controls.address.dirty || myGroup.controls.myDetails.controls[i].controls.address.touched || submitted)" class="alert alert-danger">
<div [hidden]="!myGroup.controls.myDetails.controls[i].controls.address.errors.required">
Address Line 1 is required!
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;" *ngIf="i < registrationArray.length - 1">
<div style="float:right;">
<button (click)="groupval.isOpen = !groupval.isOpen" class="btn green">Open next tab</button>
</div>
</div>
<div style="width:100%;" *ngIf="i == registrationArray.length - 1" >
<div style="float:right;">
<button type="submit" class="btn green">Continue</button>
</div>
</div>
</div>
</div>
</form>
</accordion-group>
</accordion>
Removed some code for clarification. Can some one please let me know how I can open the next accordion group on the button click. Thanks in advance
Here is a working example
plunkr
stackblitz link
stackblitz
In your case I see that you're actually just closing the opened panel and that's all. Along with this you need to open a next panel which can be done by setting its isOpen property to true.
A small plunkr with test implementation - https://stackblitz.com/edit/ngx-bootstrap-ifmpph?file=app/app.component.html
I have a piece of Sightly/HTL code as follows -
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>${properties.tooltip_textfield}</p>
</div>
</div>
</div>
Please note that ${properties.tooltip_textfield} is hard coded into the code.
I am including this code in my component like this -
<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" data-sly-unwrap></div>
Now I want to pass a parameter to data-sly-include statement so that when my HTML code is rendered, the passed parameter should be placed in place of ${properties.tooltip_textfield} .
In other words -
Calling this
<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" parameter= "Dummy Text" data-sly-unwrap></div>
Should render this -
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Dummy Text</p>
</div>
</div>
</div>
Is this possible?
Thanks in Advance!
I believe what you're after is the Sightly Template and Call feature.
templates/tooltip.html:
<template data-sly-template.tooltip="${# text}" class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>${text}</p>
</div>
</div>
</template>
component.html:
<sly data-sly-use.tooltipTmpl="templates/tooltip.html"
data-sly-call="${tooltipTmpl.tooltip # text='Sample text'}" data-sly-unwrap>
</sly>
I have a basic Bootstrap3 layout that looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Section 1</h2>
</div>
<div class="col-md-4">
<h2>Section 2</h2>
</div>
<div class="col-md-4 pull-right">
<h2>Section 3</h2>
</div>
<div class="col-md-4">
<h2>Section 4</h2>
</div>
<div class="col-md-4">
<h2>Section 5</h2>
</div>
</div>
</div>
Section 3 has a basic Contact Us form, which works fine in full screen mode... But once reduced to a smaller size the user can not enter data.
When "pull-right" is removed the form funtions correctly in all size modes but then my vertical alignments with Section 4 and Section 5 are pushed down and out of line...
I need the form to work in all screen size modes and for the verticle alignment to be consistent - any help is appreciated - thanks!
From your question it is really difficult to understand what you are trying to achieve (I mean the layout) but as I see you use .pull-right class with .col-md-X and as far as I know it is a wrong approach because all .col-md-X classes have 'float: left; width: x%;' styles. Applying 'float: right' brakes your grid.
Instead you should have a look at these classes .col-md-push-X and .col-md-pull-X More info you can find in the official docs http://getbootstrap.com/css/#grid-column-ordering
UPD try this http://plnkr.co/edit/ujbqGvGwCnht9CGmKQ1r?p=preview resize plunker result window to see the result
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h2>Section 1</h2>
</div>
<div class="col-sm-6 col-md-4 col-md-push-4">
<h2>Section 3</h2>
</div>
<div class="col-sm-6 col-md-4 col-md-pull-4">
<h2>Section 2</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<h2>Section 4</h2>
</div>
<div class="col-sm-12 col-md-4">
<h2>Section 5</h2>
</div>
</div>
</div>
We are developing a Tab Component in CQ5/AEM. The component contains 3 Tabs and each tab has one CQ5 text component to edit content.
But only the first tab's Text Component is editable as it is shown by default. The other text components which are in hidden tabs content area are not accessible to edit.
Sample code:
<div>
<div>
<div id="tabcnt1">
<div id="tab1" class="tablink">Tab 1</div>
</div>
<div id="tabcnt2">
<div id="tab2" class="tablink">Tab 2</div>
</div>
<div id="tabcnt3">
<div id="tab3" class="tablink">Tab 3</div>
</div>
</div>
<div class="plantabcontent">
<div id="plancontenttab1" class="plancontent">
<cq:include path="plandescription1" resourceType="libs/foundation/components/text" />
</div>
<div id="plancontenttab2" class="plancontent" style="display:none;">
<cq:include path="plandescription2" resourceType="libs/foundation/components/text" />
</div>
<div id="plancontenttab3" class="plancontent" style="display:none;">
<cq:include path="plandescription3" resourceType="libs/foundation/components/text" />
</div>
</div>
Script:
$(document).ready(function(){
$('.tablink').click(function(){
$(".tablink").removeClass('selecttab').addClass('plantxt');
var tabid = $(this).attr("id");
$("#"+tabid).addClass('selecttab').removeClass('plantxt');
$(".plancontent").hide();
$("#plancontent"+tabid).show();
});
});
The 'plandescription1' is visible by default and it is working fine. But the hidden text components are not working while enabling them by changing tabs.
Kindly show me some light. Thanks in advance.
It's important to load the tab components (text component) when loading the page. In case the components are disabled by default the components are not initialized by AEM. So disable the 'hidden' tabs on document.ready instead of using the style="display:none".
In the example I have added the $("div.plancontent:not(:first)").hide(); to disable all tabs except the first.
Example:
<div>
<div>
<div id="tab1" class="tablink">Tab 1</div>
<div id="plancontenttab1" class="plancontent">
<cq:include path="plandescription1" resourceType="/libs/foundation/components/text" />
</div>
</div>
<div>
<div id="tab2" class="tablink">Tab 2</div>
<div id="plancontenttab2" class="plancontent">
<cq:include path="plandescription2" resourceType="/libs/foundation/components/text" />
</div>
</div>
<div >
<div id="tab3" class="tablink">Tab 3</div>
<div id="plancontenttab3" class="plancontent">
<cq:include path="plandescription3" resourceType="/libs/foundation/components/text" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Disable all tabs except first
$("div.plancontent:not(:first)").hide();
//Set clickevent
$('.tablink').click(function(){
$(".tablink").removeClass('selecttab').addClass('plantxt');
var tabid = $(this).attr("id");
$("#"+tabid).addClass('selecttab').removeClass('plantxt');
$(".plancontent").hide();
$("#plancontent"+tabid).show();
});
});
</script>
I'm not able to resize Jasny's Fileupload form. First I made a centered span8 with offset2. Then I put a simple input form into the span and set it to 'input-block-level'. That's working fine: the input form has now a size of span8.
I want to do the same with the Jasny's Fileupload. I tried a lot, but it didn't work for me. What I need, is a function that replaces the span3 entry in class="uneditable-input span3" with some kind of auto-resizing function, that stretches the input box to span8. Replacing span3 with input-block-level also doesn't work.
Another possibility would be a fixed value for the control button (maybe span3) and a for the input field (span5).
Any ideas?
<div class="row-fluid">
<div class="container pagination-centered">
<div class="span8 offset2" style="background-color:#FFCC33">
<form class="form" action="someaction" method="post" enctype="multipart/form-data" style="background-color:#FFFFFF">
<div class="control-group">
<div class="controls">
<input type="text" id="someid" name="somename" class="input-block-level" placeholder="well stretched box">
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" />
</span>
Remove
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>