Skip to content
Fix Code Error

Iron flex layout: not getting the proper layout

May 6, 2021 by Code Error
Posted By: Anonymous

i am using iron flex layout https://www.webcomponents.org/element/PolymerElements/iron-flex-layout i wanted to align my div like a dashboard view
but i am not able to align the boxes, i am using the layout standards https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html mentioned here, no other iron flex styling is working other than layout inline layout-start

The template look likes

 </custom-style>
 <style>

    .layout {
     background-color: #263367;
     padding: 12px;
     margin: 4px;
     height: 300px;
   }
   .layout.center-justified{
     background-color: #289378;
     padding: 12px;
     margin: 4px;
     height: 100px;

 }

   </style>

   <div class="layout inline layout-center-justified" style="height: 154px">
      <div>cross axis start alignment</div>
     </div>

   <div class="layout inline layout-start" style="height: 74px width:24px">
     <div>cross axis start alignment</div>
   </div>

    <div class="layout inline layout-start" style="height: 154px">
   <div>cross axis start alignment</div>
   </div>

  <div class="layout inline layout-start" style="height: 154px">
  <div>cross axis start alignment</div>
 </div>

  <div class="layout inline layout-start" style="height: 154px">
     <div>cross axis start alignment</div>
  </div>

The div is not showing when i am using layout inline layout-center-justified

 <div class="layout inline layout-center-justified" style="height: 154px">
      <div>cross axis start alignment</div>
     </div>

can anyone guide me how should i style the below boxes
so that it can come according to my requirment and how should i use https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html so that i can use other layout classes?enter image description here

Solution

To use the iron-flex-layout make sure you read this guide: https://elements.polymer-project.org/guides/flex-layout.

To use layout classes import the iron-flex-layout-classes file. You must do the followings in any element that uses any of the iron-flex-layout styles:

  • Import the file

    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">

  • Include the modules in style

    <style include="iron-flex iron-flex-alignment">
    

If you want to learn basics about CSS flexbox, click here.

For you problem you will need at least one flex container.

Here is the updated code using flex container:

<template>
    <style include="iron-flex iron-flex-alignment">

      .inline {
        background-color: #263367;
        padding: 12px;
        margin: 4px;
        /*height: 300px;*/
        border: 1px solid black;

      }

      .layout-center-justified {
        background-color: #289378;
        padding: 12px;
        margin: 4px;
        /*height: 100px;*/
      }
    </style>


    <div class="vertical layout">
      <div class="horizontal layout justified">
        <div class="layout inline layout-center-justified" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>

        <div class="layout flex inline layout-start" style="height: 74px width:24px">
          <div>cross axis start alignment</div>
        </div>
      </div>
      <div class="horizontal layout justified">
        <div class="layout inline layout-start" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>

        <div class="layout inline layout-start" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>

        <div class="layout inline layout-start" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>
      </div>
    </div>
</template>

Check out the demo here.

Answered By: Anonymous

