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}"
Related
I try to show a Popover with a template for the content:
<a role="button">
<ng-template #popTemplate>
<div class="md-form">
<textarea type="text" id="form7"
class="md-textarea md-textarea-auto form-control" mdbInput
style="padding-top: 0;">
</textarea>
<label for="form7">Kommentar</label>
</div>
</ng-template>
<i mdbPopover="popTemplate"
placement="right" mdbPopoverHeader="Dismissible popover" triggers="focus"
class="far fa-comment fa-sm">
</i>
</a>
The Problem is, that the Popover will not show the HTML-Content. Instead it shows only the text popTemplate (see attached Printscrren).
Can someone help me, what there can be the problem?
Problem
The problems is based on the third line in the html code section.
When I click my edit button/icon i go to my front-page. I quess it because of http://localhost:xxxx/ and not http://localhost:xxxx/note. I had tried for example href=/note/# but then it just reload the note page and not open the secondary content.
Html code for http://localhost:xxxx/note:
<div *ngIf="notes?.length > 0;else noNotes">
<ul *ngFor="let note of notes" class="collection">
<li class="collection-item"><strong>{{note.title}}: </strong> {{note.description}} <a href="#" class="secondary-content">
<i (click)="editNote($event, note)" class="fa fa-pencil"></i>
<i *ngIf="editState && noteToEdit.id == note.id" (click)="clearState()" class="fa fa-compress"></i>
</a>
<div *ngIf="editState && noteToEdit.id == note.id">
<form (ngSubmit)="updateNote(note)">
<div class="row">
<div class="input-field col s6">
<input type="text" placeholder="Add Title" [(ngModel)]="note.title" name="title">
</div>
<div class="input-field col s6">
<input type="text" placeholder="Add Description" [(ngModel)]="note.description" name="description">
</div>
<input type="submit" value="Update Note" class="btn orange">
<button (click)="deleteNote($event, note)" class="btn red">Delete Item</button>
</div>
</form>
</div>
</li>
</ul>
Using somedomain.com/some/path/page#domId in URL makes browser scroll down to the element <someelement id=domId>. This is commonly used to make scroll anchors on pages that have long content. Looks like you missusing it. I am not sure why would it "open anything" for you
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.
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>
i need help in getting my seach button near my text box it seems to come below the text box
program:
<div class="search-full text-right">
<a class="pull-right search-close"><i class=" fa fa-times-circle"></i></a>
<div class="searchInputBox pull-right">
<input type="search"
data-searchurl="search?="
name="q"
placeholder="start typing and hit enter to search"
class="search-input">
<button class="btn-nobg search-btn" type="submit">
<i class="fa fa-search"> </i>
</button>
</div>
</div>
As per Bootstrap standard, using an input-group is the best bet.
See: http://getbootstrap.com/components/#input-groups-buttons
Bootply Example using some of your code
HTML:
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="search"
data-searchurl="search?="
name="q"
placeholder="start typing and hit enter to search"
class="search-input form-control">
<span class="input-group-btn">
<button class="btn search-btn" type="submit">
<i class="glyphicon glyphicon-search"> </i>
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
EDIT: I've also created a Bootply fork with the 'clear' button for you, though it's slightly hacked. See Bootply