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>
Related
I'm trying to figure out how to set up a full screen landing page that has multiple backgrounds. I want the user to be able to scroll once and have the next background take up the entire screen. I also want to keep track of which section of the landing page the user is on similar to the position tracker on the right.
I'm trying to emulate the design on this page https://purpose.nike.com/
How would one accomplish this?
If you want to achieve the wallpaper thing as nike as done you would have to add some transitions to make it look good. To achieve it add the background to each div you want and add following css.
.bg{
height: 100vh;
width: 100vw; }
.bg_url1 { background: url1 }
.bg_url2 { background: url2 }
<div class="bg bg_url1"/>
<div class="bg bg_url2"/>
add this to each wallpaper then you can combine it with javascript/jquery to add transitions to make it look good.
I found a solution on jquery scrollify. Please see my example code where I make fullscreen div scrollable and console print (div position or index when finish scrolling).
$(function() {
$.scrollify({
section : ".full_sc_div",
after: function(index){
console.log(index);
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scrollify</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.js"></script>
</head>
<body>
<div class="full_sc_div" style="background-color: red;">div 1</div>
<div class="full_sc_div" style="background-color: green;">div 2</div>
<div class="full_sc_div" style="background-color: blue;">div 3</div>
<div class="full_sc_div" style="background-color: white;">div 4</div>
<div class="full_sc_div" style="background-color: black;">div 5</div>
</body>
</html>
You can try fullpage js : https://projects.lukehaas.me/scrollify/#home
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide" data-anchor="slide1">Slide 2.1</div>
<div class="slide" data-anchor="slide2">Slide 2.2</div>
</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
<script>
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});
</script>
The page you are talking about is nothing but multiple background placed under one another in different divisions
<div>..Walpaper1..</div>
<div>..Walpaper2..</div>
<div>..Walpaper3..</div>
<div>..Walpaper4..</div>
then provide Id's to all the dives and place all the content into the different div's associate do that div
So i created a footer with a green background and added a green backgroun inside a container as you can see on the image. But somehow the length of the green is longer than the other container.
CODE HERE
HTML
CSS
I will suggest put your green class inside container not with container. Check below snippet, you will see the difference.
.green {
background: green;
}
.container {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="green">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-4">4</div>
<div class="col-xs-5">5</div>
</div>
</div>
</div>
I hope this will help.
Looking at your html code it seems that you are using twitter bootstrap framework.
if you want to use the column structure then you should follow the markup standard set by bootstrap
HTML STRUCTURE
<div class="container">
<div class="row">
<div class="col-md-3">
HTML code
</div>
</div>
<div>
don't forget to set the hierarchy as per standards.
checkout the documentation for more details https://getbootstrap.com/docs/4.0/layout/grid/
I am very sorry if my question or codes are confusing to you. I am trying to Position 3 divs, one on the left, two on the right (above and bottom) respectively. I want it to be like the following image:
I am using the following codes, and I can get the icon displayed correctly, but the text "ferrari' and ion-checkbox are not displayed similarly as the image attached below. And the div that contains the text 'Some Icons' is not similarly as the image attached below. At first I thought this is simple task and I tried but cannot make this work. I have been stuck for this. Can any CSS expert help me please?
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
<div class="container" style="width:25%;height:25%;display:inline-block;">
<img style="width: 100%;
height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " />
</div>
<div style="width:75%;height:25%;display:inline-block;">
<b style="width:100%;height:50%;">Ferrari</b>
<!-- Will display some icons in it later-->
<div style="width:100%;height:50%;">Some Icons</div>
</div>
<div style="height:25%;width:75%;">
<ion-checkbox>
Please check me and ETC. !!!
</ion-checkbox>
</div>
The Some Icons Box is not displayed because you lost a " at the end of your style attribute.
Have a look at the ionic framework docs to wrap your boxes easy: https://ionicframework.com/docs/v2/components/#grid
You should use Ionic's in built grid system by assigning a row as a container, and within that row, defining columns. You can do something like this..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content >
<div class="row">
<div class= "item item-image col col-25">
<img src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg">
</div>
<div class= "list col col-75">
<div class="item item-text-wrap">
some text here
</div>
<ion-checkbox class="item item-text-wrap item-checkbox-right">
othet text here
</ion-checkbox>
</div>
</ion-content>
</ion-pane>
</body>
</html>
You will need to remove the padding that the rows and columns have by default like so.
/* Styles here */
.row,
.col{
padding:0;
}
Working Example http://play.ionic.io/app/296ddd83faf9
You can use float to align the div side by side. Using display: inline-block; have some small extra space after them so using exact width won't work. You need to remove that space if you want to achieve it using inline-block property. Here is an article that explains how you can do that.
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Or you can use float instead. You need to clear floats that I've done using clearfix css.
.clearfix:after {
display: table;
content: "";
clear: both;
}
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
<div class="container clearfix" style="width:25%;height:25%;float:left;">
<img style="width: 100%;
height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " />
</div>
<div class="clearfix" style="width:75%;height:25%;float:left;">
<b style="width:100%;height:50%;">Ferrari</b>
<!-- Will display some icons in it later-->
<div style="width:100%;height:50%;">Some Icons</div>
</div>
<div style="height:25%;width:75%;">
<ion-checkbox>
Please check me and ETC. !!!
</ion-checkbox>
</div>
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 have a Wordpress template that uses Bootstrap 2.3.1.
I currently have my two areas set up via an SPAN4 and SPAN8.
The resolution is locked at 1170px, therefore the lg component of Bootstrap is not needed to be configured.
I would like some help with the areas shown in red, as to how to configure my nested columns, so they work properly. They are within an area already defined as Span 8, so in effect, it is an 8 wide grid that needs to be configured to show 3 columns on medium devices, 2 columns on small devices and 1 column on the extra small devices.
I am relatively new to CSS, but have some understanding of basic coding, it's just doing my head in at the moment.
The attached picture show what I am after
My Wordpress layout
I can't seem to get any bootstrap to work with the sizes I would like to display.
I suggest you to use bootstrap version 3
http://getbootstrap.com/css/#grid-responsive-resets
unlike version 2, it has classes like col-lg-* col-md-* col-sm-* col-xs-*, which can get your job done more easily.
trying to understanding your problem.
try the demo code below to see if it's the layout you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#3.3.7/dist/css/bootstrap.css">
<style>
.b {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">aside</div>
<div class="col-xs-8">
main
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>