# Category: css3

## I want to create a sidebar menu for desktop where i have to show nested li elements on click of parent element

When clicking on Dashboard I want to show submenu as shown in the attached figure But I am unable to figure it out that how I should proceed without using javascript and jquery Source: AngularJS

## remove after in last md-tab

I have tabs like this : https://codepen.io/anon/pen/KZoLWp I want to remove md-tab::after in first index , I’m using ng-reapet to make tabs. tried .md-tab:last-child::after{display: none;} but seems not working on this element. any help? Source: AngularJS

## 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”> […]

## Searchable html select list result shown in table

I need a html select list where I will search data and matching data will be displayed bellow in html tabular format then I will select as desired. I am using Bootstrap and AngularJs. Example is like this: jsfiddle.net/mkgupta911/teqgpgr0/ Can someone help me. Source: AngularJS

## 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 to place the md-sidenav handler as child of sidenav himself

I am interested into know id if possible (based on this example) put the Toggle right button as child of the right md-sidenav, this should keep fixed in respect to the parent bu keeping visible when sidenav is closed. This is an example: https://devitems.com/html/subas-preview/subas/index-2.html Regards and thanks in advance. Source: AngularJS

## UI prototype tools for designing single page application

I want to develop UI prototype for single page application.This will have dashboard, menus, lots graphs, table data etc.. Eventually I would like to integrate this prototype with Backbone/AngularJS framework. Its better it supports multi device (like iphone/ipad..) Any suggestions for tools? (I have good knowledge on CSS,JS, JQuery..) Thanks! 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 […]