this question relates to my previous question. I use Bootstrap 2.3.2 and Liferay 6.2 bundled with Tomcat. I would like to use modal windows created in Bootstrap 2.3.2. Thanks to answer in previous question I am able to show Bootstrap modals in Liferay. The problem is when I use dropdown menu with buttons, which open modal windows.
Button group
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Add
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="" id="addVertexModalA" onclick="$('#addVertexModal').modal();" > Vertex1 </a></li>
<li> Vertex2 </li>
</ul>
<button onclick="$('#addVertexModal').modal();">Show</button>
</div>
When I click on Vertex1 or Vertex2 button in dropdown-menu, the modal window disappears immediately after showing. If I click on Show button, it is okay.
Modal window
<div id="addVertexModal" class="modal fade" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addVertexModalHeader"> Add Vertex </h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label"> names </label>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"> Cancel </button>
Confirm
</div>
</div>
<script>
$(document).on("click","#addVertexModalB",function() {
$("#addVertexModal").modal("show");
});
</script>
I use only these resources in portal.
<header-portlet-javascript>/scripts/jquery-1.9.1.js</header-portlet-javascript>
<header-portlet-javascript>/scripts/bootstrap_2.3.2.js</header-portlet-javascript>
I would like to provide jsfiddle or something similar, but it doesn't work in Liferay system (I guess because of AlloyUI css or script files). I tried to remove dropdown-menu class and "dropdown-toggle" class with data-toggle="dropdown", but it didn't help (modal still disappears immediately after showing).
Remove href="" from your <a> tags. When you click on the list item with <a href="" ... />, it causes a GET on the page which reloads the whole page (thus causing your onclick to never execute and show the modal).
Related
After upgrading to SAP Commerce 2105 Patch 13 from 1811, components with type CMSParagraphComponent do not have img, span HTML tags and HTML tag attributes like class, style.
Before upgrade HTML was displaying in the page as following:
<div class="content">
<div class="size-guide__area active" data-js="size-guide-area">
<div>
<div class="size-guide__close" data-js="size-guide-close">
My text
<span class="icon-close-circle"></span>
</div>
</div>
</div>
</div>
My component is covered with <true class="yCmsComponent"></true> after upgrade somehow.
After upgrade HTML is displaying as following:
<true class="yCmsComponent">
<div class="content">
<div>
<div>
<div>
My Text
</div>
</div>
</div>
</div>
</true>
impex:
INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;content[lang=$lang];
;;chartParagraph;Chart Paragraph;chartParagraph;"<div class='size-guide__area' data-js='size-guide-area'>
<div>
<div class='size-guide__close' data-js='size-guide-close'>
My text
<span class='icon-close-circle'></span>
</div>
usage in tag file:
<cms:component uid="chartParagraph" evaluateRestriction="false"/>
CMSParagraphComponentRenderer class is sanitizing HTML. Rules are defined in HtmlSanitizerPolicyProvider class. It is checking a property before sanitizing. I solved issue by changing the property in storefront extension. You may customize HtmlSanitizerPolicyProvider class to have a safer solution. Changing following property may cause an issue, it is not the safest solution.
In the project.properties file of the storefront extension, add following property.
cms.components.allowUnsafeJavaScript=true
Recently a new bug came up which disabled the output window of the file select dialog.
<!-- shown in Maximilian Schwarzmuller Angular & NodeJS - The MEAN Stack Guide -->
<form [formGroup]="form" style="width: 100%">
<div class="row" [ngStyle]="{'height': editing[0] ? 'fit-content' : '200%'}">
<div class="col-12 d-flex justify-content-center" *ngIf="editing[0]">
<button mat-button [color]="'edit-color'" type="button" (click)="image.click()">Add Image</button>
</div>
<input type="file" (change)="onImagePicked($event)" (click)="clicked()" #image>
</div>
...form of image display...
</form>
whenever i call a click event in the mat-button it always gets called, same as in type="file", but the dialog in which i should select a file is never opened.
I assume the problem stems from this page being inside a mat-dialog, which is probably somehow conflicting with the browsers internal dialogs.
for now error has been seen in chrome and safari in development and production.
I am searching for a way to open a file dialog(browser) in my current page architecture.
Strange enough the issue wasn't the dialog. It was a click event called in html a bit higher up.
<h2 matRipple (click)="hamburgerClicked = !hamburgerClicked">
<i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>
i just changed it to a function
<h2 matRipple (click)="clicked()">
<i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>
and it works like a charm.
I have a search bar on my website that goes to google but it is making that web page not trustable. I have ssl and all my other pages have the little lock but the page with the search has an i with a circle around it. If i take the search off the page the little lock comes back. Can someone maybe tell me why.
<div class="wrap">
<div class="search">
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" class="searchTerm" placeholder="Search The Web"autocomplete="off" >
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</div>
How can I render a modal using express and handlebars, I have an index.js file which handles all the routes. When I'm in main.handlebars file I would like to click a button and pop out a modal with a form without changing the background page route.
You don't need to worry about your route files.
On the handlebar file first add a modal somewhere and invoke it using a button as like :
<button class="btn btn-primary " type="button" data-toggle="modal" href="" data-target="#add_food">
<i class="fa fa-plus-square-o"></i> Add Food
</button>
The modal can be as follows:
<div class="modal inmodal fade" id="add_food" tabindex="-1" role="dialog" aria-hidden="true"></div>
I have theme, and in header.tpl
<div class="nav">
<div class="container">
<div class="row">
<nav>{hook h="displayNav"}</nav>
</div>
</div>
</div>
But this is normal <ul>, <li> menu... How to make it responsive - f.e. select menu?
In Prestashop the horizontal top menu is generated by this module "blocktopmenu" in the modules folder you can find blocktopmenu.php and you can edit how the module generate the menu html