jquery - how to make button in ionic + css -


i need design toolbar in ionic .i able make tool bar not similar in below pic.in given image buttons small height , small font .second thing second button bigger than rest .in given image button have different width .can make same button in ionic tried in ionic not able make same above how make same type of toolbar in ionic show in image

here code

![<html ng-app="ionicapp">  <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title>tabs example</title>    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">   <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head>  <body>  </body> <ion-view>     <ion-header-bar align-title="center" class="bar-balanced">         <div class="buttons">             <i style="font-size:30px;" class='icon ion-chevron-left'></i>         </div>         <h1 class="title">account</h1>     </ion-header-bar>     <ion-content>         <div class="button-bar">             <a class="button" ui-sref="d" ui-sref-active="button-balanced">details</a>             <a class="button" ui-sref="lunch" ui-sref-active="button-balanced">related</a>             <a class="button" ui-sref="dinner" ui-sref-active="button-balanced">sad</a>             <a class="button" ui-sref="dinner" ui-sref-active="button-balanced">ss</a>         </div>       </ion-content> </ion-view> </html>] 

try adding in css @ bottom else may need use !important.

.button-bar > .button:first-child{   border-top-left-radius: 10px !important;   border-bottom-left-radius: 10px !important; }  .button-bar > .button:last-child{     border-top-right-radius: 10px !important;   border-bottom-right-radius: 10px !important; } 

i have updated sample


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -