As I saw in the documentation, Font Awesome has a way of put an icon in an input placeholder, doing something like this:
<Input placeholder=' Search' />
This is what I get:
No matter what code I put after &#x, it always renders the same icon.
I'm working with ReactJS and Reactstrap library. Any suggestion? Thanks a lot (sorry 4 my english)
You can't do it this way, because the font family of the input field is using an English font. Font Awesome uses it's own font file.
One way to implement this would be to use a positioned <i> element:
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<i class="fa fa-user fa-lg"></i>
</div>
.container {
position: relative;
}
.container i {
position: absolute;
left: 15px;
top: 40px;
color: gray;
}
Related
I created a dropdown menu that opens when you click on a text box, and then when you chose a string for that dropdown list, it puts it in the text box.
I would like to make that when you hover your mouse on the strings in the dropdown, they get slightly highlighted! how can I achieve this?
<div class="row">
<div class="col-xs-12 max300" uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="remarks" class="form-control" ng-model="vm.presence.description" ng-click="vm.toggleDescriptionDropdown()" autofocus></textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions" ng-click="vm.presence.description = descr.text; vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
and the css to keep the dropdown aligned with the textbox:
#descriptionDropdown {
width: 100%;
line-height: 150%;
padding-left: 8px;
position: relative;
}
thank you very much
you can do something like this
#descriptionDropdown li:hover{
background-color:#eaeaea;
}
Change the color code to your desired color code.
And remove the padding from ul to avoid space around background when you hover. Instead, use padding on li
#descriptionDropdown li{
padding-left:8px;
}
You could add this css :
li:hover {
background-color: blue;
}
Is there a way to place material icon in an input filed as background at the right?
I know I can place an image as input filed background but material icons are not images and I think these are created by fonts.
this is what I am trying but no luck
<input type="search" class="global-search"
ng-model="vm.searchText"
ng-keyup="$event.keyCode == 13 ? vm.search() : null"
placeholder="I can help you to find anything you want!"/>
<a ng-click="vm.search()">
<i class="material-icons global-search-icon"></i> <!--search-->
</a>
the icon <i class="material-icons global-search-icon"></i> need to be the background image of <input type='text'/>
You can wrap your input and icon in a div:
<div id="divWrapper">
<input type="search" class="global-search"
ng-model="vm.searchText"
ng-keyup="$event.keyCode == 13 ? vm.search() : null"
placeholder="I can help you to find anything you want!"/>
<i class="material-icons global-search-icon"></i>
</div>
And add this styles:
#divWrapper{
display:inline;
position: relative;
}
#divWrapper i {
position: absolute;
left: 0;
}
.global-search:focus + i{
display: none;
}
I liked angular-better-placeholders in AngularJS. There were a few implementations. Here's an example: https://github.com/dmackerman/angular-better-placeholders
I can't find something similar for Angular2. If there's not a plug-and-play implementation could someone provide some basic code snippets to get us started? I can't get any real scripting control over the text inside but I've got the following:
HTML:
<div class="input-container">
<input id="test" class="col-xs-9 form-control" name="name" formControlName="name">
</div>
CSS:
.input-container {
position: relative;
float: left;
}
.input-container:after{
position: absolute;
left: 10px;
content: 'Testing';
}
Which results in this:
i saw this in a angularJS App:
Maybe he's drawing borders?? Any ideas how i could do this properly?
The color should be changeable.
I made a plunker where you can change the color of the dot with ngStyle, please take a look at it.
Using ngStyle you can also change the background-color within a controller.
HTML code:
<body ng-app="">
<input type="button" value="change color to blue" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="change color to red" ng-click="myStyle={'background-color':'red'}">
<div class="circle" ng-style="myStyle"></div>
</body>
CSS code:
.circle {
height: 20px;
width: 20px;
background-color: red;
border-radius: 10px;
}
I am using Angular 1.2.16 and testing with IE 11.
In my app, in settings.html, I have the following section:
<section class='scrollable'>
<section class='hbox stretch'>
<aside class="aside-md bg-white b-r" data-ng-controller='RecipientsCtrl'>
<div data-ng-if='inputMode' data-ng-include="'partials/recipient-form.html'"/>
</section>
</section>
where 'scrollable' class is defined as:
.scrollable {
overflow-x: hidden;
overflow-y: auto;
}
and recipient.form:
<div class="panel-body">
<form name='rform' ng-submit='addRecipient(rform)' novalidate='novalidate' role="form">
<label>Recipient's Name</label>
<input type="text" class="form-control" ng-model='recipient.name' name="name" placeholder="Enter name" required='', data-mongoose-error=''/>
....
<button type="submit" class="btn btn-sm btn-success">Add</button>
</form>
</div>
A button click puts the controller in 'inputMode'. This works fine with Chrome, Safari and Firefox. In IE, when you click the button to get into the 'inputMode' it seems like nothing happens, but when you resize the window a bit you see the form.
The following makes it work in IE:
Remove the 'scrollable' class from the section (not an option as I need that)
Display the form directly without the 'inputMode' condition (not an option)
I tried ng-show as well at no avail.
Any ideas?
Thanks.
Changing the css seems to have fixed it:
.scrollable {
overflow-x: hidden;
overflow-y: auto;
min-height: 100%;
}