I'm developing an application with symfony3. I'm using material design to customize my twig templates.
So in one of my templates, I have a hidden modal in which I'm rendering a form having a text and a select fields.
My problem is that select field didn't show the options that could be showed and that only in the modal.(if the form is rendered outside the modal it works well the problem exists when the form is rendered into the modal)
This is the link who let me open the modal :
<div class="uk-width-medium-1-3">
<div class="parsley-row"
style="padding-top: 22px;"
>
<div class="uk-input-group">
<a data-uk-modal="{target:'#modal-ajouterRue'}"><i class="material-icons md-24"></i>
</a>
</div>
</div>
</div>
This is the modal:
<div class="uk-modal" id="modal-ajouterRue">
<div class="uk-modal-dialog">
<button type="button" class="uk-modal-close uk-close"></button>
<div class="uk-modal-header"><h2>Ajouter une Rue</h2></div>
{{ render(controller("GeoTunisieBundle:Rue:new")) }}
<div class="uk-modal-footer uk-text-left">
<button type="button" class="md-btn md-btn-primary" onclick="newRue()">Save</button>
</div>
</div>
</div>
What do I have to do?
Related
I want to get any element which not have "author-name user1" and click on button on that certain item block.
For example there are too many users and every user have a drawer menu I want to open drawer menu of anyone expect my own
cy.get(".author-name").not().contains("User1").closest("button.btn").click()
<div class="item1">
<div class="slideInRight animated">
<div class="status">
<div class="status-meta">
<div class="author-name"> User1 </div>
</div>
</div>
</div>
<partie-drawer-menu>
<buton class="btn"> This is Button</buton>
<div class="menu-drawer">
<div class="content">
Menue Drawer Contents
</div>
</div>
</partie-drawer-menu>
</div>
<div class="item2">
<div class="slideInRight animated">
<div class="status">
<div class="status-meta">
<div class="author-name"> User2 </div>
</div>
</div>
</div>
<partie-drawer-menu>
<buton class="btn"> This is Button</buton>
<div class="menu-drawer">
<div class="content">
Menue Drawer Contents
</div>
</div>
</partie-drawer-menu>
</div>
<div class="item3">
<div class="slideInRight animated">
<div class="status">
<div class="status-meta">
<div class="author-name"> User3 </div>
</div>
</div>
</div>
<partie-drawer-menu>
<buton class="btn"> This is Button</buton>
<div class="menu-drawer">
<div class="content">
Menue Drawer Contents
</div>
</div>
</partie-drawer-menu>
</div>
I want to get any element which not have "author-name user1" and click on button on that certain item block.
For example there are too many users and every user have a drawer menu I want to open drawer menu of anyone expect my own
I am able to found certain element and able to click on it but not able to stop for each loop. return false is not working
any solution please
cy.get("div.author-name").each(($el, index, $list) => {
var $name = $el.text();
if ($name !== " User1") {
cy.log(index);
cy.get($el).closest("partie-feed-item").find("button.btn> img").click();
return false
}
I am able to found certain element and able to click on it but not able to stop for each loop. return false is not working
any solution pleaseSee Image Please
I wanna create horizontal sub menu when I click dropdown menu with SEMANTIC CSS. I just want like picture below. Thank you in advance!
Actually this is not a dropdown menu , you're looking for Popup , you can create your horizontal sub menu by creating first your menu button , then linking it to your Popup Content , like the following :
[Demo]
HTML
<div class="ui text menu">
<div class="item">
<img src="https://semantic-ui.com/images/new-school.jpg">
</div>
<!-- Your menu button -->
<a class="browse item">
Browse Courses
<i class="dropdown icon"></i>
</a>
<!-- /Your menu button -->
</div>
<!-- Your Popup Content -->
<div class="ui flowing basic admission popup">
<div class="ui three column relaxed divided grid">
<div class="column">
<h4 class="ui header">Business</h4>
<div class="ui link list">
<a class="item">Design & Urban Ecologies</a>
<a class="item">Fashion Design</a>
<a class="item">Fine Art</a>
<a class="item">Strategic Design</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Liberal Arts</h4>
<div class="ui link list">
<a class="item">Anthropology</a>
<a class="item">Economics</a>
<a class="item">Media Studies</a>
<a class="item">Philosophy</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Social Sciences</h4>
<div class="ui link list">
<a class="item">Food Studies</a>
<a class="item">Journalism</a>
<a class="item">Non Profit Management</a>
</div>
</div>
</div>
</div>
<!-- /Your Popup Content -->
JS(jQuery)
$('a.browse.item')
.popup({
popup : $('.ui.flowing.basic.admission.popup'),//Popup Content selector
on : 'click', //Event trigger
position : 'bottom left',
lastResort:true,
})
;
In popup settings you can choose your event trigger like on:'click' , it can be either like: focus,hover... , for more settings see Popup Settings.
[DOCS]
<%#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 ?
I'm trying to get a bootstrap 3 modal to pop in a meteor app without any success at all. Everything seems to be in place, I've scoured here and else where and it simply won't work.
The HTML is
<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
<div class="modal fade in show" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p> Hi There</p>
<div class="modal-dialog">
<div class="modal-content">
<p> Hi There again</p>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Big Image</h4>
</div>
<div class="modal-body">
<img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
</div>
</div>
</div>
</div>
</template>
Which is triggered from a click event on an image thumbnail (which is working according to console.log
The code trying to show the dialog is
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
Session.set("selectedImageId", t.data._id);
console.log("Image ID: "+ Session.get("selectedImageId"));
//var stuff=$('#projectImageModal');
//console.log(stuff);
//stuff.modal('show');
// $('#projectImageModal').modal().modal("show");
$("#projectImageModal").modal("show");
//$('#projectImageModal').modal('show');
//$('.projectImageModal').modal('show');
}
};
Which is largely pulled directly from the cfs-file-handler example (which doesn't used bootstrap and calls the modal().modal("show") version to get the modal to pop).
You can see the variations I've tried. The console shows that the event is fired, the selector seems to be working but.. the modal NEVER pops.
Thanks. Peter.
I have tried the code below and it works as expected. If I add show to class="modal fade in" the modal immediately appears. If in your case it doesn't you are probably missing something else that is not shown in the sample code.
HTML
<head>
<title>modal</title>
</head>
<body>
{{> projectImageItem}}
{{> projectImageModal}}
</body>
<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
<div class="modal fade in" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Big Image</h4>
</div>
<div class="modal-body">
<img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
</div>
</div>
</div>
</div>
</template>
<template name="projectImageItem">
<input type="button" class="open-modal" value="Show modal." />
</template>
JS
if (Meteor.isClient) {
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
$("#projectImageModal").modal("show");
}
};
}
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>