So I have three bootstrap buttons in a row, all inside of a form:
a <button type="submit" class="btn btn-primary"> that submits the form
a <a class="btn btn-inverse"><i class="icon-edit icon-white"></i> Edit</a> button right next to it.
a <a class="btn btn-success"><i class="icon-plus icon-white"></i> New</a> button right next to that one.
For some reason, the "Edit" text is in gray, while the text of the other two buttons is white -- any ideas why this might be happening?
You may either look upon as suggested in #Marronsuisse comment or you can use
<a class="btn btn-inverse" style="color:#FFF">
<i class="icon-edit icon-white"></i> Edit</a>
Also, beg me pardon, but it might be looking as gray to your eyes due to it's black background..you can verify the same with this
<a class="btn btn-inverse" style="font-weight:bolder">
<i class="icon-edit icon-white"></i> Edit</a>
Related
I have an ag-grid in my html, and I want to put a button so that when I press that same ag-grid is shown but in a modal to be able to see it in more detail, but it is in the same html, and the ag-grid is exactly the same.
It can be done so that the same ag-grid is seen in the same html and controller.
Since he does not paint me anything but one.
HTML:
<div ag-grid="agGridBusqueda" class="ag-enel h113"></div>
.....
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
<div ag-grid="agGridBusqueda" class="ag-enel h113"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
No, it is not possible to render the same grid two times, in a modal and in a background. You would need to make a separate grid and update the values manually.
I also think this would be both terrible for the performance and the usability. The user would see grid-lines in the background when opening a modal (from the original grid) which would change as he modifies the modal-grid; I think this is disturbing. And you would have 2x the amount of rendered rows and input listeners on your screen.
I think the cleaner solution would be to just use one instance of ag-grid and (on button-click) assign class="modal-body" to it, making the container element float with an extended width and dimmed background.
I have a search bar at the header and wish to be able to link a click event to one icon.
Here is the header code:
<ion-nav-title>
<div class="item-input-inset" style="padding:5px">
<label class="item-input-wrapper" style="background-color:#FFF">
<i class="icon ion-ios-search placeholder-icon" style="font-size:20px"></i>
<input ng-model="search_text" type="text" placeholder="Search"
style="width:100%;height:33px"
focus-me my-enter="new_search(search_text)">
<i class="icon ion-android-close placeholder-icon" style="font-size:20px;" ng-click="clear_search_text()"></i>
</label>
</div>
</ion-nav-title>
As can be seen, there are two icons. the second one has a ng-click that never fires once tapped. In fact, when clicked, it's like i had clicked on the input.
Is there any solution for this situation?
I want to trigger a Google Tag Manager tag with the text within a div class. The text is "Accommodation offer successfully edited". I've tried element ids and classes to no success. Do you have any recommendation? Is this even possible?
There is nothing else on the page that makes it unique so I really have to go with what is inside this div
<div class="alert alert-success">
<button data-dismiss="alert" class="close close-sm" type="button">
<i class="fa fa-times"></i>
</button>
<i class="fa fa-check"></i>
Accommodation offer successfully edited
</div>
I would like for the user to be able to drag the modal box to a different position, like how it can be done with the JQuery UI dialog.
I found on the official Semantic-UI documentations, there is the setting "detachable" for modal, which seems to have the description I'm after. However, even setting it to true doesn't seem to let me drag the modal around. Could someone please help me on this?
Here's the code thus far:
var aFunction = function()
{
$('.modal').modal({detachable: true, closable: false, transition: 'fade up'});
$("#aBtn").on("click", function(){
$('.modal').modal('show');
});
}
$(document).ready( aFunction );
<div class="ui basic large modal">
<i class="close icon"></i>
<div class="header">
Archive Old Messages
</div>
<div class="content">
<div class="image">
<i class="archive icon"></i>
</div>
<div class="description">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
</div>
<div class="actions">
<div class="two fluid ui inverted buttons">
<div class="ui red basic inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green basic inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
</div>
Semantic UI does not support draggable modals at the moment like JQuery UI does.
Default value of Detachable option is already true, which means that if you open a new modal the previous one will be moved to the background (= dimmer) and is not usable anymore (visualised with darker color).
this is the dom source of the button I want to click on
<div class="footer clearFloat">
<div class="left">
</div>
<div class="right">
[P]
[-575063738]
[SB_XML]
<input class="button" value="Next step" id="dpTransportResultSelectLink[7]" type="submit">
</div>
</div>"
This is the x-path "/html/body[#id='transport-results']/div[#id='master']/div[#id='master_center']/div[#id='page_content']/div[#id='contentPad']/form[#id='fare_5']/div[2]/div[2]"
How do I frame my locator using "[SB_XML]", irrespective of the form Id?
//*[contains(text(),'[SB_XML]')]/following-sibling::input[1]
I've tested it as an xpath but not in Selenium
lemme know how it goes