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;
}
Related
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;
}
I am using ng-repeat to list all the "zones". It works just fine on the first rendering and even when additional data from the server is added to the existing data it works without any issues or flickers. But when the "$rootScope.zones" is assigned a new value (the user can change the sort order from Alphabetical to Proximity, which sets a new value for the $rootScope.zones in that sorting order) the whole ng-repeat list goes blank for a few seconds and then works fine again.
This is not a very big issue except in the zones I have some text with CSS bubbles around. The text disappears but the bubbles remain.
How can I set the $rootScope.zones such that it doesn't create that flicker? Alternatively, how can I make sure that the "bubbles" only appear when the text is there.
This is my ng-repeat:
<ion-list class="card" ng-if="$root.currentMode.zoneBroadcast == true" can-swipe="true">
<div class="button-bar no-padding">
<button class="button bold" ng-class="{'button-calm': sortMethod === 'Alphabetically'}" ng-click="changeSortMethod('Alphabetically')">Alphabetically</button>
<button class="button bold" ng-class="{'button-calm': sortMethod === 'By Proximity'}" ng-click="changeSortMethod('By Proximity')">By Proximity</button>
</div>
<ion-item class="item no-border no-padding dark-bg" ng-repeat="zone in $root.zones track by zone.zoneName"
ng-if="checkVisibility(zone.zoneName)">
<div class="item-divider text-center">
<span>
Zone ID : <span>{{zone.zoneName}}</span>
</span>
</div>
<div class="item-body" ng-class="checkIfZoneMatches(zone.zoneName) ? 'zone-broadcast-green' : parseStringToInteger(zone.Trips.length) > 0 ? 'zone-broadcast-red' : checkIfZoneCanBookIn(zone.zoneName) ? 'zone-broadcast-yellow' : zone.Lineup.FreeList.length > 0 ? 'zone-broadcast-blue' : 'zone-broadcast-normal'">
<div class="row">
<div class="col">
<span ng-class="{'lineup free' : zone.Lineup.FreeList.length != 0}">{{zone.Lineup.FreeList.toString()}}</span>
<span ng-class="{'lineup loaded' : zone.Lineup.LoadedList.length != 0}">{{zone.Lineup.LoadedList.toString()}}</span>
<span ng-class="{'lineup accepted' : zone.Lineup.AcceptedList.length != 0}">{{zone.Lineup.AcceptedList.toString()}}</span>
<span ng-class="{'lineup offered' : zone.Lineup.OfferedList.length != 0}">{{zone.Lineup.OfferedList.toString()}}</span>
<span ng-class="{'lineup break' : zone.Lineup.BreakList.length != 0}">{{zone.Lineup.BreakList.toString()}}</span>
<span ng-class="{'lineup stc' : zone.Lineup.STCList.length != 0}">{{zone.Lineup.STCList.toString()}}</span>
</div>
</div> ...
I have tried ng-if, ng-hide, track by, etc. but nothing seems to work.
Here's the CSS I am using to create the bubbles.
.lineup{
background: white;
border-radius: 2em;
font-weight: bold;
font-size: 100%;
padding: 1%;
}
.free {
color: #00b140;
}
.loaded{
color: #6b46e5;
}
.accepted{
color: #0a9dc7;
}
.offered{
color: deeppink;
}
.break{
color: orangered;
}
.STC{
color: saddlebrown;
}
I expect the bubbles to appear only when the text is there. Moreover, when the sort order is changed by the user it should not go blank for over 2 seconds then render the template.
I would really appreciate your help.
Instead of using ng-if with ng-repeat, pipe to a filter:
SLOW
<ion-item class="item no-border no-padding dark-bg"
ng-repeat="zone in $root.zones track by zone.zoneName"
ng-if="checkVisibility(zone.zoneName)">
Faster
<ion-item class="item no-border no-padding dark-bg"
ng-repeat="zone in zones | filter : zoneFilter track by zone.zoneName">
$scope.zoneFilter = function(item) {
return $scope.checkVisibility(item);
};
For more information, see
AngularJS filter API Reference
Changing
zone.Lineup.FreeList.length != 0 to zone.Lineup.FreeList.length > 0 solved the bubble problem.
enter image description here
Here's the application interface and a part of the form is behind the side dashboard of my template
<section class="uRegion #REGION_CSS_CLASSES# clearfix" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="uRegionHeading">
<h1>#TITLE#</h1>
<span class="uButtonContainer">
#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
</span>
</div>
<div class="uRegionContent clearfix">
width: 1360px;
height: 1002px;
right: 500px;
#BODY#
</div>
</section>
Switch to theme 42. It is possible that you're using a custom theme.
I am currently editing my login page and I found that my bootstrap icon is not align as username.It supposed to be center but now it is slightly up in the username box field. how to edit to be center.
Secondly, how to set if the first time reload to the page, the icon not displayed until I start to type username.
<h3 class="form-title">Login to your account</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
</div>
<div class="form-group has-feedback" ng-class="loginForm.username.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="username">Username</label>
<input type="text" class="form-control" id="username" name="username"
ng-model="input.username" required>
<span class="glyphicon form-control-feedback"
ng-class="loginForm.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
my login page
for (I am currently editing my login page and I found that my bootstrap icon is not align as username.It supposed to be center but now it is slightly up in the username box field. how to edit to be center.)
you can set it just by padding-top or padding-bottom
for (Secondly, how to set if the first time reload to the page, the icon not displayed until I start to type username.)
you have to add JavaScript for Input on focus add css opacity 1. and by default add css opacity 0. refer below code.
CSS - .your-container-class .glyphicon { opacity: 0;}
JS - $("#username").focusin(function() {
$("#username").siblings(".glyphicon").css( "opacity", "1" );
});
You can use css to adjust element alignments (in this case the icons) by adjusting it's margin using:
.your-container-class .glyphicon {
margin-top: 15px;
}
Be sure to wrap your form to a div with a class or id to avoid all glyphicon being styled throughout your application :-)
I have this:
<ons-tabbar var="tabbar">
<ons-tabbar-item icon="search" label="Buscar" page="page2.html" active="true"><div class="badge-notification"><span class="notification">1</span></div></ons-tabbar-item>
<ons-tabbar-item icon="star-o" label="Revisões" page="page2.html">XXXXXXX<span class="notification">9</span></ons-tabbar-item>
<ons-tabbar-item icon="tag" label="Combinações" page="page2.html"><span class="notification">9</span></ons-tabbar-item>
<ons-tabbar-item icon="comments" label="Conversas" page="page2.html"><span class="notification">9</span></ons-tabbar-item> </ons-tabbar>
How I can put a badge-notification working? Like show (1) upside the button "Search"?... I can make this in CSS... But, i lost the use of tab-bar...
<div class="tab-bar">
<label class="tab-bar__item">
<input type="radio" name="tab-bar-screen2" data-role="none" checked>
<button class="tab-bar__button" data-role="none" >
<i class="tab-bar__icon fa fa-4x fa-search"></i>
<div class="tab-bar__label">Buscar</div>
</button>
</label>
<label class="tab-bar__item">
<input type="radio" name="tab-bar-screen2" data-role="none">
<button class="tab-bar__button" data-role="none" >
<i class="tab-bar__icon fa fa-4x fa-star-o"></i>
<div class="tab-bar__label">Revisões</div>
<span class="notification">8</span>
</button>
</label>
<label class="tab-bar__item">
<input type="radio" name="tab-bar-screen2" data-role="none">
<button class="tab-bar__button" data-role="none" >
<i class="tab-bar__icon fa fa-4x fa-tag"></i>
<div class="tab-bar__label">Combinações</div>
<span class="notification">9</span>
</button>
</label>
<label class="tab-bar__item">
<input type="radio" name="tab-bar-screen2" data-role="none" >
<button class="tab-bar__button" data-role="none" >
<i class="tab-bar__icon fa fa-4x fa-comments"></i>
<div class="tab-bar__label">Bate-Papo</div>
<span class="notification">10</span>
</button>
</label>
</div>
Anyone know too where I can find a good documentation?
Unfortunately, you cannot add badge to the tab item for the current version of OnsenUI. We will consider putting this in the next release.
However, it's possible if you use the CSS as shown in ur code above. But you can't use the function and transition of the OnsenUI framework anymore since now it's just simply OnsenUI CSS components. Therefore, you will need to write your own necessary function using JavaScript.
It's been a while since you posted your question, but since I recently had to deal with the exact same problem, here's my solution.
Onsen modifies the DOM for each ons-tab element. So, simple DOM modification (jQuery or not) didn't work because I couldn't reliably detect when the tabbar has been completely initialized.
What I did is I created a controller that sets up a function to execute every second (changeNotifications). In this function I add the notification once I have detected that tab bar has been initialized.
This is my index.html file:
<body ng-controller="MainCtrl">
<ons-tabbar var="tabbar" modifier="ios">
<ons-tab icon="ion-email" id="inbox-tab" label="{{ 'Inbox' | translate }}" page="inbox.html" active="true">
<!-- more tabs -->
</body>
In MainCtrl.js I have my "main" controller"
function _MainCtrl($scope,) {
function changeNotifications() {
var inboxTab = $('#inbox-tab');
if (!inboxTab.length) {
return; // not initialized yet
}
var notif = $('#inbox-notification');
if (!notif.length) {
$('#inbox-tab > button').append(
$('<div class="notification tabbar-notification" id="inbox-notification">5</div>'));
notif = $('#inbox-notification');
}
var numWhatever = 5;
if (numWhatever == 0) {
notif.remove();
} else {
notif.text(numWhatever);
}
}
function initNotifications() {
ons.ready(function() {
setInterval(changeNotifications, 1000);
});
}
initNotifications();
}
In addition to Onsen's notification style, I am adding the following by means of the tabbar-notification CSS class:
.tabbar-notification {
position: absolute;
margin-left: 10px;
margin-top: -44px;
min-width: 16px;
font-size: 16px;
line-height: 16px;
height: 16px;
}