how to display html content inside displayfield? - extjs

i have a form that contain htmleditor field...
in report module, the content/value of thoose field must be readable and printable
so i am using someone answer to make it printable..
at first, i just make it using displayfield, and just load it using getForm().setValues()
it done,..
this is the simple demo
but now i have a problem...
try to insert bullet/numbering...
and then klik "set and display"...
there is no bullet exist..
i think this is because in main.css they set li{ list-style: none;}.
how to fix it??? how to display htmleditor content in displayfield??

There is no need to include ext-all.css in printing frame. When you remove it, the bullets will be visible. Another thing - why you use this display field? You can print content right away without setting it to displayfield. Example: http://jsfiddle.net/EVYm3/5/

Related

Quill editor loading content with linebreaks issue

I'm using quill editor v 1.3.7 inside primeng Editor. There is a strange behavior with whitespaces before an element. First line is my inout, second line is the content of the editor after reloading the stored string of step 1.
<p>line1</p><p><br></p><ul><li>e1</li><li>e2</li></ul>
<p>line1</p><p><br></p><p><br></p><ul><li>e1</li><li>e2</li></ul>
So I store the content with one linebreak before the lit element, after reloading the content quill editor adds an extra linebreak. Does anybody know how to fix this?
I was facing the similar issue.
On debugging the problem, I found that the problem was occurring because of the faulty CSS.
In the styles.scss, I was trying to override the ul and ol attributes to add custom margin for block-start and block-end. This was the main culprit due to which the extra line break was automatically getting introduced on the editor at the time the data was being populated into it.
On removing the custom css, it fixed the issue.

How do I hide empty table cells when display:block on narrow screens?

On very narrow screens, tables tend to break out of their container, so for screens of 480px or less On my Joomla 3.9x site I have added css like this:
td {display: block;}
It works fine, except where there are (almost) empty cells. They do contain the code which I can't get rid of, so I cant use the :empty selector. Because the cells are now blocked (stacked), the 'empty' cells create a large gap that I don't need or want.
Any ideas, please? Ideally CSS only, but def no jQuery but possibly Javascript if I have to.
Many thanks.
I am using JCE Editor and have changed the default 'pad empty cells' from 'yes' to 'no' in Plugin Parameters > Tables. That solved my problem as the :empty selector now works.
Just use display:hidden to remove the elements from being rendered.

In SLDS, why the status bar of lightning datatable covers the date edit panel?

When I use lightning inline editable data table component, the status bar would cover the edit panel.
I think it might is a SLDS bug.
I ran into this problem as well. I agree that I think it is a CSS issue on the SLDS side.
I'm using a lightning:datatable with inline editing, and I noticed that the footer bar div with the Cancel/Save buttons is using the 'slds-docked-form-footer' class, which sets the z-index at 8000.
Crawling up from the datepicker I noticed that the "table cell" contains a section element that has inline styling setting the z-index to 7002. That section element also has a class of "slds-popover_edit", so my workaround solution was to put this into my lightning component's css file:
.THIS section.slds-popover_edit {
z-index: 9999 !important;
}
Hope this helps, or that you've found a better solution by now. I'm going to test my page to make sure this change didn't have any unintended consequences.

How do I reload md-icon in AngularJS?

I've got some colorful md-icon and wanna change it to a grayscale one (replace with a different grayscale basically) when it's disabled (and in reverse).
I can definitely use .css to see whether a button's disabled: button[disabled]:hover, but I'm struggling to see how to combine it together with angular directives (I found a similar demo which works on click: https://codepen.io/elishaterada/pen/mDCEl).
Thanks.
¿wich file you use for the md-icon, svg or another img file?
you can use ng-style,
if is SVG you do delete 'fill' inside xml svg,and play with the css propertys
but if you need change the color to div o another the next example work perfect!
https://codepen.io/Gibrain/pen/pOdpdW
i hope hel you
enter code here

I want to add text in top and bottom of angular-barcode like alternative text

I want to add text in top and bottom of angular-barcode directive like alternative text. I have already added alternative text in the bottom but want to add in the top also.
angular-barcode uses JsBarcode library. I am using canvas rendering in angular-barcode directive. I tried to add text based on this example by creating canvas object but it didnt work. If anyone has an idea how can I solve it. Please suggest me. Your help is greatly appreciated
I want to add text like this in angular-barcode
refer this link

Resources