Flexbox layout not responsive

Topic: Flexbox layout not responsive

gcornetta free asked 5 years ago

Expected behavior The tiles should stack when the viewport size shrinks. and the text "Query engine" should be always aligned with the icon as the viewport shrinks. Actual behavior The layout is not responsive, the tiles do not stack and the "Query engine" text moves below the icon as the viewport shrinks. Resources (screenshots, code snippets etc.) Screenshots are available at the following one drive link: screenshots of the app Here is the snippet of the Vue template with the interface:

      <div class="d-flex flex-column flex-md-column">
        <mdb-card color="success-color" style="height: 12rem; width: 12rem;">
          <mdb-card-body class="text-center">
            <a @click="alarm" role="button" class="text-center">
              <div v-if="alarms.length !== 0 && connected">
                <mdb-icon icon="bell" size="5x" class="white-text animated shake infinite"/>
              </div>
              <div v-else>
                <mdb-icon icon="bell" size="5x" class="white-text"/>
              </div>
            </a>
            <h3 class="p-1 mt-3" v-if="connected"> {{  alarms.length }} {{ alarms.length | pluralize('alarm') }} </h3>
              <div style="display: block" v-else>
                <div class="text-center text-light p-4">
                  <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"></div>
                </div>
              </div>
          </mdb-card-body>
        </mdb-card>
        <mdb-card md="6" color="indigo lighten-1" style="height: 12rem; width: 12rem;">
          <mdb-card-body class="text-center">
            <a @click="mesh" role="button">
              <mdb-icon icon="project-diagram" size="5x" class="white-text"/>
            </a>
            <div style="display: block">
              <h3 class="text-center white-text p-4"> Mesh </h3>
            </div>
          </mdb-card-body>
        </mdb-card>
      </div>
    </div>

    <mdb-card color="info-color" style="height: 8rem; width: 24rem;">
      <mdb-card-body>
        <mdb-row>
          <mdb-col sm="2">
            <a @click="query" role="button" class="text-center">
              <mdb-icon icon="database" size="5x" class="pl-3 white-text"/>
            </a>
          </mdb-col>
          <mdb-col sm="10">
            <h1 class="white-text ml-5 pt-2">Query engine</h1>
          </mdb-col>
        </mdb-row>
      </mdb-card-body>
    </mdb-card>

  </div>

  <mdb-card color="blue lighten-4">
    <mdb-card-body>
      <mdb-card-title>
       <mdb-row>
        <mdb-icon size="3x" class="ml-3" far icon="file-alt" />
          <h1 class="white-text ml-4"> Logs </h1>
        </mdb-row>
      </mdb-card-title>
      <hr />
      <div class="overflow-auto" style="width:30rem; height: 22.85rem;">
        <div class="p-1" v-if="connected">
          <div v-for="(log, index) in logs" :key="index">
            <span>
              <mdb-badge pill color="info-color"> {{ log.date }}</mdb-badge>
              <mdb-badge pill class="ml-2" :color="log.type | colorize"> {{ log.type }}</mdb-badge>
              <mdb-badge pill class="ml-2" color="info-color"> {{ log.msg }} </mdb-badge>
            </span>
            <br/>
          </div>
        </div>
        <div style="display: block" v-else>
          <div class="text-center text-light p-4">
            <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"></div>
          </div>
        </div>
      </div>
    </mdb-card-body>
  </mdb-card>
</div>

Add comment

gcornetta free answered 5 years ago

0 0 Best answer

This is how the dashboard looks now:

When the windows shrinks the tiles stack as expected:

However, as you can see, the tiles fall below the header and the footer and they shouldn't do that.
Moreover, when I scroll the window, the result is the one depicted in the next figure:

In attachment some code snippets to help me find which is the issue:

Main Vue App (App.vue)

import { mdbContainer } from 'mdbvue'

export default {
  name: 'App',
  components: {
    mdbContainer
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
  }
}

html, body{
 width: 100%;
 height: 100%;
 }

body {
 position: relative;
 min-height:100%;
 padding:0;
 margin:0;
 background-color: #F0F0F0;
 display: -webkit-flex; /* safari */
 display: flex;
 }

<pre class="prettyprint"><code>#app {
 -webkit-flex: 1; /* Safari 6.1+ */
 -ms-flex: 1; /* IE 10 */
 flex: 1;
}
</code></pre>

The Header (NavBar.vue):

Company Logo

import { mdbNavbar, mdbNavbarBrand, mdbNavbarNav, mdbIcon } from 'mdbvue'

export default {
  name: 'NavBar',
  components: {
    mdbNavbar,
    mdbNavbarBrand,
    mdbNavbarNav,
    mdbIcon
  },
  methods: {
    /**
      * Gets called when the user clicks on the switch-off icon
      * @function logout
      * @ignore
      */
    logout () {
      this.$store.commit('logout')
      this.$router.replace('/')
    }
  }
}

The Footer (Footer.vue):

© 2019 Copyright: www.example.com

