I like bootstrap button group style, I don't like the active toggle. I can't disable the active state, unless I click out of the button.
How can I disable the button toggle?
can't find active class
<div class="btn-group" aria-label="..." style="margin-bottom: 20px;">
<button type="button" class="btn btn-primary" onclick="import_all_db(this)">import_all_db</button>
<button type="button" class="btn btn-primary" onclick="import_all_qcloud(this)">import_all_qcloud</button>
<button type="button" class="btn btn-primary" onclick="import_all(this)">import_all</button>
</div>
The CSS declaration you are looking for is .focus, :focus :
.btn-primary.focus, .btn-primary:focus {
color: #fff;
background-color: #286090;
border-color: #122b40;
}
overrule that if you want to change it - as in the example -> http://jsfiddle.net/w7rzqLz3/ - you could set it to have the same background-color and border-color as the other states.
Related
I'm creating a bootstrap modal and I want to set the header's background color to transparent, it did work with other colors but with transparent my header's color turn black.
My CSS:
<style>
.modal-header {
background-color: transparent !important;
}
</style>
HTML:
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...abd,ajkwbldkajgwldkahgwldkjalwkjdhalkjwdhlakjwhdawdw
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
Live demo: https://codepen.io/spuft/pen/KKzZvBa
This is because the parent element .modal-content has a background-color of #161415 (which is close to black like what you described).
Since your header is transparent, it will not have a background-color on its own but the parent has a background-color so that's what you are going to see - giving the illusion that the header has a black background color.
An analogy of this in the real world is if you place a transparent sheet of plastic at the top of a black notebook. You will still see black visually despite the plastic being at the top.
So to solve this, give your .modal-content transparent as well. Since they are transparent, the modal's overlay will be the dominant color visually.
.modal-content {
background-color: transparent;
color: white;
}
i have a div which is dynamically generated though button click.
As follows:
`
<div id="modal4#{c.requestId}" class="modal-approval-size modal fade modal1" tabindex='-1'>
<div class="modal-dialog modal_dialog"
style="background-color: #f5f3f4;">
<div class="modal-content-new modal-content">
<div class="modal-header modal_header">
<h4 class="modal-title">Confirmation Header</h4>
</div>
<div class="modal-body modal_body">
<p>Please confirm the approval by clicking Ok. If you do not wish to approve the request please click Cancel.</p>
</div>
<div class="modal_footer">
<span><a href="#"
style="color: #000000; text-decoration: underline;"
data-dismiss="modal" aria-hidden="true">Cancel(Esc)</a></span>
<button type="button" class="btn btn-primary approve_btn"
data-dismiss="modal" id="approvalConfirm" onclick="callFunction('#{c.requestId}','C','A')">OK</button>
</div>
</div>
</div>
</div>`
I want to click on the OK button through selenium WebDriver.
I am using Xpath as below:
//*[#id="approvalConfirm"]
But its not clickable and working. Can you please tell me why and how to fix it?
I am attempting to automate tests on my company's product. They use a sort of a toggle. I have the HTML and an image of the toggle below. I've found a seeming answer at https://stackoverflow.com/a/24682401/901083, yielding XPath code of //div[#class='toggle btn btn-default off btn-sm'], but that div changes to "toggle btn btn-sm btn-primary" once clicked and "toggle btn btn-sm btn-default off" again when it comes back. How do I generically refer to that div no matter its setting?
HTML
<div style="width: 80px; height: 30px;" class="toggle btn btn-default off btn-sm" data-toggle="toggle">
<input data-off="O" data-on="I" data-size="small" data-toggle="toggle" data-val="true" data-val-required="The OptInReceiveEmail field is required."
data-width="80px" id="OptInReceiveEmail" name="OptInReceiveEmail" tabindex="0" value="true" type="checkbox">
<div class="toggle-group">
<label class="btn btn-primary btn-sm toggle-on">I</label><label class="btn btn-default btn-sm active toggle-off">O</label>
<span class="toggle-handle btn btn-default btn-sm"></span>
</div>
</div>
Image
Assuming there no other toggle buttons on the page, you can, for example, check for the presence of data-toggle attribute:
//div[#data-toggle]
If there are other toggle buttons and you need this particular "Email" toggle:
//div[#data-toggle][input/#id = "OptInReceiveEmail"]
I have button:
<div class="form-group pull-right">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
When I move to xs display I would like to change this Send invitations text to some search icon, how can I do this?
You need use css class .hidden-xs & .visible-xs for show & hide in responsive and non-responsive view. Try following code.
<div class="form-group pull-right">
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search visible-xs"></i><span class="hidden-xs">Send invitation</span></button>
</div>
<div class="input-group">
<button class="btn btn-default full-width">
<span class="pull-left"><i class="fa fa-sitemap"></i> Fills remaining width</span>
</button>
<div class="input-group-btn">
<input type="submit" class="btn btn-default" value="submit">
<button class="btn btn-default">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-default">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
I've used the above html to create the top button group. I would like to tweak it to achieve a button group more like the one underneath, where you don't have rounded corners on the right side of the widest button.
.full-width {
width: 100%;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.full-width span i {
margin-right: 10px;
}
In case anyone else is interested, adding these styles to my .full-width class did the trick. I'd be interested to see if anyone knows a Bootstrap 3 only way to do achieve the same appearance.