I'm working with angularJS and haml syntax and I want to hide the tooltip on mouse hover if an attribute is null, this the line that show it :
%td
%a{ ng_href: '/reports/{{decoratedReport.id}}/download'}
%i.fa.fa-download.fa-lg.dark-grey{ uib_tooltip: " {{'reports.downloaded_at' | translate}} {{ decoratedReport.last_downloaded_at | date: ('report.download_date.format.short' | translate ) }}",
tooltip_placement: 'left'}
how to add an ng_if condition inside the haml to hide just the tooltip ?
the solution is : tooltip-enable="flag" where flag is a Boolean value set in your controller
Related
I am trying to implement TinyMCE with React.js along with DRF in backend.
The tinymce Editor is saving data along with html elements in DB. Main issue i am facing here when I try
to display data in frontend, it displays html tags too.(also, in browser inspect elements it
is showing as a single string, here I have attached a screenshot)
How do I display data in proper html format as intended to do without displaying those html tags in frontend?
Here is settings for tinymce
import { Editor } from '#tinymce/tinymce-react';
handleEditorChange = (e) => {
this.setState({
content: e.target.getContent({ format: 'html' })
})
}
<Editor
apiKey="t80f2hbf54gftyp5lr9wre6ud85z5o12gf54kjaywq10bk1gue"
init={{
selector: 'textarea',
plugins: ['advlist autolink autosave lists link image charmap print preview hr anchor
pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table directionality','emoticons template paste
textpattern imagetools codesample toc help'],
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright
alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
image_advtab: true,
file_browser_callback_types: 'image',
valid_elements: '*[*]',
branding: false,
height: 400,
contextmenu: 'formats | link image',
forced_root_block: false,
}}
name='content'
onChange={this.handleEditorChange}
/>
React will not render a string of HTML on its own. From their documentation:
dangerouslySetInnerHTML is React’s replacement for using innerHTML in
the browser DOM. In general, setting HTML from code is risky because
it’s easy to inadvertently expose your users to a cross-site scripting
(XSS) attack. So, you can set HTML directly from React, but you have
to type out dangerouslySetInnerHTML and pass an object with a __html
key, to remind yourself that it’s dangerous.
So in this case, something like:
function MyComponent() {
return <div class="blog_content" dangerouslySetInnerHTML={blog.content} />;
}
..should render the HTML content created in TinyMCE.
I have column holding the checkbox on a MVC kendo grid. When I click on the column but not on the checkbox, the checkbox position is slipping (moving towards right) and the click event is not delegating to checkbox.
I tried Change event and DataBound to suppress the click even on column but couldn't do it.
Any suggestions to disable the click event on this Kendo Grid checkbox-column or to delegate the column's click event to checkbox!
Below is the code snippet that I have used to build the checkbox column,
columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<input type='checkbox' #= (IsSelected) ? checked='checked' : '' # id=chk#=(Id)# class='exclchkbx' />").HtmlAttributes(new { style = "text-align: center;" }).Width(10).HeaderHtmlAttributes(new { style = "text-align:center;" });
Output of my grid column
Dislocated checkbox after clicking the checkbox column (but not on checkbox)
Appreciated in advance!
The reason why the checkbox position is slipping is that there is default padding applied. Instead of using the HeaderHtmlAttributes method, you can wrap up the template in a div with text-center as follows:
columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<div class=\"text-center\"><input type='checkbox' #= (IsSelected) ? checked='checked' : '' # id=chk#=(Id)# class='exclchkbx' /></div>");
I have the following html code to get angular to translate the label from dash.title and the span text from errors.correct.
<label translate="dash.title"></label>
<span class="success text-small" translate="errors.correct" translate-values="{ fieldname: 'dash.title' | translate }"></span>
my errors.correctin the i18n file is like this:
"errors": {
"correct": "The « {{fieldname}} » is correctly filled out!"
}
so my fieldname has to get the value from the label, it should be the same as the label text.
Why this setup is not working? what is the solution?
here is the solution:
translate-values="{ fieldname:'{{'dash.title' | translate}}' }"
I want to filter a list and get all the elements which have an argument equals to true. But my argument is a property and I don't know how to tell to angularjs to compute it.
{{ list | filter: {argument: true} }}
For instance if I have scope.argument = 'foo' my html should interpret it like this
{{ list | filter: {'test': true} }}
Is it possible?
I found a solution.
I create a filter in my controller
scope.isSelected = function(element) {
return element[scope.argument] === true;
}
and then I use it in my html like this
{{ (list | filter: isSelected).length }}
I would prefer to do this directly in my html but I didn't find a way to do it.
in my ng-grid options I have :
columnDefs : [
{
field : 'status',
headerClass : 'tbl-header',
displayName : 'Status',
cellTemplate : '<span tooltip="{{row.entity.note}}" tooltip-append-to-body="true" tooltip-trigger:"focus">{{row.entity.status}}</span>'
},
],
But this does not display the tooltip on the click of the column cell. However, if I remove the tooltip-trigger:"focus" then the tooltip appears on the hover.
How can i show the tooltip on the click event of the cell template?
As it explained here :
Angular-ui's tooltip does not display correctly in ng-grid
you can use
tooltip-append-to-body="true"
to append tooltip to body.