It seems that my css mixins are not being applied as shown in this plunker . May I know why color: green is not being applied? Thanks.
You will need to import CSS mixins polyfill if you are using CSS mixins.
<!-- import CSS mixins polyfill -->
<link rel="import" href="/bower_components/shadycss/apply-shim.html">
Source: Click here.
Also, you are using custom-style which you haven't imported. Importing that is needed since you are not importing polymer.html as well in that file.
<link rel="import" href="/bower_components/polymer/lib/elements/custom-style.html">
custom-style is not included with Polymer.Element and must be imported
separately. custom-style is included with the legacy polymer.html
import.
Working plunker.
Related
So I created a web app using visual studio .net core 3.1. I see that boostrap came with it by default. So what I did was copy and paste the accordion example from bootstrap and was expecting it to work by default but it is not rendering. I double checked and see that jquery is referenced before boost strap. I checked the css and JS file and it is loaded, and there is no error in the console. Is there something else I need to do?
Update:
This is where I got the sample code, it is the very first example: Bootsrap example
You can open bootstrap.js in your project,you will find the version of bootstrap is v4.3.1,and you are referencing the official document of bootstrap v5.0,so you need to add the css and js of v5.0.
You can try to add the css and js of v5.0 to your _layout.cshtml.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I want to customize the input field textbox height more minimal and its font style. I used matblazor component to my project. Can someone know how I can solve this problem from root CSS or something like that?
Just include an additional CSS file in the _Host.cshtml like
...
<head>
...
<link rel="stylesheet" href="my-custom-matblazor-styles.css" />
</head>
or in your .razor file like this
<link rel="stylesheet" href="my-custom-matblazor-styles.css" />
to override the CSS rules of MatBlazor.
I would favor the latter as you need the CSS file only when you are actually using a MatBlazor component on a page.
Do not mangle with the original CSS files as it will result in a complete chaos when a new version of MatBlazor is released.
I'm troubled regarding using fabric typography in a react application.
I want to build an app that looks like fabric.
How to get typography rules ?
Especially, I want <h1>,<h2> tags to looks fabric headers.
I tries to import the css from my global layout component, but headers are still raw.
import 'office-ui-fabric-react/dist/css/fabric.min.css';
I also tried to reference the CDN css file using
<link
rel="stylesheet"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"
/>
But still without success.
[Edit]Please note that within components styles are applied. For example, a h1 tag within a Dialog component will show as expected.
[/Edit]
You can only use the typography defined in https://developer.microsoft.com/en-us/fabric#/styles/typography, make sure you place the correct class names for the header you want. And make sure you wrap the html with ms-Fabric. If you are using react, <Fabric> does that for you too.
For example:
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
<body class="ms-Fabric">
<h1 class="ms-font-xl">Hello World</h1>
<h1 class="ms-font-su">Hello World</h1>
</body>
There are two ways to include the Fabric Core.
Via CDN, Example CDNs are https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css or https://unpkg.com/office-ui-fabric-react#6.119.0/dist/css/fabric.min.css (use a prod ready cdn)
Via NPM, Once you yarn add office-ui-fabric-react or npm install office-ui-fabric-react in your index.css or index.sass just import it. Webpack will make sure it packs everything correctly.
css:
#import '../node_modules/office-ui-fabric-react/dist/css/fabric.css';
sass:
#import '../node_modules/office-ui-fabric-react/dist/sass/Fabric';
Note: This will bring all fabric styles (which is the only way), later on, the Fabric team stated they will create components instead of doing this.
That's all
I'm trying to include a cdn external css file in my vue-cli-3 project, so I added the css file in the public/index.html file like this:
<link rel="stylesheet" href="http://mycssfile.css">
But the css is not included in the generated index.html file. this used to work in vuejs2, I don't understand why it doesn't work with vuejs3. Any idea what the problem is? thanks
It is simple.
On your main.vue add the following
<style>
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css";
</style>
I'm trying to make a simple page with bootstrap and glypicons in jsf 2.2. I've included webjar's bootstrap dependency (and opening the jar I can see the fonts file are present).
When deploying the app to wildfly, bootstrap css works correctly, but icons shown are horrible (like a default font or something). Looking at the network tab in the browser, I only see 404 errors:
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404
I tried including the other dependency (bootstrap-glypicons) and I only get the 404 errors twice. What am I missing?
This is how I'm including boostrap, which works correctly for css:
<h:outputStylesheet library="webjars" name="bootstrap/3.1.1/css/bootstrap.min.css" />
And this is how I'm using the css classes:
<button><span class="glyphicon glyphicon-minus"></span></button>
You should use <link> tag instead of <h:outputStylesheet>
eg.
<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>
--- UPDATE
This happen because ResourceHandler in JSF add library value (webjars) to the end of URI as a parameter:
faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css?ln=webjars
in bootstrap.min.css CSS there are such references to files:
url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
so if you want to use <h:outputStylesheet> you can write own ResourceHander or you can edit bootstrap.min.css and fix paths to glyphicons-halflings-regular.* files
In my opinion is better to use standard html tag <link> instead of <h:outputStylesheet> because JSF component tree will be smaller and it act on performance. Inside bootstrap.min.css there is no EL so there is no need to use <h:outputStylesheet>
Small update: webjars has JSF specific versions of several CSS libraries, in case of the bootstrap CSS the following will work just fine:
<h:outputStylesheet library="webjars" name="bootstrap/3.3.5/css/bootstrap-jsf.css" />
Note the -jsf suffix.