import { mdbFooter } from 'mdbvue'

export default {
  name: 'Footer',
  components: {
    mdbFooter
  }
}

.footer {
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
}

Thank you in advance for your support.

Best Regards,
Gianluca Cornetta

Please insert min. 20 characters.

This is how the dashboard looks now:

The dashboard

When the windows shrinks the tiles stack as expected:

The dashboard after shrinking the window

However, as you can see, the tiles fall below the header and the footer and they shouldn't do that. Moreover, when I scroll the window, the result is the one depicted in the next figure:

Dashboard after shrinking and scrolling down

In attachment some code snippets to help me find which is the issue:

Main Vue App (App.vue)

import { mdbContainer } from 'mdbvue' export default { name: 'App', components: { mdbContainer }, data () { return { } }, mounted () { }, methods: { } }

html, body{ width: 100%; height: 100%; }

body { position: relative; min-height:100%; padding:0; margin:0; background-color: #F0F0F0; display: -webkit-flex; /* safari */ display: flex; }

#app {
 -webkit-flex: 1;   /* Safari 6.1+ */
 -ms-flex: 1;       /* IE 10 */
 flex: 1;
}

The Header (NavBar.vue):

Company Logo

import { mdbNavbar, mdbNavbarBrand, mdbNavbarNav, mdbIcon } from 'mdbvue' export default { name: 'NavBar', components: { mdbNavbar, mdbNavbarBrand, mdbNavbarNav, mdbIcon }, methods: { /** * Gets called when the user clicks on the switch-off icon * @function logout * @ignore */ logout () { this.$store.commit('logout') this.$router.replace('/') } } }

The Footer (Footer.vue):

import { mdbFooter } from 'mdbvue' export default { name: 'Footer', components: { mdbFooter } }

.footer { position: absolute; right: 0; bottom: 0; left: 0; }

Thank you in advance for your support.

Best Regards, Gianluca Cornetta

Mikołaj Smoleński staff commented 5 years ago

Hi there,

Is there a way to share Your whole project with us (for example a test github repo)? It would be much easier to test Your code this way.

Best regards

gcornetta free commented 5 years ago

Hi, sorry for the late answer but it took me some time to strip from the project all the business and the server-side logic. I have created this GitHub repo https://github.com/gcornetta/mdbtest I have disabled authentication so at login you can type everything you want to log. Best regards, Gianluca Cornetta

Mikołaj Smoleński staff commented 5 years ago

Thanks for repo. In my opinion, You should apply lots of changes to make Your code work. Please try to follow this steps: 1. Avoid specifing the exact width and height of elements by using style attribute. To make them responsive You should use class and then @media. 2. Check the positions of Your navs - navbar is fixed to top, but footer has absolute postition (that's why it can cover Your page content while it's heigher than 100vh). 3. Better solution than using flexbox is to use grid layout in Your dashboard - https://mdbootstrap.com/docs/vue/layout/grid-examples/

Best regards

Please insert min. 15 characters.

gcornetta free commented 5 years ago

Hi, I finally was able to find a solution that works with Flexbox without changing too much my code and using a fixed footer rather than a sticky one. Now I need to add to the mob framework my custom Icons, which files should I modify to do that?

Mikołaj Smoleński staff commented 5 years ago

You can't modify MDB Vue files. If You want to apply Your custom icons You just have to make Your own component for it and extend Your project.

Best regards

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

Hi there,

Are You sure You've imported bootstrap's css file to Your project? It's seems that the problem is connected rather with BS than with MDB. Here's the guide how to add bootstrap-css-only to Your project:

https://mdbootstrap.com/docs/vue/getting-started/quick-start/

Best regards

gcornetta free commented 5 years ago

Hi, thank you for your prompt response. Unfortunately that is not the issue, I included both the bootstrap and the mdb css in my main.js file. If I hadn't do that it wouldn't have been possible to style all the components in my UI. In addition the other pages of my UI are perfectly responsive, the only difference is that in the main dashboard I use flex box since it's much better for managing tiles, whereas in the other parts I use the standard grid systems. There should be something I hame missing but I don't know what.

Mikołaj Smoleński staff commented 5 years ago

I'm pretty sure there is something missing in Your code. I can see at least 3 div closing tags, but only one opening. Best!

gcornetta free commented 5 years ago

Hi, the tags were OK, I use a linter so my Vue project simply does not compile if there is a missing closing tag. However, I was able to find the issue: I had simply to remove a wrapping row div around my layout and now everything works (almost) fine. There is still a problem that have puzzled me in this weekend and that I've not been able to solve. Now the layout is responsive and the tile stack as expected as the window shrinks; however, the tiles fall below the header and the footer and I don't know how to fix this issue. I will send the details in another post hoping that you could help me find a fix for this.

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Vue
MDB Version: 5.1.0
Device: iMac
Browser: Safari / Chrome
OS: MacOS Mojave
Provided sample code: No
Provided link: Yes

gcornetta

22Support score
2Questions 1Answers 0Snippets