Horizontal Layout in Polymer -

-

i building app using polymer. i've found layout system tricky. currently, i'm trying layout buttons this:

+----------------------------------------------------------------+ |                   [ok]                   [more info]  [cancel] | +----------------------------------------------------------------+

the gap left of "ok" button 25% of entire width of page. remaining 75% used buttons. in attempt build above, put this plunk, includes following code:

<paper-toolbar class="statusbar">   <div style="width:25%;"></div>   <div style="width:75%;" class="fit">     <div class="layout horizontal flex" style="padding-bottom:12px;">       <paper-button raised>ok</paper-button>        <div class="flex"></div>       <paper-button raised>more info</paper-button>                                   <paper-button raised>cancel</paper-button>                                     </div>   </div> </paper-toolbar>

for reason, "25%" padding left isn't taken. don't understand why.

its recommended use border see trying build using div blocks. added margin:1px solid green 25% , margin:1px solid yellow 75% div block , have far.

enter image description here

i changed code taking advantage of flexbox layout iron-flex-layout

here update plunkr 

<paper-header-panel class="flex" mode="seamed">    <paper-toolbar>      <div>hello</div>    </paper-toolbar>      <div class="fit content">      <div style="height:100%;">        hello world      </div>    </div>      <paper-toolbar class="statusbar">        <div class="layout horizontal flex" style="width:100%">        <div class="layout vertical flex-1 center center" style="border:1px solid green">          <paper-button raised>ok</paper-button>        </div>        <div class="layout horizontal flex-4 " style="border:1px solid yellow">          <span class="flex"></span>           <!-- take space-->          <paper-button raised>more info</paper-button>          <paper-button raised>cancel</paper-button>        </div>      </div>      </paper-toolbar>  </paper-header-panel>


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more