Search Posts

Category: css3

Create OTP form. input field to be appear as separate input fields on screen

I want design something like in the Image, where a 6 digit one time password (OTP) is to be entered by user. Right now I have achieved this by 6 separate inputs and then combining values in angularjs: <input type=”text” min=”1″ max=”1″ name=”codess1″ [(ngModel)]=”codess1″ id=”code1″ #codes1=”ngModel” (keydown)=”setfocus($event)” autocomplete=”off”> <input type=”text” name=”codess2″ [(ngModel)]=”codess2″ id=”code2″ #codes2=”ngModel” (keydown)=”setfocus($event)” disabled autocomplete=”off”> <input type=”text” name=”codess3″ id=”code3″ [(ngModel)]=”codess3″ #codes3=”ngModel” (keydown)=”setfocus($event)” disabled autocomplete=”off”> <input type=”text” name=”codess4″ id=”code4″ [(ngModel)]=”codess4″ #codes4=”ngModel” (keydown)=”setfocus($event)” disabled autocomplete=”off”> […]

high light latest file while uploading document and scroll bar should be move as per document

i am trying to achieve the functionality of move scroll bar as per new upload, when i am uploading any document at that time i am high lighting that document,suppose i have 20 document in my list then i am uploading 21th document that time scroll bar should move to that document means it should move as per new document,currently i am showing latest document through high lighting but scroll bar is not moving,if somebody […]

conditional font size in list element

I am rendering a list in html and i have to display bigger font size based on attributes. for example- <li ng-repeat=”i in items | filter:searchString”> <p>{{i.name}}</p> <p>population : {{i.population}}</p> </li> if name = state1 , population =1000 // bigger font name = state2 , population =2000 // smaller font then state1 name = state3 , population = 1500 // bigger font then state1 and smaller then state2 how to acieve that? Source: AngularJS

How can I accomplish this css grid

I am trying to accomplish this grid: grid-image in a way that, if possible, not using columns (I know it is easy using columns or bootstrap) but, what I pretend is to do an ng-repeat with angular and this way I don’t have to worry about the order of the news, so I just take the data from a list and let CSS do the job with alignment. Thought the best way should be using […]

AngularJS + Bootstrap flexBox incompatible?

Attempting to have “flex” as the display should line the elements together, but it does not for some odd reason. I tested my work for the past 4 days on simple syntax. Double checked for syntax error, misspellings, and broke down all css to core html elements when testing this. Decided to open a new directory to test my base knowledge of flex box, same setup with parent and children divs, and it works. The […]

Next Page »