I have the following table created in d3 (see image below) which has two columns. However, I am unable to remove the white space on the right hand side of the table. Here is the html and CSS for the table:
html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="map">
<svg></svg>
</div>
<div class="box-plot">
<svg></svg>
</div>
<div class="table"></div>
<div class="line-chart">
<svg></svg>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
/* And the css*/
.map {
grid-area: map;
}
.map-path {
/* fill: rgba(0,0,0,0.01); */
/* stroke: rgba(0,0,0,0.2); */
/* stroke-width: 1px; */
}
.map-path.counties {
stroke: black;
stroke-width: 1px;
}
.map-path.catchments {
stroke: black;
stroke-width: 1px;
}
.map-path.aquifer {
/* stroke: rgba(0,200,0,0.5); */
/* stroke-width: 0.5px; */
}
.map-path.gwrockunit {
/* stroke: rgba(200,0,0,0.5); */
/* stroke-width: 0.5px; */
}
.map-path.selected-basemap-polygon {
stroke: black;
stroke-width: 2px;
}
.box-plot {
grid-area: box-plot;
}
.table {
grid-area: table;
overflow-y: scroll;
font-family: Courier;
/* max-width: 400px; */
border-collapse: collapse;
white-space: nowrap;
width: 100%;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
cursor: s-resize;
background-repeat: no-repeat;
background-position: 3% center;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
.line-chart {
grid-area: line-chart;
}
.grid-container {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: grid;
grid-template-areas:
'map map box-plot table'
'map map line-chart table';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container div {
background-color: white;
}
.grid-container div svg {
/* This makes it so the grid does not resize when the SVG is added */
position: absolute;
}
.basemap-selector-widget {
cursor: pointer;
}
.basemap-selector-widget rect {
fill: white;
stroke: black;
stroke-width: 2px;
border-radius: 25px;
}
.basemap-selector-widget text {
font-family: sans;
alignment-baseline: middle;
text-anchor: middle;
}
and I am using a grid-container as the layout.
Second image where I would like to remove everything to the right of the red line. And just have the table fit within the div.
Just replace width: auto with width: 100%. You can also want to specify box-sizing: border-box if you are not setting it document-wide.
It would be more convenient, however, if you add an HTML/CSS/JS runnable code snippet (Ctrl-M in editor).
Without the complete code is hard to tell, but try:
.table {
grid-area: table;
overflow-y: scroll;
font-family: Courier;
border-collapse: collapse;
white-space: nowrap;
width: 100%;
}
Now,complete code I can help..
Just add to your css
.table table {width:100%}
Related
I would like to have a collapsed sidebar like this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapse_sidebar.
However, I do not want the main div to move to the right after the sidebar is opened. Instead, I wish the division can be resize to be fit with the screen size at the moment.
I would greatly appreciate if anyone can help me with this issue.
You can avoid the main div from being pushed right by simply setting the style.marginLeft = "0px" in the openNav() function.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "0px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
</body>
</html>
I am using Node and Puppeteer to generate a PDF that uses a handlebars template. All is working as expected.
My only question is: how does one add border padding to the document, so that, if the document runs over multiple pages, the content doesn't go right up to the very edge of the page? Is there a style element I can use?
See my handlebars template below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PDF Result Template</title>
<style>
.container {
margin: auto;
padding: 30px;
font-size: 13px;
line-height: 13px;
font-family: 'Helvetica Neue', 'Helvetica';
color: #555;
}
.top-heading {
margin-bottom: -20px;
color: red;
}
.box {
width: 100%;
}
.table-box {
width: 100%;
table-layout: fixed;
}
.left-box {
float: left;
min-width: 25%;
max-width: 25%;
margin-top: -20px;
}
.right-box {
float: right;
min-width: 75%;
max-width: 75%;
}
.one-quarter {
border: #ccc thin solid;
max-width: 25%;
}
.half {
border: #ccc thin solid;
max-width: 50%;
}
.three-quarter {
border: #ccc thin solid;
min-width: 75%;
max-width: 75%;
}
.full {
border: #ccc thin solid;
max-width: 100%;
}
.highlighted {
font-weight: bold;
}
.flat-line {
border: none;
height: 1px;
background-color: #ccc;
}
.header {
clear: both;
margin-top: 120px;
text-align: center;
}
.centered {
text-align: center;
}
.details-cell {
padding: 0 8px;
}
.notes-table {
margin-top: 20px;
min-width: 100%;
}
.goal-heading {
font-weight: bold;
text-align: center;
}
.signature {
margin-top: 10px;
min-width: 100px;
max-width: 100px;
height: auto;
position: relative;
float: right;
}
</style>
</head>
<body>
<div class="container">
<table>
// Other code
</table>
</div>
</body>
</html>
You can access styling for the page like so:
#page {
margin: 10px 0;
}
So by adding the above to the handlebars template you're able to add the desired 10px of margin to the top and bottom of the document.
I can't seem to find what I am doing wrong here. The transform:translate property is causing a bad effect when the element is hovered.
Please look at this codepen.
https://codepen.io/kuromicho/pen/LYxrQPv
CSS
.row {
max-width: 600px;
margin: 0 auto;
border: 1px solid black;
}
.col {
display: block;
width:50%;
float: left;
border: 1px solid red;
}
.big-icon {
position: relative;
left: 50%;
transform: translateX(-50%);
transition: scale 0.2s;
}
.big-icon {
font-size: 300%;
color: #e67e22;
}
.big-icon:hover {
transform: scale(1.15);
}
HTML:
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
</head>
<body>
<div class="row">
<div class="col">
<ion-icon name="infinite-sharp" class="big-icon"></ion-icon>
</div>
<div class="col">
<ion-icon name="cart-sharp" class="big-icon"></ion-icon>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/ionicons#5.4.0/dist/ionicons.js"></script>
</html>
I don't know why you defined big-icon class twice in your CSS, but this is my fixes in the bottom of CSS file, take a closer look at those lines of CSS I commented/deleted:
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
height: 100vh;
}
body {
font-size: 20px;
font-family: "Lato", "Arial", sans-serif;
font-weight: 400;
}
.row {
max-width: 600px;
margin: 0 auto;
border: 1px solid black;
}
.col {
display: flex;
justify-content: center;
width: 50%;
/* float: left; */
border: 1px solid red;
}
.big-icon {
/* position: relative; */
/* left: 50%; */
font-size: 300%;
color: #e67e22;
/* transform: translateX(-50%); */
transition: transform 0.2s ease;
}
.big-icon:hover {
transform: scale(1.15);
}
how with the filter css property pop-up in this element to leave the background white?
need to leave the inner white when fillter , and I don't know how
now
need
.first{
width: 200px;
height: 50px;
border: solid;
background: white;
}
.first span{
display: none;
background: white;
}
.first:hover{
filter: brightness(55%);
}
.first span:hover{
width: 100px;
height: 25px;
border: solid;
display: block;
}
<div class="first"> <span>alert</span></div>
<div class="first"><span>alert</span></div>
you can use this style
.first{
width: 200px;
height: 50px;
border: solid;
background: white;
}
.first span{
display: none;
background: white;
}
.first:hover{
background: #0000004f;
}
.first:hover span{
width: 100px;
height: 25px;
border: solid;
display: block;
}
Whenever you use filter, all children of that element will inherit it.
To achieve what you want you need to make it a sibling. Here is an example:
HTML:
<div class="block">
<div class="block-filter"></div>
<span class="block-message">alert</span>
</div>
CSS:
.block {
position: relative;
width: 200px;
}
.block-filter {
height: 50px;
width: 100%;
border: solid;
background: white;
}
.block-message {
display: none;
background: white;
}
.block-filter:hover {
filter: brightness(55%);
}
.block-filter:hover + span {
filter: unset;
position: absolute;
top: 0;
left: 0;
border: solid;
display: block;
pointer-events: none;
background: white;
}
https://codepen.io/diego-fortes/pen/vYBJoeP
I wanna implement this idea by css :
What is the best approach to do that in CSS ?
Thanks very much !!
UPDATE
I've did this trick before with Headings , More information here :
Putting Heading within 2 horizontal lines in CSS
But when i tried to edit the heading version also didn't work with buttons .
http://jsfiddle.net/pB9MY/
body { background: #fff; }
h3 {
width: 500px;
font: 30px Arial;
font-weight: normal;
text-align: right;
position: relative;
}
h3 span {
background: #fff;
margin-right: 15%;
padding: 0 20px;
}
h3:before {
content: "";
width: 100%;
left: 0;
top: 50%;
position: absolute;
z-index: -1;
height: 0;
border-top: 8px solid grey;
opacity:.2
}
button{
background-color:green;
border:1px solid green;
border-radius:5px;
vertical-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h3><span><button>Hello</button></span></h3>
</body>
</html>
Is this what you're after?
Create a div for the text...
<div class="rightrounded">Some Text</div>
And apply the appropriate css...
.rightrounded {
width: 100px;
float: right;
border-radius: 5px;
background-color: #008000;
color: #fff;
text-align: center;
}
Fiddle here