How can I insert a button inside the dropdown list in ui-select2? Tried to search but can't find any.
Sample image.
See ui-select2 documentation.
https://github.com/angular-ui/ui-select
You can do this instead
<div class="input-group">
<--- ui-select here --!>
<span class="input-group-btn">
<a class="btn btn-default" href="" target="_blank"><i class="glyphicon glyphicon-plus"></i></a>
</span>
</div>
Related
I am having a search icon and a search bar in a component template.
Following is the HTML code snippet:
<div class="fixed-action-btn horizontal click-to-toggle search" id="search">
<span class="menu-label"></span>
<a class="btn-floating btn-large" (click)="toggleSearchBar()">
<i class="large material-icons">search</i>
</a>
<ul *ngIf="showSearchBar">
<li class="waves-effect waves-light" id="search_form">
<form>
<div class="input-field">
<input id="search" name='filter'type="search">
<label class="label-icon" for="search">
<i class="material-icons">search</i>
</label>
<span class="close_btn" (click)="toggleSearchBar()">
<i class="material-icons">close</i>
</span>
</div>
</form>
</li>
</ul>
</div>
In the component I have a function that just toggles out the variable:
toggleSearchBar() {
this.showSearchBar = !this.showSearchBar;
}
Question : on click of the span with close_btn class, the search input text completely goes away. Even If I click the search icon. I tried debugging and checking the boolean does change. But in the view the input text box doesn't appear. Have tried the detectchanges as well.
What could be possibly wrong ?
Worked with
[ngClass]="{'active': !showSearchBar}"
I am a novice to ruby/watir and trying to automate search functionality on a webpage. When I click on the search icon, it opens a dropdown overlay that looks like a modal window, but is really just a div. When I try to set the value for the search criteria, I run into this exception -
Selenium::WebDriver::Error::InvalidElementStateError: invalid element state: Element is not currently interactable and may not be manipulated
(Session info: chrome=60.0.3112.113)
(Driver info: chromedriver=2.29.461591 (62ebf098771772160f391d75e589dc567915b233),platform=Windows NT 6.1.7601 SP1 x86_64)
Here's the code that Watir is unable to interact with -
<div class="top-search js-top-search">
<div class="container">
<form class="top-search-form" id="search" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input id="search_class" name="c" type="hidden" value="users">
<div class="input-group">
<div class="input-group-btn">
<div class="btn btn-default dropdown-toggle search_menu" data-toggle="dropdown">
<span class="la la-caret-down"></span>
<i class="la" id="selected_search">
<span>Members</span>
</i>
</div>
<ul class="dropdown-menu">
<li>
<a class="search-link" data-search="users">
<i class="la la-user"></i>
Members
</a>
</li>
<li>
<a class="search-link" data-search="groups">
<i class="la la-users"></i>
Groups
</a>
</li>
</ul>
</div>
<input type="text" name="q" id="q" class="form-control" autofocus="autofocus" placeholder="Select a category and search...">
<div class="input-group-btn">
<button class="btn-default btn header-search-btn" id="go">
<i class="la la-search"></i>
</button>
</div>
</div>
</form>
<button class="btn close_search_bar js_close_search_bar text-danger">
<i class="la la-times"></i>
</button>
</div>
</div>
So far, I've tried the following unsuccessfully -
Look up the text field by xpath and then set it's value.
Tried to see if the text field is visible - by using xpath, stepping thru each nested block until I get to the text field. Result - Text field isn't visible.
Tried #browser.windows.last.use to get on the modal window and then set the value.
Any guidance on this is very much appreciated.
I am trying to create a button group with css bootstrap framework.
I was able to create button-group with no problem. But, one of my buttons should be wrapped with a form to perform post request when clicking it.
Here is my code
<div class="btn-group btn-group-xs pull-right" role="group">
<a href="/salecategories" class="btn btn-primary" title="Show all salecategories">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
</a>
<a href="/salecategories/2/edit" class="btn btn-primary" title="Edit SaleCategory">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<form method="POST" action="/salecategories/salecategory/2" accept-charset="UTF-8" style="display: inline;" novalidate="novalidate">
<input name="_method" value="DELETE" type="hidden">
<input name="_token" value="8123RX6LbCpxo7LDdp3eettEXGzdfbS9gvzjbbWP" type="hidden">
<button type="submit" class="btn btn-danger btn-xs" title="Delete SaleCategory" onclick="return confirm("Confirm delete?")" id="sometest">
<span class="glyphicon glyphicon-trash" aria-hidden="true" title="Delete SaleCategory"></span>
</button>
</form>
</div>
The above code work but the "red button" is not aligned with the rest at the following screenshot shows.
How can I align the "red" button with the other two?
Here is a jsfiddler to allow you to tinker with the code. Note, the fiddler shows the button now connected but the screenshot shows not aligned because I am using a different font for my app.
You can wrap the whole button group in the form. That way you can keep the three buttons together side by side.
<form action="/salecategories/salecategory/2">
<div class="btn-group btn-group-xs" role="group">
Show all
Edit
<button type="submit" class="btn btn-primary">Delete</button>
</div>
</form>
I am working on a prestashop module and I am trying to use a Boostrap glyphicon as a button in my template, but it does not work and I can not figure out why.
<td>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-cloud-download"></span>
</button>
</td>
My column stays empty, prestashop documentation shows this example but it it does not work either
<div class="form-group has-warning">
<label class="control-label" for="input1">Label with warning</label>
<input type="text" class="form-control" id="input1">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
Is it something to add to prestashop ? Did I miss something ?
It depends on the button you need, for example if it's a "panel-footer" button you can use:
<button type="submit" class="btn btn-default pull-right" name="submitTest"><i class="process-icon-download"></i> Download</button>
or for link button:
<a href="#" title="Download" class="btn btn-default">
<i class="icon-cloud-download"></i> Download
</a>
In the default-bootstrap theme, prestashop doesn't use exactly the classical bootstrap glyphicon classes but some custom one.
In your example you can use
<td>
<button type="button" class="btn btn-default btn-lg">
<span class="icon icon-cloud-download"></span>
</button>
</td>
To resume you have just to replace glyphicon by icon.
enter code here
Good Luck
Say I wanted to use a glyphicon as a submit button for a form. How would I go about doing this?
To elaborate, I want no 'visible' elements of a traditional button. Just a glyphicon, as it would appear normally in text.
I have tried using <button> and <input type='button'> with the glyphicon classes, and (as one would expect), no luck.
You can use the .btn-link class to have a button appear as a text link:
<form>
...
<button type="submit" class="btn btn-link">
<span class="glyphicon glyphicon-star"></span>
</button>
</form>
See this demo fiddle
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
Give this a read