I'm using TinyMCE text editor on the webpage. In the editor when i create a list i get a correct nested list. But when seen on the page without editor all the indentations are lost. I would like to see a correct nested list but i just see a single level list(the numbers/bullets are preserved). Using TinyMCe 4.4. Why is HTML not indenting nested lists ?
<ul>
<li data-mce-style="margin: 0px;" style="margin: 0px;">dhr</br data-mce-bogus="1">
<ol><li data-mce-style="margin: 0px;" style="margin: 0px;">sgs<br data-mce-bogus="1"></li>
</ol>
</li>
<li data-mce-style="margin: 0px;" style="margin: 0px;">afa<br data-mce-bogus="1"></li>
<li data-mce-style="margin: 0px;" style="margin: 0px;">wfa<br data-mce-bogus="1"></li>
</ul>
Related
Here's my code and I want to add another css class toggleable-content to the existing code:
<sly data-sly-resource="${'item' # resourceType='components/header'}"></sly>
This code would look something like this:
<section aria-label="aria label">
<ul class="row">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
</section>
I want to remove section tag and add another css class toggleable-content to the <ul> tag. Below is what I'd like to achieve:
<ul class="row toggleable-content">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
I was wondering how to use slightly to achieve the above? I tried something below but it doesn't work:
<sly data-sly-resource="${'item' # resourceType='components/header', cssClassName='toggleable-content'}"></sly>
Assuming the section markup is managed by the included resource (components/header) then you cannot do it directly. Indirectly, with AEM, you can pass a parameter (through request attributes) and retrieve it in the components/header model, then add the section conditionally (using data-sly-unwrap for example).
Or you re-organize your code and switch from resource inclusion to template calling and pass the parameter directly using data-sly-call.
For some reason, TinyMCE is allowing an invalid attribute from Google Sheets.
Here is an example:
<tr style="height: 21px;">
<td data-sheets-hyperlink="link" data-sheets-formula="link">Foo</td>
<td data-sheets-hyperlink="link" data-sheets-formula="link">Bar</td>
<td data-sheets-hyperlink="link" data-sheets-formula="link">Foo</td>
<td data-sheets-hyperlink="link" data-sheets-formula="link">Bar</td>
<td data-sheets-hyperlink="link" data-sheets-formula="link">Foo</td>
</tr>
I already tried to set data-sheets-hyperlink and data-sheets-formula as invalid attributes using valid_elements and invalid_elements, but TinyMCE still allows it.
Any idea on how to remove these attributes as they are not useful and can be an issue for big tables?
Thanks.
It seems that TinyMCE is not removing data-* attributes
Try this fiddle with [TinyMCE][1] configured to parse as full XHTML and fill it's source code with:
<a dir="" style="color: red;" href="https://google.com" data-v-test="">TEST</a>
<ul>
<li tabindex="2" dir>List element</li>
</ul>
Output is
<p>TEST</p>
<ul>
<li>List element</li>
</ul>
Check this [answer][2].
I am trying to generate a report which gets data as html from database to be displayed as multi records in ARABIC. Data is being retrieved successfully, but the problem is when I try to display Arabic Unordered List (<ul> and <li> html tags), items are being displayed from left to right instead of right to left. Below is the output of all trials:
I have tried multiple structures but I got same result:
Trial 1:
: الأرقام هي
<ul style="direction:rtl;" dir="rtl">
<li>واحد</li>
<li>إثنان</li>
<li>ثلاثة</li>
</ul>
Trial 2:
: الأرقام هي
<ul style="direction:rtl; text-align:right;" dir="rtl">
<li>واحد</li>
<li>إثنان</li>
<li>ثلاثة</li>
</ul>
Trial 3:
: الأرقام هي
<ul style="direction:rtl; text-align:right;" dir="rtl">
<li style="direction:rtl; text-align:right;" dir="rtl">واحد</li>
<li style="direction:rtl; text-align:right;" dir="rtl">إثنان</li>
<li style="direction:rtl; text-align:right;" dir="rtl">ثلاثة</li>
</ul>
Nothing has changed in all trials, any help?
Update
Horizontal Alignment and Reading Order of crystal report formula are set to right;
I have also added a new trial where I have put the whole content in a new div, but unfortunately all text was displayed from left to right:
Trial 4:
<div style="direction:rtl; text-align: right" >
: الأرقام هي
<ul style="direction:rtl;" dir="rtl">
<li>واحد</li>
<li>إثنان</li>
<li>ثلاثة</li>
</ul>
</div>
Crystal has limited support for html interpretation.
One way to get around this is to create or get a UFL that turns the HTML to an image. Crystal can dynamically generate and load the image into the report (using the 'graphic location' property).
Here is an example using your text with a few tweaks:
I ended up by using the below:
: الأرقام هي
<ul align = "right" dir="rtl">
<li align = "right" >واحد</li>
<li align = "right" >إثنان</li>
<li align = "right" >ثلاثة</li>
</ul>
I hope this can help somebody
For on my test i need to verify highlighted text (Lexington, KY) using my protractor test.
<li id="address" class="list">
<div class="content">
<small class="mb-1">
<span>
Suite # 278
<br>
</span>
**Lexington, KY**
</small>
</li>
How to verify highlighted text using css OR cssContainingText locator?
Actually Protractor creators have put great documentation in place , and pls read it thoroughly to gain good knowledge on usage of css & cssContainingText. I will answer your question in short here - Use element(by.cssContainingText('.content','Lexington'))
UPDATE 1:
In case you want to add an assertion .. do this - expect(element(by.cssContainingText('.content','Lexington'))).toContain('Lexington, KY')
For one I am confused because it seems like you are never closing the content div...is it closed after the li is closed?
Anyway...I would simply change the HTML so that you don't need some crazy convoluted mess of a selector. I would do it like this:
<li id="address" class="list">
<div class="content">
<small class="mb-1">
<span>
Suite # 278
<br>
</span>
<cityState>Lexington, KY</cityState>
</small>
</li>
function checkCityState(){
return element(by.tagName('cityState')).getText();
}
expect(checkCityState()).toBe('Lexington, KY');
We have tabs called Community, Resources and Support which have the same section class Div Class and Span Class attributes as seen in the html code below.
How to "select" or choose one of the tabs and then traverse down the path to the links.
<section class="s-fn-item">
<div class="s-fn-wrapper-item">
<h5 class="s-fn-title-item">
<span class="s-fn-item-link">Community</span>
</h5>
<div class="s-fn-wrapper-sub-menu bg-base bg-shadow-down-medium fn- offscreen" style="display: block; height: 245px;">
<ul class="s-fn-sub-menu-item">
<li class="s-fn-promo-sub-menu-item">QA Community Home
</li>
<li class="s-fn-promo-sub-menu-item">Community Home
</li>
<li class="s-fn-promo-sub-menu-item">Community Events
</li>
</ul>
</div>
</div>
</section>
<section class="s-fn-item">
<div class="s-fn-wrapper-item">
<h5 class="s-fn-title-item">
<span class="s-fn-item-link">Resources</span>
</h5>
<div class="s-fn-wrapper-sub-menu bg-base bg-shadow-down-medium fn-offscreen" style="display: block; height: 227px;">
<ul class="s-fn-sub-menu-item">
<li class="s-fn-promo-sub-menu-item">Articles and How-Tos
</li>
<li class="s-fn-promo-sub-menu-item">Blog
</li>
Storymakers
Support
Support Home
Contact Us
Installation and Licensing
I agree with #user1433852 for using relative xpaths as they make life easier.. :) . I have formulated relative xpaths below to find the menu Community/Resources and then the xpath for a sub-menu item under them:
//span[.='Community']
This will select the 'span' element with the exact inner HTML or text as 'Community'.
//span[.='Community']/ancestor::div[#class='s-fn-wrapper-item']//a[#title='QA Community Home']
This will select the 'a' element with title 'QA Community Home' under the div element with class 's-fn-wrapper-item' which is the ancestor of the 'span' element with the exact inner HTML or text as 'Community'.
Similarly,
//span[.='Resources']
This will select the 'span' element with the exact inner HTML or text as 'Resources'.
//span[.='Resources']/ancestor::div[#class='s-fn-wrapper-item']//a[#title='Articles and How-Tos']
This will select the 'a' element with title 'Articles and How-Tos' under the div element with class 's-fn-wrapper-item' which is the ancestor of the 'span' element with the exact inner HTML or text as 'Resources'.
So, in both the cases above I am using the the primary items, i.e., Community and Resources to get to their submenu items, that are, QA Community Home and
Articles and How-Tos, respectively.