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?
Related
I have a form in Angular with an input type text that I need to be able to edit by hitting the edit button.
I have 3 buttons, edit, cancel the change and save the change.
If the edit button is pressed, the input is enabled to be able to modify it, the edit button is hidden and the save and cancel buttons are shown.
If the cancel button is pressed, the change is canceled and the text that was initially displayed is shown and only the edit button is shown.
If the save button is pressed, the current changes are saved and replaced by the previous information, and only the edit field is shown again.
This is my html with a single input:
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
<button class="btn"><i class="fa fa-pencil"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-save"></i></button>
How can I get this behavior on the page? What functions should I add in component.ts?
Have toedit = true in ur *.ts file
<div class="row g-0">
<div *ngIf="!toedit">
<label for=""> {{dataNew}} </label>
<div class="float-end">
<label><i class="fas fa-pencil p-1" (click)="toedit=!toedit"></i></label>
<label><i class="fas fa-minus-circle p-1" (click)="removeLabel(k)"></i></label>
</div>
</div>
</div>
<div class="row" *ngIf="toedit">
<div class="col-10 align-self-center">
<input type="text"/>
</div>
<div class="col-1 ms-1 align-self-center">
<label><i class="fas fa-check" [(ngModal)] = "dataNew" (click)="updateLabel(dataNew)"></i></label>
</div>
</div>
Have a try on this
i am creating teacher form i want to choose images from gallery for profile , i want to change label and position of "choose image button " on the right side with label of "Choose Image" & label in same input box on left side "please select profile picture " i am using angular and bootstrap 4
This is html
<div class="form-group ">
<p class="input-group">
<i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
<label for="file">Choose file to upload</label>
<input type="file" name="pic" accept="image/* " class="form-control">
</p>
</div>
This is Css.
.form-control{
background: #000;
color: beige;
}
<div class="form-group ">
<p class="input-group">
<i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
<label for="file" class="col-sm-10 form-control">Choose file to upload</label>
<input type="file" name="pic" accept="image/* " class="col-sm-2 form-control">
</p>
</div>
Please try this way. Hope this will help you.. :)
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 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 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