<h6 id="college" data-toggle="tooltip" title="College">
<i t-ignore="True" aria-hidden="false" class="fa fa-university"></i><t t-raw="person.college.name"/>
</h6>
Above is a line of code I am writing and see how it is rendering, the icon is hidden. May I please know the reasons?
<h6 id = "college" data-toggle = "tooltip" title = "College">
<i aria-hidden = "true" class = "fa fa-university"> </i> College of Science and Technology
</ h6 >
Related
I want to toggle this fontawesome icons
<i class="fa-solid fa-heart"></i> //when active
<i class="fa-regular fa-heart"></i> //when not active
This is my code
<i class="fs-5"
role="button"
#click="!active"
:class="[active ? 'fa-solid fa-heart' : 'fa-regular fa-heart'] "
></i>
my script
data() {
return {
active: false,
}
},
You could set active to false/true like active=!active and refactor fa-heart class:
<i class="fs-5"
role="button"
#click="active = !active"
:class="['fa-heart',active ? 'fa-solid' : 'fa-regular'] "
></i>
Change your code like this:
<button :class="active ? 'fa-solid' : 'fa-regular'" class="fs-5 fa-heart" style="appearance: none;" #click="active = !active" />
i have json file for translate ( en.json ) and this line :
{
"cancel order": "Hi, How can i <b> Cancel </b> ?",
}
<div class="d-flex align-items-center justify-content-center align-content-center mb-4">
<span class="description col-sm-11 col-md-7 col-lg-10">
{{ $t('cancel order') }}
</span>
</div>
now my result is " Hi, How can i Cancel "
The problem is that the html code does not apply like this code and the tags are displayed exactly without being applied.
You can use the v-html directive to rander raw html.
const htmlcontent = '<h1>Hello</h1>'
<span v-html="htmlcontent">
</span>
https://vuejs.org/guide/essentials/template-syntax.html#raw-html
use this :
<div v-html="$t('cancel order')"></div>
One observation : Using camelCase in property names consider as a best practice. Hence, use cancel order instead of cancel order.
To render your translation as an HTML message and not a static string. You can use v-html.
Template :
<span class="description col-sm-11 col-md-7 col-lg-10" v-html="$t('cancelOrder')"></span>
enter image description here
** xml
How to add custom color in selection fields
** Pythod code
priority = fields.Selection([
('clear','Clear'),
('urgent', 'Urgent'),
('normal', 'Normal'),
('lowand', 'Lowand'),
('high','High')],
copy=False, default='normal', required=True)
I don't understand your question well, but I'll try to answer it.
In the kanban view of the employee module, we can see a red or green circle depending on whether they marked their attendance or not.
However this is not a selection field, but are two images that become visible depending on the circumstances. The code is the following:
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon oe_hr_attendance_status_green" attrs="{'invisible': [('attendance_state', '=', 'checked_out')]}" aria-label="Available" title="Available"/>
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon oe_hr_attendance_status_red" attrs="{'invisible': [('attendance_state', '=', 'checked_in')]}" aria-label="Not available" title="Not available"/>
There what they give color through the class, however if we want to pass any color to it, we must do the following:
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle" style="color: #f59042;"/>
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle" style="color: #42f599;"/>
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle" style="color: #9942f5;"/>
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle" style="color: #000000;"/>
And so we will get different colors:
I don't know if this answers your question, if not, please give me more details, what widget are you using for your selection field, or copy the xml code as you have it until now.
I have one check box and two links with same classes & same Div.During the automation testing using protractor, i want to click on check box but it click on Links.
i am writing this code but its not working, please provide a solution.
Code:
element(by.id('Remember')).click();
[1
please find HTMl code:-
<div class="input-field">
<div class="pas_rembr">
<input name="remember" id="Remember" class="css-checkbox ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required" ng-model="rememberMe" type="checkbox" ng-required="true" required="required">
<!-- <label for="Remember" class="css-label">I agree with the <a class="text_link" target="_blank" ng-href="{{baseUrl}}terms-conditions">Terms & Conditions</a>.</label> -->
<label for="Remember" class="css-label">I have read and I agree with <a class="text_link" target="_blank" ng-href="/lmd/terms-conditions" href="/lmd/terms-conditions">Terms and Conditions</a> and the <a class="text_link" target="_blank" ng-href="/lmd/privacy" href="/lmd/privacy">Privacy Policy</a> of this site.</label>
</div>
<span class="errorForm ng-hide" ng-show="(memberForm.remember.$dirty || submitted) && ((memberForm.remember.$error.required))">
<span class="errorForm ng-scope ng-hide" ng-show="memberForm.remember.$error.required" translate="TERAMS_CONDITION_IS_REQUIRED">Terms and condition is required</span>
</span>
</div>
Try this:-
var el = element(by.css('label[for="Remember"]'));
browser.actions().mouseMove(el, {x: 20, y: 3}).click().perform();
For your tests, the CSS selector would be
element = $$('label.css-label > a:nth-child(2)');
This should be able to click on the second a child of the label element.
I am trying to fill in a form automatically. I have recorded a script with Selenium.
One of the field to populate is the zip code. When I start typing the code, a new window opens to suggest appropriate option (javascript autofill)
I need to select the first item the ul (cf. html below)
I am quite new to Selenium and though I have been reading the Selenium/html documentation I am totally stuck for almost 1 month on this...
Many thanks in advance for your support
My code is as follows and I received the error message "Element is not reachable by keyboard"
elem = driver.find_element_by_id("location_p")
elem.send_keys("75")
first_option = WebDriverWait(driver, 10).until(
EC.visibility_of_element_located((By.CLASS_NAME, "selected")))
first_option.send_keys(Keys.RETURN)
**HTML**
<div id="localisation_left">
<div class="line toDisable">
<label for="location_p" class="label">Ville ou code postal *</label>
<div class="field-wrapper location-container">
<div class="inputWrapper">
<i id="browserGeoloc" class="icon-geoloc icon-2x blue"></i>
<div class="loaderGif-small hidden"></div>
<input class="nude" name="location_p" id="location_p" autocomplete="off" value="Paris 75010" type="text">
<input name="zipcode" value="" type="hidden">
<input name="city" value="" type="hidden">
<script type="text/javascript">
var numberOfLocation = 1, numberOfAuthorizedLocation = 1;
var cityNewadMultipleLocation = new MultipleLocationNewad('input[name="location_p"]', numberOfLocation, numberOfAuthorizedLocation);
cityNewadMultipleLocation.cityAndZipcodeAreSelected = true;
</script>
<input name="region" value="" type="hidden">
<input name="dpt_code" value="" type="hidden">
</div>
<ul class="location-list visible" style="top: 43px;">
<li data-region="12" data-dpt-code="75" class="selected">
<span class="city" title="Paris">Paris</span> <span class="zipcode">75011</span>
</li>
<li data-region="12" data-dpt-code="75">
<span class="city" title="Paris">Paris</span> <span class="zipcode">75015</span>
</li>
<li data-region="12" data-dpt-code="75">
<span class="city" title="Paris">Paris</span> <span class="zipcode">75009</span>
</li>
<li data-region="12" data-dpt-code="75">
<span class="city" title="Paris">Paris</span> <span class="zipcode">75010</span>
</li>
<li data-region="12" data-dpt-code="75">
<span class="city" title="Paris">Paris</span> <span class="zipcode">75017</span>
</li>
You can click on the first option, instead of pressing Enter key
elem = driver.find_element_by_id("location_p")
elem.send_keys("75")
condition = EC.visibility_of_element_located((By.CSS,
"label[for='location_p'] + div ul.location-list > li"))
first_option = WebDriverWait(driver, 15).until(condition)
first_option.click()
I had a similar issue, and the above solution did not work for me (it would throw an invalid syntax error).
I first used the find_element_by_css_selector function, which selects the first occurrence of the element with given attributes. This did not work.
Then I used the find_elements_by_css_selector (notice the s), which returns a list of the elements with given attributes. There were two elements in that list. Of course the first one (with index [0]) was not accessible by keyboard: this is equivalent of doing (1) above. But the second element (with index [1]) was accessible by keyboard.
Problem solved.
Try selecting by using Xpath below
elem = driver.find_element_by_id("location_p") elem.send_keys("75")
first_option = WebDriverWait(driver, 10).until(
EC.visibility_of_element_located((By.Xpath,
".//*[#id='localisation_left']/div/div/ul/li[1]")))
first_option.click()
If anyone faces Element not reachable by keyboard issue, one can also seek below approach:
input_xpath = '//input[#type="file"][#name="files[]"][#class="class_name"]'
input_element = self.driver.find_element_by_xpath(input_xpath)
## to make element visible:
driver.execute_script('arguments[0].style = ""; arguments[0].style.display = "block"; arguments[0].style.visibility = "visible";',
input_element)
input_element.send_keys('~\Desktop\Release2.pdf')