How to make Framework7 works with Meteor

xrrr · 2019-06-07T07:28:16.775Z

Hello, i’m try to integrated Framework in my current Meteor project follow this tutorial:
Link
Everything is working fine but the css could not rendered. Does anyone met the same issue? Please help me.

Iu8tm73.png1288×585

Background color css is not rendered

alawi · 2019-06-07T17:28:06.427Z

You can just copy …/node_modules/framework7/css/framework7.min.css to your public folder and link it in your main header to get you going.

xrrr · 2019-06-07T18:12:46.607Z

I tried but it’s still not work.

w6xlRKa.png1092×626

It seem like the css rules was applied but not rendered.

alawi · 2019-06-07T18:42:17.681Z

Can you try importing node_modules/framework7/css/framework7.bundle.min.css and see if that makes a difference?

xrrr · 2019-06-07T18:59:50.005Z

I tried but still no luck.

alawi · 2019-06-07T19:06:49.429Z

Strange, that is the CSS they’re using in their react CLI.

When I inspect their showcase css, most of the button css is imported from the framework7.bundle.min, you can see the screenshot below. Can you inspect your button component and check if there is any references to the bundle.min?

Screen Shot 2019-06-07 at 11.03.47 PM.png1364×988 168 KB

xrrr · 2019-06-07T19:19:24.163Z

RQEOmTW.png1237×585

Yes, i use the bundle.min css and the css rule was referenced but i could not see any background css rendered.

alawi · 2019-06-07T19:26:09.611Z

Hmm, and you can see their css in the kitchen sink I assume? what is the computed css for that button?it should have borders and background color, this is really strange.

xrrr · 2019-06-07T19:41:39.331Z

it looks like the button’s background color was inherited from .color-red class. I could see my button has referenced with that class in the inspector tool too but i dont’ know what’s going on here.

BXIbJhQ.png1204×457

alawi · 2019-06-07T19:49:04.429Z

Can you check the button chrome “computed” tab and expand the background property to make sure nothing is interfering with the rendering, you should see something like this:

Screen Shot 2019-06-07 at 11.44.19 PM.png1360×690 57.7 KB

xrrr · 2019-06-07T20:02:17.261Z

This is my computed tab.

123.png1126×395 66.7 KB

alawi · 2019-06-07T20:28:48.401Z

Hmm, what classes do you’ve in your HTML tag? it looks like FM7 add special classes to that tag, can you try the following html tag:

<html lang="en" class="ios device-pixel-ratio-2 device-retina device-desktop device-macos">

xrrr · 2019-06-07T20:40:50.592Z

I added but it didn’t make any change.

123.png1274×628 117 KB

alawi · 2019-06-07T21:02:10.004Z

For some reason the theme colour is not being picked up. It seems that FM7 define the theme colour as a variable in the HTML root, if you inspect the html tag, and scroll all the way down, you should see some tags like:

:root {
     --f7-theme-color: #007aff; 
    --f7-theme-color-rgb: 0,122,255;
    --f7-theme-color-shade: #0066d6;
    --f7-theme-color-tint: #298fff;
    --f7-safe-area-left: 0px;
    --f7-safe-area-right: 0px;
    --f7-safe-area-top: 0px;
    --f7-safe-area-bottom: 0px;
    --f7-safe-area-outer-left: 0px;
    --f7-safe-area-outer-right: 0px;
    --f7-device-pixel-ratio: 1;

The button background var suppose to pick the theme color as a fallback, but for some reason it is defaulting to transparent. Does the other classes work? like adding the button-raised to the link?

I’m curious what the issue is but it’s hard to debug it without the inspector.

xrrr · 2019-06-07T21:28:02.102Z

Oh the attribute was denied in HTML root

123.png1162×525 87.8 KB

I have uploaded this test project on heroku, please take a look:
https://rokomo.herokuapp.com/

alawi · 2019-06-07T21:49:49.459Z

It seems to be working fine.

I just copied the following html into the div class="page-content" block

<div class="block">
<p class="row">
<button class="col button button-raised">Button</button>
<button class="col button button-raised button-fill">Fill</button>
<button class="col button button-outline button-raised">Outline</button>
</p>
<p class="row">
<button class="col button button-raised button-round">Round</button>
<button class="col button button-raised button-fill button-round">Fill</button>
<button class="col button button-outline button-round button-raised">Outline</button>
</p>
</div>

And I got this:

Screen Shot 2019-06-08 at 1.47.53 AM.png2880×340 20.3 KB

So I think the CSS is fine, you just need to make sure you’ve the right classes for each element.

xrrr · 2019-06-07T22:07:29.247Z

Yeah, i put the Button component in Block component and it worked.
Thank you @alawi, i’m very appreciate for your help