This code works without bootstrap, but with bootstrap it displays the file input tag.
Help
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.nodisplay
{
display:none;
}
</style>
<input type="file" class="nodisplay">
<div class="nodisplay">lol</div>
You'll need to use the !important modifier to make your code overwrite the bootstrap code. This should work:
.nodisplay
{
display:none !important;
}
This should also work as the input type file is given
.nodisplay, input[type='file']
{
display:none;
}
in the bootstrap.css
input[type='file'] {
display:block;
}
Related
Summary of the problem
The following image is a description of bootstrap icon.
I don't know how to use "Code point".
Unicode: U+F120
CSS: \F120
JS: \uF120
HTML: 
For Using HTML code point, All you need is just set the the font-family of your element(or your body) to 'Bootstrap-icons' and then everything will work.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<style>
.test
{
font-family:'Bootstrap-icons';
}
</style>
<body>
<div class="test">

</div>
</body>
</html>
I managed to find how to use CSS of "code point".
Add following html into the head element of document.
Set font-family to be Bootstrap-icons.
And you can use css code point \F120 to fill the value of content property.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<style>
h3::before {
font-family:'Bootstrap-icons';
content:'\F120';
}
</style>
The otheres (Unicode, JS, HTML) are still ununderstood.
Thank you for reading my broken English! :)
I'm starting to learn Sass and started to check some nesting examples. This is the first one I tried and it's not working:
body {background:#eee;}
.blog .entry {
p{
color:#ff0;
}
}
This is my markup:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.scss">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body class="blog">
<div class="entry">
<h1>My blog post</h1>
<p class="blue">Text <a>link</a></p>
</div><!-- .entry -->
</body>
</html>
The background of the body does change to #eee, but the paragraph stays the same (unless I un-nest it to just p{} ).
First you cannot link an SCSS file just like CSS, you have to compile it to CSS then link the compiled file.
In order to nest properly in SCSS you can do the following:
.blog {
.entry {
p{
color:#ff0;
}
}
}
Your markup and Sass work as you can see here: https://jsfiddle.net/6pa0r48g/
Please check the compiled CSS directly if you are overloading your css rule by another one (i. e. by formatting .blue).
Also this would be more readable:
body {
background: #eee;
}
.blog {
.entry {
p {
color: #ff0;
}
}
}
I would recommend to not go any deeper with your nesting in Sass.
I am trying to build a dialog using AngularMaterial and in the demo it has css code:
.dialogdemoBasicUsage #popupContainer {
position: relative;
}
.dialogdemoBasicUsage .footer {
width: 100%;
text-align: center;
margin-left: 20px;
}
.dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
font-size: 0.8em;
margin-top: 50px;
}
.dialogdemoBasicUsage button {
width: 200px;
}
.dialogdemoBasicUsage div#status {
color: #c60008;
}
.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
margin-bottom: 0;
}
In my angularJS project - where do I put this code? do i create a new .css file and then reference it and do I have to put anything around it?
It is the same way how you do it in normal HTML application.
Add the css code to a file named style.css , refer it inside
<head>
<title>To Do List</title>
<link href="style.css" rel="stylesheet" />
</head>
DEMO
In normal use case you should include the CSS file come with the library.
By the user guide of material CSS, you should include these files in your HTML
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<!--
Your HTML content here
-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->
If you need further modification on top of their CSS, make a new CSS file and include it below angular-material CSS file in <head>
I have an admin page like this:
<div class="admin_page">
<div ng-repeat="user in users">
<div class="my-form-group">
<textarea class="my-form-control">{{user}}</textarea>
</div>
</div>
</div>
This is my main.scss file:
.my-form-group {
#extend .form-group;
.my-form-control {
#extend .form-control
}
}
#import "./admin.scss";
This is my admin.scss:
.admin_page {
textarea {
height: 200px;
}
}
The height of text area is not set.
I tried <textarea class="my-form-control" style="height:200px">{{user}}</textarea> and it works.
Why is the sass version not working?
Edit:
this is my heading:
<!--underscore-->
<script src="/node_modules/underscore/underscore-min.js"></script>
<!--jquery-->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<!--bootstrap (keep the css although duplicate in bundle, since some may depend on it)-->
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--font-awesome-->
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">
<!--summernote-->
<link rel="stylesheet" href="/node_modules/summernote/dist/summernote.css">
<!--<link rel="stylesheet" href="/node_modules/summernote/dist/summernote-bs3.css">-->
<script src="/node_modules/summernote/dist/summernote.min.js"></script>
<!--angular-->
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-resource/angular-resource.min.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<!--angular-summernote-->
<script src="/node_modules/angular-summernote/dist/angular-summernote.min.js"></script>
<!--bundle-->
<script src="/public/script/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/public/style/bundle.css">
Note that I imported sass version of bootstrap in main.scss, which means inside bundle I have the bootstrap css.
The reason I include the original non-sass version bootstrap is for summernote, which depends on bootstrap.
Edit 2:
I tried the following:
.admin_page {
.my-textarea {
#extend .my-form-control;
height: 500px;
}
}
which has a specificity of 0,0,2,0 (2 classes), it doesnot work
Also this:
.admin_page {
textarea.my-form-control {
height: 200px
}
}
which has a specificity of 0,0,2,1 (2 classes + 1 element), it works. Why is the previous one not working?
It is not problem of sass. It is clearly the problem of specificity.
You just need to mention high specificity css. Since you have a class to the textarea, you can do like this:
textarea.my-form-control{
height: 200px;
}
Read this to understand how specificity works in css.
Is it possible to inline a class definition of CSS inside an xhtml file?
I mean, to put someting like:
p.first{ color: blue; }
p.second{ color: red; }
Inside my page, not in a separate CSS file.
I think you're trying to put your CSS in the HTML page, not inline.
You can put CSS in an HTML page (usually in the head) by surrounding it in style tags:
<style type="text/css">
p.first{ color: blue; }
p.second{ color: red; }
</style>
Sure, here's an example. However, it is best practice to keep your styles in a separate css file.
<html>
<head>
<title>Classes</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style type="text/css">
img {
padding:10px;
margin:5px;
border:1px solid #d5d5d5;
}
div.thumb {
float:left;
}
div.caption {
padding-left:5px;
font-size:10px;
}
</style>
</head>
<body>
<div>your page code etc..</div>
</body>
</html>
You can also put css inside the p tag.
<html>
<body>
<p class="first" style="color:blue;"></p>
<p class="second" style="color:red;"></p>
</body>
</html>
The nice thing about CSS is it works in any file not just an HTML,XML file. You just need to define the syle block like this anywhere in the page
<style type="text/css">
<all my styles goes here>
</style>
In HTML and HTML/XHTML, the standard is, you will put this block in the head section. If it is other type of file for example .aspx, or .php, the block still works, even it is not in head block.
Example
<?php
/* mytest.php file */
<style>
<my styles>
</style>
?>
the same is true for ASPX file.
You can also define inline CSS which means CSS goes right in the element tag. The syntax is
<p style="<all my styles>"> My paragraph contain inline CSS</p>
Yes, you can insert CSS styles in the HTML file. For example:
<p>...</p>
<style type="text/css">
p.first { ... }
</style>
<div>...</div>
As you'll find in the literature, it's not considered a good practice though.