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.
Background color css is not rendered
Background color css is not rendered
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.
Can you try importing node_modules/framework7/css/framework7.bundle.min.css and see if that makes a difference?
I tried but still no luck.
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?
Yes, i use the bundle.min css and the css rule was referenced but i could not see any background css rendered.
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.
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.
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:
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">
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.
Oh the attribute was denied in HTML root
I have uploaded this test project on heroku, please take a look:
https://rokomo.herokuapp.com/
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:
So I think the CSS is fine, you just need to make sure you’ve the right classes for each element.
1 Like
Yeah, i put the Button component in Block component and it worked.
Thank you @alawi, i’m very appreciate for your help 
1 Like