Related Articles

  • Pandas pivot_table: filter on aggregate function
  • Navbar not filling width of page when reduced to mobile view
  • How do i update a javascript variable as its value changes?
  • Centering in CSS Grid
  • Azure Sql : Unable to Replace HTML String
  • Having trouble with my nav bar/header, It used to…
  • insert tables in dataframe with years from 2000 to…
  • Active tab issue on page load HTML
  • In CSS Flexbox, why are there no "justify-items" and…
  • Add calculated column to df2 for every row entry in…
  • Why doesnt my table sort my div variable in numerical order?
  • Jquery fadeToggle Trouble
  • I need to sum values with specific condition
  • Cannot make table responsive
  • Is it possible to move my text side by side with my icon
  • SQL find sum of entries by date including previous date
  • How to show title in hover - css / jquery
  • Declaring Backbone Collection in CoffeeScript
  • Web colors in an Android color xml resource file
  • Does bootstrap have builtin padding and margin classes?
  • How do I do a drag and drop using jQuery to move…
  • Obtain most recent value for based on index in a…
  • Fix top buttons on scroll of list below
  • How to sign in kubernetes dashboard?
  • Oracle sql query to group two sets of dates if sequencials
  • Best way to extract messy HTML tables using BeautifulSoup
  • Nesting query results in BigQuery
  • center 3 items on 2 lines
  • Ember 2, filter relationship models (hasMany,…
  • How to use html template with vue.js
  • How can I use a javascript function to create…
  • Component to take all available height with Flexbox…
  • Where do I find the current C or C++ standard documents?
  • Vertical Align Center in Bootstrap 4
  • Why my "title" bloc doesn't go to bottom?
  • Polymer PWA hosted on firebase shows blank screen in…
  • Moving average in MYSQL without dates but grouped by…
  • How to specify line breaks in a multi-line flexbox layout?
  • Python Monthly Change Calculation (Pandas)
  • How do I keep only the first map and when the game…
  • How to pull out an element to the right in…
  • Python - Modifying rows of a data frame where the…
  • collision detection from picturebox in a list c#
  • My DIV elements go diagonal instead of horizontal
  • Bootstrap 4.6 + CSS, how to bottom align a row
  • How to check if a browser supports Polymer?
  • Detect browser support fo Polymer
  • Next.js - Warning: Prop `dangerouslySetInnerHTML`…
  • backbone.js router Pushstates & Root
  • How can I center all my contents in html?
  • Pandas / Python - Compare numerically each row with…
  • Vue js broadcast not working
  • Unresponsive hamburger icon in HTML
  • How do I bind an input from an element of a 2D array…
  • How to use 2 columns as "key" to get MAX value of…
  • laravel named resources not working properly and…
  • Vuejs route redirect on refresh
  • How to apply rolling t.test with pandas?
  • Adobe XD to responsive html
  • Why in some case the selected of the iron-page doesn't work?
  • app-theme.html not working in custom element
  • Chrome / Safari not filling 100% height of flex parent
  • Keeping the User logged in
  • How to get to work in Polymer 2.x
  • How to stretch the div to all the height of the page?
  • How to prevent scrolling the whole page?
  • How can I close an element when the div content or a…
  • Reset/remove CSS styles for element only
  • How to vertically center a container in Bootstrap?
  • How to convert Rows into Columns in Informix 12.10
  • Stacked Tabs in Bootstrap 3
  • How to horizontally align ul to center of div?
  • if statement is executed while condition is false
  • Javascript validate all checkboxes are selected
  • Vertically align an image inside a div with…
  • Create HTML table using Javascript
  • error at for loop: Expected an identifier in Flutter
  • Why is it that "No HTTP resource was found that…
  • Onclick event not happening when slick slider is…
  • Issue rendering child views in Vue with Vue Router
  • Working demo of state management in Polymer 2.x using Mixins
  • Not able to get transparent dropdown menu
  • Increasing size of semi circle using css
  • How to change the color of vaadin-select-text-field…
  • how to use canvas in JavaScript flappy bird code
  • Polymer - Component Layout
  • Change color iron-icon when tapped
  • How to refresh DOM when props change in Svelte?
  • CSS Input with width: 100% goes outside parent's bound
  • Print the significance of the relationship and…
  • FillMaxHeight, padding and wrapping content not…
  • Polymer 2 dynamically merging templates
  • HTTP Status 500 - org.apache.jasper.JasperException:…
  • Print tables with 3 regression output models from rdrobust
  • iron-flex-layout center in page
  • Ember-cli build error-- The Broccoli Plugin:…
  • polymer V1.0 iron-list in a complex flex layout is…
  • Trouble with boxes appearing/hiding based on selection
  • Using setInterval for creating animation
  • Polymer iron-ajax response code

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How can I loop through an array of keys and do query for each using firebase-query in a declarative manner?

Next Post:

Call Async Load Module Function from View

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error