<button type="button" class="button-continue button-save frg-button color-green" data-next="#homephone-mobility-config">Choose this package</button>
<button type="button" class="button-continue button-save frg-button color-green" data-next="#homephone-mobility-config">Choose this package</button>
<button type="button" class="button-continue button-save frg-button color-green" data-next="#homephone-mobility-config">Choose this combo</button>
I have two buttons with different text in it. I am automating the testing. What CSS selectors do I have to use so that I can use it for different buttons? Its for selenium web driver selectors.
Below are the HTML for the buttons:
Button 1.
////Choose this offer///
Button 2.
////Choose this package////
Button 3.
///Choose this combo///
Thanks
How about this?
driver.findElement(By.xpath("//button[contains(., 'Choose this package']"))
Related
Have a task where I have some information in a button that needs to all be aligned to the same sides.
Its a digitized phone menu so the info on the left size is the line name and the information on the right is the lines extension. I want to align all of the extensions right.
I used buttons that activate Modals with more information. The buttons are required for the form of modal I am using. (Or at least that is what I found in research.)
Tried paragraph tricks but they broke the buttons function.
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL">2 - HPE Networking ................................................... XXXXX</button>
Try this:
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL" style="width:500px;text-align:left">2 - HPE Networking <div style="float:right">XXXX</div></button>
I am using the bootstrap button groups, and I want them to be accessible. Right now the screen reader sees them as separate buttons. I would like the screen reader to see them as a group or list of buttons.
http://getbootstrap.com/components/#btn-groups
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
I would also want the screen reader to know which button is selected but that shouldn't be very hard with the aria-checked tag.
I don't think screen reader will see them as group of buttons unless you use input type=radio and style them to look like buttons.
Also to tell which button is selected "aria-pressed" is better.
One solution I can think of is to add role="radio" to the buttons so that screen reader sees them as a group. I actually works, but I am not sure if its considered bad practice
I have a piece of code in my flask application that I want to implement a button that takes me to an specific page.
<button type="button" class="btn btn-primary btn-block">Evaluate</button>
How do I link the button? I did putting an tag wrapping it, but can I use the tag directly? (Using the tag is changing my styling)
*I did the code below, but it is not good for me
<button type="button" class="btn btn-primary btn-block">Evaluate</button>
Use <a> tag instead
Evaluate
use the href attribute to navigate to the new location.
Bootstrap will take care of presenting the <a> tag as a button with the css classes.
I am converting my bootstrap 2 site to bootstrap 3 and am a bit stuck on a particular control which is several sets of tab pages controlled by toggle buttons.
Here is an example of my working bs2 code:
http://bootply.com/97187
If I run this code in bs3, I get this:
http://bootply.com/97189
The problem as you will see is that the buttons no longer behave like a group of radio buttons. They toggle individually.
I am currently here:
http://bootply.com/97184
This looks like it works but it doesn't. The grey colour you get when you click on a button is in fact, the "I've now got the focus" colour. Click somewhere else and it goes back to white.
I really need the buttons to toggle as they did in bs2. What small thing am I neglecting here?
Your problem is in here:
<div class="well well-sm">
<span>Set A:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default active" href="#tab1" data-toggle="tab">1</button>
<button class="btn btn-sm btn-default" href="#tab2" data-toggle="tab">2</button>
</div>
<span> Set B:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default" href="#tabA" data-toggle="tab">A</button>
<button class="btn btn-sm btn-default" href="#tabB" data-toggle="tab">B</button>
<button class="btn btn-sm btn-default" href="#tabC" data-toggle="tab">C</button>
</div>
</div>
Adding the class active to the button class for tab1 seemed to prevent the buttons from toggling as you want them to. Simply removing the active class seems to fix the problem.
Demo: http://bootply.com/97199
Ok, I've been playing around quite a bit and got to an acceptable solution.
Unlike the Bootstrap 2 version, it requires a bit of JavaScript.
Here it is: http://bootply.com/97426
The only thing it doesn't do is group the button groups into a single component but this is acceptable, unless someone can find a way to do this as well.
Would be nicer if Bootstrap just worked the same way as V2 in this case.
I have created a button using
<button type="button" class="btn btn-success btn-lg ">Register</button>
How could I give a link to another page when the button is pressed?
Use a anchor instead, and you can still style it as a button..
Register
Bootply: http://www.bootply.com/99320