Let say I have a Angular app with directives like so:
<!doctype html>
<html lang="en" ng-app="cfd">
<head>
...
</head>
<body>
<div class="container">
<!-- Header -->
<div ui-view="header" class="row"></div>
<div ui-view="main" class="row">
<!-- Sidebar/Nav -->
<div ui-view="sidebar" class="col-xs-3"></div>
<!-- Content -->
<div ui-view="content" class="col-xs-9"></div>
</div>
<!-- Footer -->
<div ui-view="footer" class="row"></div>
</div>
</body>
</html>
How do I apply CSS to a directive using the Angular directive handle ui-view or any other custom directive, without adding an HTML ID handle. SO for the "main" section, I dont want the following: <div id="main" ui-view="main" class="row">.
I have tried .ui-view#main and ui-view#main.
If I understand correctly, you want to use the angular directive ui-view as identifier in your CSS?
In your CSS file, you could potentially use
div[ui-view=main] {
/* styles for main go here, duh! */
}
Seems to work in Chrome (http://plnkr.co/edit/r1fvheUs8S6AJHv4Dm59?p=preview)
If you want conditional styles, you should use
<div ng-class="{'className': 'angular condition'}"></div>
Related
I have a canvas inside a div with threeJS, and would like to display the purple bar (which will be for user settings) on the right side of the threejs window. The problem is that for some reason bootstrap is not recognising that I want to put these 2 columns together in a row and is placing them on separate rows. I would expect what I have currently to work, and can't see anything wrong with it... I have a similar situation somewhere else in the project, but with only divs, which is working fine. There is no lay-out scss code other than one thats resetting the margin and padding. there are also no other html files in use for this component.
const threeCanvas = document.getElementById('threejs-canvas') as HTMLCanvasElement;
this.renderer = new THREE.WebGLRenderer({ canvas: threeCanvas });
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<canvas id="threejs-canvas">
<app-threejs [width]=400 [height]=350></app-threejs>
</canvas>
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
EDIT: Desired result would be something like this:
https://www.elfskot.nl/wp-content/uploads/2018/08/thumbnail-configurator-780x520.png
SOLVED: I had ng-bootstrap installed without bootstrap...
Your HTML and class usages is fine, please check if your Bootstrap CSS files are loading and applying to your page.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<img src="https://placehold.it/400x350">
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
</body>
</html>
I have the following base layout, which I now would like to transform into a responsive grid using pure css.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ... -->
</head>
<body>
<div class="pure-g">
<div class="pure-u-1">Navigation</div>
<div class="pure-u-5-24">left space</div>
<div class="pure-u-11-24">content</div>
<div class="pure-u-3-24">ToC</div>
<div class="pure-u-5-24">right space</div>
<div class="pure-u-1">Footer</div>
</div>
</body>
</html>
Unfortunately I have no clue how I can hide e.g. <div class="pure-u-3-24">ToC</div> on a specific breakpoint.
I had a look into the base file pure.css as well as the css containing the classes for the grid grids-responsive.css. There seems to be no such thing as .hidden-*-down class known from Bootstrap. Also I coudn't find any (purecss-) utilities to accomplish this.
How can I accomplish my goal and hide an element on a specific breakpoint using PureCSS?
You can use media queries. ToC will hide under 728px.
#media screen and (max-width:728px){
.pure-u-3-24 {
display:none;
}
}
<div class="pure-g">
<div class="pure-u-1">Navigation</div>
<div class="pure-u-5-24">left space</div>
<div class="pure-u-11-24">content</div>
<div class="pure-u-3-24">ToC</div>
<div class="pure-u-5-24">right space</div>
<div class="pure-u-1">Footer</div>
</div>
First you can add this css to your css files :
/* pure-hidden-md *
#media screen and (max-width:48em) {
.pure-hidden-md {display:none}
}
Now add class "pure-hidden-md" to anywhere:
<div class="pure-u-3-24 pure-hidden-md">ToC</div>
I've created a typical layout using CSS Grid with this structure:
<div class="dashboard">
<header></header>
<nav></nav>
<div class="main-header"></div>
<div class="main-content"></div>
<div class="main-footer"></div>
</div>
Now, due to our environment (PHP, Smarty Templates, AngularJS), I would like to split these up into separate components. But here is the issue… I can't wrap an element around grid elements without breaking the layout:
<div class="dashboard">
<header></header> <!-- component -->
<nav></nav> <!-- component -->
<div class="wrapper"> <!-- component -->
<div class="main-header"></div>
<div class="main-content"></div>
<div class="main-footer"></div>
</div>
</div>
I've experimented with nesting another grid inside of 'wrapper', but that introduces more layout issues, such as improper scrolling. (…and nesting grids doesn't sound like a good idea).
I am wondering if there is some CSS to "pass through" the 'wrapper' div to maintain the css grid properties?
Or is there another way to handle this situation?
Thanks!
First off I would like to say that I know I am not the most efficient or clean in my HTML.
My problem is that the custom CSS I write does not apply to my webpage at all. Bootstrap seems to be working perfectly fine, but when I try to make any edits or overwrite Bootstrap it just flat out doesn't work. I know that my custom CSS file is linked properly because it's in the same directory as bootstrap.css
Linking:
<head>
<title>Help Menu</title>
<!--
==============================================================================================================
REFERENCES (BOOTSTRAP 3.3.7) (jQuery 3.1.1)
==============================================================================================================
-->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/bootstrap/css/custom.css" rel="stylesheet" >
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/bootstrap/js/npm.js"></script>
<script src="/jquery/jquery.js"></script>
<!--
==============================================================================================================
BOOTSTRAP REFERENCES DISTRO 3.3.7
==============================================================================================================
-->
</head>
For example I am able to change the background color of the panel using the <style> element:
<div class="container">
<div style="background-color: #4286f4;" class="panel panel-default">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
But I cant change the color of the panel using external CSS (the following CSS snippet is in custom.css):
.lukedbgcolor {
background-color: #4286f4;
}
<div class="container">
<div class="panel panel-default lukedbgcolor">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
I have tried putting the CSS at the very bottom of the bootstrap.css and I have also tried putting the lukedbgcolor class first like this:
<div class="lukedbgcolor panel panel-default">
ALL help / advice / criticism is welcomed,
Thanks!
The issue was temporarily fixed by using Bootstrap's CDN instead of hosting it locally. I believe the larger problem had to do with caching which can be fixed by the following, <link href="XXX.css?v=1.0" rel="stylesheet" type="text/css" />
Cache fix courtesy of #mayersdesign
This is due to the way that CSS works, it will give certain priorities to styles depending on where they are located. The reason defining in the HTML (also called an inline style) works is because it's given higher priority.
Using multiple stylesheets can cause problems and there are various solutions. You can use the keyword !important to give a certain style highest priority. It's generally discouraged because it makes it harder for others using your code to see why a style is being changed but if it's just yourself then go ahead:
.lukedbgcolor {
background-color: #4286f4 !important;
}
.panel.lukedbgcolor {
background-color: #4286f4;
}
Generally in CSS, the more specific selector is taken into account.
Let's say you have the following div:
<div id='myId' class='someClass'></div>
with the following CSS:
.someClass{
background-color:red;
}
#myId{
background-color:blue;
}
the div's background-color will be blue because it's more specific.
It's possible that the style of bootstrap provides a more specific selector than yours, and therefore overrides it.
Try adding an id to your div and see if it makes a difference. (since id's are unique they're as specific as can be)
I cannot (yet) comment on the original post. How are you loading this page? Are you seeing any errors in the browser console? The advice above to use the browser devtools and examine the element, see if the class is there, and if it is being applied or overridden by other defined styles would be the way to approach it.
You also want to have jquery.js loaded before the bootstrap.js, because bootstrap.js depends on jquery.js being loaded first. The browser console would also tell you this - it's a very useful tool!
I know the very basics of CSS and recently went on with using CSS frameworks because it made my life much easier. I have a question in terms of grid systems, am currently using zurb foundation 3 (http://foundation.zurb.com/)
The problem am facing is mostly when creating a row i cannot give it a specific height. It seems to me like grid systems are designed to use as it is, I read in different places that it is not recommended to try and change the height of a row and to just place items inside it as it is.
In my project, I have a content area whereby I want to display a fixed height and width div but its not working for me. so, can any one advise me what should i do? below is my html code
update: edited the html
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
</div>
Your 'style' declarations are wrong
style="height=6em; width:5em;
should be
style="height:6em; width:5em;"
NOTE: you used = instead of : AND you missed the closing quotation "
And you should not use inline styles - separate to a .css file and target them by class
<html>
<head>
<link rel="stylesheet" type="text/css" href="/foundation3/stylesheets/foundation.css"/>
</head>
<body>
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
</div>
</body>
</html>
NOTE: I have not declared a DOCTYPE here - this is barebones. It does work I have tested it in Firefox and Chrome. Just stating it does not work is not helpful OP