Using React-Bootstrap, how can I make an inverse glyphicon button?
I have buttons like this:
<Button onClick={this.onHome} >
<Glyphicon glyph="home" />
</Button>
but I'd like them to appear reversed.
This question asks about colors which is not the same.
Thanks!
To show a glyph on a green colored background, use bsStyle="success":
<Button onClick={this.onHome} bsStyle="success">
<Glyphicon glyph="home" />
</Button>
Another example, using a label instead of a button:
<Label bsStyle="success"><Glyphicon glyph="home" /></Label>
Some alternatives to success are warning info and for Button also link. The complete list is in the documentation at http://react-bootstrap.github.io/components.html
Related
The HTML looks like this
<div class="fd-segmented-button">
<span> Question Text</span>
<div>
<div class="fd-segmented-button-14-fd-segmented-button", id="CH_YES">
<input type="radio", name="path1_1">
<label class="fd-segmented-button-label", id="CH_YES">
::before
"Yes"
</label></div>
</div>
I am now trying to see if the Yes button is checked or selected
I am able to reach to the button by this path but since ::Before is used to identify it as selected how do I check with Cypress
Tried using
cy.xpath(//*[contains#class,'fd-segmented-button')]/span[contains(text(),"Question Text")]/..//label[contains(text(),"Yes")]).should('be.checked')
but it is not verifying it
I'm trying to add second line to v-btn text in Vuetify:
<v-btn>
<span class="first-line">hello</span>
<span class="second-line">world</span>
</v-btn>
but, it's doesn't work and show in one line!
please help me.
Two line text on buttons are against Material Design (basis of Vuetify) principles as they reduce legibility. Material Design documentation can be found here - scroll to subheader "Text Label".
You can use <br /> tag as i show below:
<v-btn>
<span class="first-line">hello</span><br />
<span class="second-line">world</span>
</v-btn>
I'm running into a font-family collision when trying to use a icon font on a <Button>.
For example:
<Button class="btn btn-primary fas" text="{{'fa-film' | fonticon}} Test"></Button>
CSS:
.fas {
font-family: 'Font Awesome 5 Free Solid', fa-solid-900;
}
When using the Nativescript themes, it defines the font-family for the .btn class. As you know iconfonts rely on font-family as well.
So in the button above how do apply one font-family to the string Test while applying another font-family to the icon?
If you use the NativeScript Angular SASS starter app and define .fas in _app-common.scss and use my button above, you will see that the icon displays as a ?. This is because .btn is overriding the font-family.
I could solve this by giving the icon font-family a higher precedence - but this would prevent me from styling the textual font on the button.
Non-nativescript implementations of font icons inside buttons solve it by being able to put an element (like <span>) as a child element to <Button>. Example here.
How can you accomplish this with NativeScript <Button>?
The answer is to use FormattedString. It allows you to apply a class to each element.
Ex:
<Button (tap)="onTap($event)" class="btn btn-primary">
<FormattedString>
<Span class="fas" text="{{'fa-film' | fonticon}}"></Span>
<Span text=" Test" fontAttributes="Bold"></Span>
</FormattedString>
</Button>
Below is my HTML
<div id="slectrole" class="collapse in" role="tabpanel" aria-labelledby="selectrole">
<div class="panel-body">
<div class="dropdown">
<input class="search-control jsSayt jsRolesFreeText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Eg: Delivery, BPO, Driver'" placeholder="Eg: Delivery, BPO, Driver" value="" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="text">
<ul class="jsSaytList jsRolesFilter">
<li id="jsFilter_subRole_1" class="checkbox-inline jsFilterSubRole jsRoleValue_1" data-value="Accountant">
<input id="Accountant" class="radio-custom jsFilterRadio jsRole" value="Accountant" name="Role" data-roleid="1" type="radio">
<label class="radio-custom-label" for="Accountant">Accountant</label>
Below is the code I am using to click the radio button:
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']")))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']").click()
The code runs ok but it does not select the radio button.
OK, so I can understand your frustration, I tried your code and wasn't able to .click() (select) the element when located via xpath. See bellow print-screen:
As you can see, it was only clicking the radio-button when issuing a .click() via a CSS-located element.
Question No.1: Are you bound to the xpath locator strategy in one way or another?
If NOT, then just use a regulat CSS selector: 'input[id="Accountant"]'.
Else, you have to figure out what is wrong with the website you are testing, or switch to another WebElement locator strategy. (e.g.: ID, Class, CSS, LinkText, etc.)
If you would opt to go with the CSS locator-strategy, then your code would look like this:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("input[id='Accountant']").click()
Alternatively, you can try to click on the <label> tag attached to the radio-button, which in my console works the same way:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("label[for='Accountant']").click()
Explanation: In a real-life scenario, you can select the radio-button both via the actual radio-button, or via its label. That's why your solution worked.
Question No.2: Why are you using such a long xpath selector?
In order to have a optimal selector, you should ALWAYS go with the shortest, combination of tags/attributes that will UNIQUELY identify your target element. Else you will be susceptible to website changes, flaky test cases, etc.
You can perform the click on the drop down and then wait for the radio button to appear, before clicking it. Hence, try following:
driver.find_element_by_xpath("//div[#id='slectrole']/div/div[#class='dropdown']/input[1]")).click()
wait = WebDriverWait(driver, 10)
wait.until(EC.visibility_of_element_located((By.XPATH, '//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]')))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]").click()
Let me know, if above code works for you.
What is the glyphicons icon for resetting a form to its original values? I have looked at the cheat sheet, Bootstrap Glyphicons
The "glyphicon-refresh" icon is the closest one I see.
You can search for icons here: http://glyphicons.com/
This might be what you're looking for: <span class="glyphicon glyphicon-repeat"></span>
There doesn't seem to be one. I'm looking for the same thing myself.
The one I'm using is glyphicon-remove since there isn't a specific one.
<div class="input-group-btn">
<button class="btn btn-default" type="reset"><i class="glyphicon glyphicon-remove"></i></button>
</div>