I want to put the canvas defined by the red border over the div (black border) that is currently under it. It should have the same size as the div. I also want to be able to click on buttons and select text that is under the canvas.
I have been trying to do this for 2 days now and can't figure it out...
<canvas id="canvas">
</canvas>
<div class="jumbotron">
<div class="container-fluid" id="canvas-container">
</div>
</div>
current css (I know it's a mess, but I have been trying a lot of things)
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
.jumbotron
{
text-align: center;
}
#canvas-container
{
padding: 0;
//position: absolute;
border: 1px solid black;
}
.jumbotron
{
padding: 0;
#position: absolute;
}
canvas {
border: 1px solid red;
}
You need to specify:
canvas {
pointer-events:none;
}
Here is a js fiddle where you can test clicking on the area where the black box is under the red box:
https://jsfiddle.net/1n1bp7m9/1/
Related
I would like to have text inside the element to be aligned such that it begins from the bottom of the page. I want it so that as I increase or decrease the width of the div, the text fills up the bottom first before the top.
I want to look like the following design from adobe illustrator:
Instead, it looks like the following:
the code used in the second image is below:
<style media="screen">
*{
font-family: 'Heebo', sans-serif;
}
.big-intro-text{
font-size: 100px;
width: 100%;
position: absolute;
}
.big-intro-text div{
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
</style>
<div class="big-intro-text" align = "center">
<div>home of the zebras</div>
</div>
* {
font-family: 'Heebo', sans-serif;
}
.big-intro-text {
font-size: 100px;
width: 100%;
position: absolute;
}
span {
display: block;
}
.big-intro-text div {
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
<div class="big-intro-text" align="center">
<div><span>home<span> of the zebras</div>
</div>
Try this code.
You could add a large amount of margin on the top, and reduce the div height.
Sorry about the old answer, I did not understand the question.
I am trying with Javascript window.print to print a content inside the div container. The div container is managed by angular js.
CSS file
#media print
{
body, html, #wrapper {
width: 100%;
margin:0px;
padding:0px;
border: 1px solid red;
}
.no-print, .no-print * {
display: none !important;
}
.col-sm-12 {
width: 100%;
}
}
HTML containing the DIV
<div ng-show="views.invoice">
<div class="row col-sm-12" style="margin:0px; padding:0px; width:100%">
test
</div>
<div class="row no-print">
<div class="col-12">
<button class="btn btn-success btn-default" onclick="window.print();"><i class="fa fa-print"></i> {{phrase.Print}}</button>
</div>
</div>
</div>
This is how it is shown in the browser
When I do the print it is printing to PDF as below
I see a big margin around the text 'test'. How can I print without any margin or padding?
The Problem
It's most likely because you've set the visibility your drawer and your navbar (the left-side navigation and the top-side navigation) to hidden. When something's visibility is set to hidden, it is still in the layout and preserves its height, width, margin, and padding. This is why you're seeing the space of your drawer and navbar, respectively causing the space on the left side and the top side.
You can run and try printing the below screen. You'll see the problem I mentioned (the space caused by the preserved sizes [height, width, padding, margin]).
#media print {
body,
html,
#wrapper {
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid red;
}
#drawer {
visibility: hidden;
}
#navbar {
visibility: hidden;
}
.no-print {
display: none;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
position: relative;
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
#navbar {
width: 100%;
background: blue;
color: white;
padding: 20px;
}
#section--right {
flex-grow: 1;
}
#drawer {
height: 100%;
width: 100px;
background: red;
color: white;
padding: 20px;
}
#navbar .text {
display: inline-block;
height: 50px;
background: #121212;
}
<div id="wrapper">
<div id="drawer">Some drawer</div>
<div id="section--right">
<div id="navbar"><span class="text">Some navbar</span></div>
<div id="print__section">
test
</div>
<button id="print__button" class="no-print" onclick="window.print()">Print now</button>
</div>
</div>
Solution
My suggestion is to set a special id or class to the printable region. Then, set all the other elements' visibility inside body that have no such special id or class to hidden. Furthermore, because setting visibility to hidden still allows the elements to preserve their dimensions, set their sizes (height, width, margin, and padding) to 0 too. Note that you can't use display: none because your printable region will also not be displayed.
Here's a working example that will solve your problem.
#media print {
body,
html,
#wrapper {
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid red;
}
/* Makes all divs that are not inside the print region invisible */
/* Then, set the size to 0 by setting everything (height, width, margin, and padding) to 0 */
body *:not(#print__section) {
visibility: hidden;
height: 0;
width: 0;
margin: 0;
padding: 0;
}
/* Parents' visibility cascade to children's visibility */
/* Make the print region visible again to override parent's visibility */
#print__section {
visibility: visible;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
position: relative;
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
#navbar {
width: 100%;
background: blue;
color: white;
padding: 20px;
}
#section--right {
flex-grow: 1;
}
#drawer {
height: 100%;
width: 100px;
background: red;
color: white;
padding: 20px;
}
#navbar .text {
display: inline-block;
height: 50px;
background: #121212;
}
<div id="wrapper">
<div id="drawer">Some drawer</div>
<div id="section--right">
<div id="navbar"><span class="text">Some navbar</span></div>
<div id="print__section">
test
</div>
<button id="print__button" class="no-print" onclick="window.print()">Print now</button>
</div>
</div>
this is my CSS:
<style type="text/css">
body
{
background: #edeff8 url(sidebar.left.bg.gif) top left repeat-y;
margin: 0;
padding: 0;
/* IE 6.0 Addition */
height: 100%;
}
/* IE requires the position to be absolute otherwise the div will render below */
/* the mainContainer div on the page and not under it in the z axis */
#bg
{
position: absolute;
background-image: url(sidebar.left.bg.gif);
background-position: top left;
background-repeat: repeat-y;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 960px;
/* IE 6.0 requires the -1 z-index so that the bg will render behind the scroll bar */
z-index: -1;
}
body > #bg
{
position: relative;
z-index: 1;
}
#mainContainer
{
position: relative;
min-width: 960px;
top: 0;
left: 0;
z-index: 2;
}
#header
{
background-color: #0000ac;
background-image: url(header.bg.jpg);
background-position: top;
background-repeat: repeat-x;
margin: 0;
padding: 10px;
}
#centerRightColumnContainer
{
margin: 0;
padding: 0;
float: left;
width: 100%;
}
#centerRightColumnPositioner
{
margin-left: 190px; /* To fit the left side bar */
padding: 0;
}
#sideBarLeft
{
float: left;
width: 190px; /* Total width: 190px - padding *2 = 170px; */
/*margin-left: -100%;*/
position: fixed;
height: 100%;
padding: 0;
background-color : maroon;
}
#centerColumnContainer
{
float: left;
width: 100%;
height: 100%;
position: fixed;
background-color : black;
}
#centerColumn
{
/* margin-right: 260px; */
padding: 10px;
}
/*
* ----------------------------------------------------------------------------
* NBI Layout/Design styles
*/
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 17px;
margin: 0;
padding: 0;
}
h1, h2, h4
{
text-align: center;
color: #ffffff;
}
h1
{
font-size: 2em;
line-height: 1em;
}
h4 a, h4 a:visited
{
color: #d9dcec;
}
h4 a:hover
{
color: #ffffff;
text-decoration: none;
}
h2
{
font-size: 18px;
}
p
{
margin-top: 0px;
margin-bottom: 20px;
}
.clear_both
{
clear: both;
}
.code
{
font-family:"Courier New", Courier, monospace;
}
#w3cButtons
{
width: 196px;
margin: 20px auto;
padding: 0;
}
#markupBtn
{
margin: 0 10px 0 0;
padding: 0;
width: 88px;
float: left;
}
#cssBtn
{
margin: 0 0 0 10px;
padding: 0;
width: 88px;
float: left;
}
/* IE 6.0: For some reason, if you just specify padding here it'll add 10 px */
/* to the entire layout and cause the page to scroll horizontally. So we have */
/* to specify the width and then set a margin on it. The width is equal to */
/* the width of the column, 190px - the 10px margin * 2 */
#sideBarLeft p
{
margin: 10px auto;
width: 170px;
}
/* We need to shave off a pixel from the width of the ul. This then renders */
/* list inside this columns bg image. */
#sideBarLeft ul
{
margin: 0;
padding: 0;
border-bottom: #978e7c 1px solid;
width: 189px;
}
/* IE fix for additional padding that otherwise get's rendered between list items */
#sideBarLeft ul li
{
height: 1%;
margin: 0;
padding: 0;
list-style-type: none;
}
#rightColumnBg > #sideBarLeft
{
height: auto;
}
#sideBarLeft ul li a, #sideBarLeft ul li a:visited
{
display: block;
border-top: #978e7c 1px solid;
padding: 5px 10px;
background-image: url(sidenav.bg.gif);
background-position: bottom;
background-repeat:repeat-x;
background-color: #fffbf7;
color: #59503e;
text-decoration: none;
font-weight: bold;
}
#sideBarLeft ul li a:hover
{
color: #000000;
text-decoration: underline;
}
</style>
<!--[if IE 7]>
<style type="text/css">
/* If we are using IE 7 we must override our position attribute for our #bg div */
body > #bg
{
position: absolute;
}
</style>
<![endif]-->
And here's the javascript :
<script language="javascript" type="text/javascript">
function resize_bg_div(){
// This function will determine which of the three columns or the window.height
// is the largest and then set the bg div to be that height.
// This assumes that any div markup that is above our columns is wrapped
// in a single div with the id=header
var var_bg_offset = document.getElementById('header').offsetHeight;
// First we create an array and add to it the heights of each of the three columns
// and the window height
array_colHeights = new Array( );
array_colHeights.push( document.getElementById("sideBarLeft").offsetHeight );
array_colHeights.push( document.getElementById("centerColumn").offsetHeight );
// Instead of the raw window.innerHeight we need to take into account the offset size
// of our header divs
array_colHeights.push( window.innerHeight - var_bg_offset );
// Sorting our array in descending order
array_colHeights.sort( function( a, b ){ } );
// Now we'll set our bg div to the height of our largest div or window height
document.getElementById('bg').style.height = array_colHeights[0] + "px";
delete array_colHeights;
delete var_bg_offset;
}
window.onload = resize_bg_div;
window.onresize = resize_bg_div;
</script>
finally the HTML :
<div id="mainContainer">
<div id="header">
<h4>By: Ryan Chapin</h4>
</div>
<!-- The conainter divs for the center and the right columns -->
<div id="centerRightColumnContainer">
<div id="centerRightColumnPositioner">
<div id="centerColumnContainer">
<div id="centerColumn">
<p>If you are a practical web designer that is looking to use a fully compliant CSS layout that:</p>
</div>
<!-- centerColumn, END -->
</div>
<!-- centerColumnContainer, END -->
</div>
<!-- centerRightColumnPositioner, END -->
</div>
<!-- centerRightColumnContainer, END -->
<!-- The left column div -->
<div id="sideBarLeft">
<p>This is some sample text to go in the side bar</p>
<ul>
<li>Home</li>
<li>Open Source</li>
<li>Contact</li>
</ul>
</div>
<!-- sideBarLeft, END -->
</div>
<!-- mainContainer, END -->
Now the problem is that when i resize the browser and move the scroll bar (y-axis) my header moves upwards and it will leave a white div-like portion on top of my other containers. how to fix this so that when i minimize my browser the header never animates like that. Here a sample Fiddle
I'm trying to create a div with a fluid-width textarea inside it. The width of the div should be at least 3em, at most 12em, and otherwise the exact same width as the textarea. I've got this working. See fiddle.
When the textarea fills up the div, it creates a line break rather than overflowing to the left, which is the effect I'm going for. Any ideas how to achieve this?
Edit: This code is based on A List Apart's article on Expanding Text Areas.
html
<div><pre><span></span><br></pre>
<textarea autofocus placeholder='Note'></textarea>
</div>
css
div {
border: 1px solid grey;
position: relative;
display: inline-block;
/* overflow: hidden; */
height: 1.3rem;
min-width: 3rem;
max-width: 12rem;
}
textarea {
border: 1px solid blue;
resize: none;
background: rgba(0,0,255,.5);
padding: 0;
width: 100%;
}
textarea, pre {
position: absolute;
top: 0;
right: 0;
height: 100%;
margin: 0;
/* visibility: hidden; */
}
pre {
border: 1px solid pink;
position: relative;
max-width: 100%;
}
* {
font: 1rem arial;
}
js
var textarea = document.querySelector('textarea');
var span = document.querySelector('span');
textarea.addEventListener('input', function() {
span.textContent = textarea.value;
});
In your CSS use:
white-space: nowrap;
overflow: hidden;
Edit this is deprecated:
Can you set wrap="off" as an attribute on the textarea?
edit: to say overflow: hidden; (per comment below) original: overflow: auto;
I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes under the left div.
When resizing the browser window, is it possible to have the right div keep its 275px width and make it squash the left div so it goes from a max-width of 70% down to 5% if necessary?
Here's my testing website if you want to see what I'm talking about exactly: http://mywptestsite.is-great.org/page-height-and-sidebar/
#primary {
float: left;
clear: none;
max-width: 70%;
margin-right: 22px;
}
.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
width: 100%;
padding: 0 20px 0 50px;
}
.site-main #tertiary {
float: right;
clear: none;
width: 256px;
position: static;
height: auto;
}
.site-main .widget-area {
padding: 30px 20px 0 0;
float: none;
width: 100%;
}
I would use display: table and table-cell for that.
JSFiddle: http://jsfiddle.net/maximgladkov/M3wP8/
HTML
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS
#container {
display: table;
width: 70%;
margin: 0 auto;
}
#content, #sidebar {
display: table-cell;
}
#content {
max-width: 70%;
border: 1px solid blue;
}
#sidebar {
width: 254px;
border: 1px solid red;
}