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
Related
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.
I have a drop-down menu on my page. My goal for protractor testing is to click one of the options of this drop-down menu and have protractor check the results:
<ul class="dropdown">
<li class="nav-header">portfolio</li>
<li class="divider"></li>
<li class="dropdown-submenu"> ... </li>
<li ng-repeat="p in user.portfolios">
<!-- this is the option we will click for our testing -->
<a href ng-click="displayPortfolio(p)>Portfolio 1 </a>
</li>
<li ng-repeat="p in user.portfolios">
<a href ng-click="displayPortfolio(p)>Portfolio 2 </a>
</li>
<li ng-repeat="p in user.portfolios">
<a href ng-click="displayPortfolio(p)>Portfolio 3 </a>
</li>
</ul>
my protractor test looks something like:
it('should display relevant portfolio when clicked',function(){
ptor.ignoreSynchronization = true;
element.all(by.xpath("//a[#ng-click='displayPortfolio(p)'])).then(function(list){
list[0].click();
expect(... some assertion here);
});
ptor.ignoreSynchronization = false;
}
Just in case you were wondering, ptor.ignoreSynchronization is enabled because my web-page is constantly polling the backend for some updates.
Protractor throw the following error when I run the test:
ElementNotVisisbleError: element not visible
I don't quiet understand what this error is about. The element is surely visible since when I do view source of the page, I can see it in the DOM structure.
Kindly advice
I have handled same case by setting value directly. locate the element and set the value using "sendKeys".
Try the same for your scenario.
Have you tried using the repeater locator?
it('should display relevant portfolio when clicked',function(){
var elements = element.all(by.repeater('p in user.portfolios'));
elements.get(0).click().then(function(){
expect(... some assertion here);
});
}
Strange issue, I am struggling for couple days. I have a simple knockoutjs sortable page that binds to 2 lists as below. I would like to move copy an item from list A to B. I tried passing helper: 'clone' in options as in documentation, but it doesn’t create a copy and moves the original item.
Here is the http://jsfiddle.net/a5FL5/13/, that shows the problem. Try moving item from list A to B, and it moves the original item, and no copy is created.
I haven’t been able to figure out what the issues. Any help is appreciated.
<div class="A">
<ul data-bind="sortable: { data:stagingList.filteredTodos , options: {helper: 'clone', connectToSortable: '.okay'}}">
<li data-bind="text: itemlist"> </li>
</ul>
</div>
<div class="B">
<ul data-bind="sortable: { data: dayList.dfilteredTodos }">
<li class="okay" data-bind="text: itemlist"> </li>
</ul>
</div>
Regards
Srini
I am designing a back end for a site in Laravel 4. It will have a number of data entry forms, some of which will be broken up into tabbed pages.
For an individual view it looks like this:
<ul>
<li id='menu0' class='menu active'>Main</li>
<li id='menu1' class='menu'>Secondary</li>
<li id='menu2' class='menu'>Advanced</li>
</ul>
<div id='tab0' class='tab active'>
#include('_mainfields')
</div>
<div id='tab1' class='tab'>
#include('_secondfields')
</div>
<div id='tab2' class='tab'>
#include('_advancedfields')
</div>
Ideally, I want to convert this to a macro:
Form::tabify(['Main','Secondary','Advanced'],'_mainfields','_secondfields','_advancedfields'])
A typical #include file would contain blade code like this:
<div class='formfield'>
{{ Form::label('dress_description','Description') }}
{{ Form::input('text','dress_description') }}
</div>
Writing a macro to generate the UL portion is trivial. However, I hit a wall when it comes to the includes. I can't see how I can extract that out to the macro. The macro itself can't contain an #include, as its written in PHP. A php include wouldn't work, as the blade code in the include wouldn't get processed.
So is there another way?
You can render them directly:
View::make('your-included-template');