I am trying to format an html page as a court pleading which needs to print neatly on an 8.5 x 11 piece of paper. I have it looking to spec as an HTML, but when I go to print, the Container holding the contents expands beyond the body.
I have tried setting a specific width to the container to match the body, but that has not worked.
I created a fiddle with both the HTML and CSS:
See fiddle here
Here is the CSS for the BODY and CONTAINER:
body {
width: 8.5in;
height: 11in;
padding-left: 1.5in;
padding-right: .5in;
margin: 0;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.container {
border-left: 2px solid black;
border-right: 2px solid black;
width: 8.5in;
margin: 0;
padding: 5px;
height: 100%;
}
If you click on the "Open print preview" text at the bottom of the result, and then attempt to print, you can see how the document changes in the print preview window in Chrome.
This application is meant to work in Chrome specifically. I am trying to produce a document that looks similar to the following, with the grey thinner lines indicating the edge of the page:
I'm not sure this is the solution which you are looking for. I tested your code in different browser's print preview functionality and found different result. Then I stick with google chrome and coded accordingly.
I found you used same code twice so it was not working properly! I put the other code for screen only. and change the following code for print
#media print {
body {
/* width: 8.5in; */
/* height: 11in; */
margin: 0;
border-left: 1px solid gray;
border-right: 1px solid gray;
/*Newly added codes */
box-sizing: border-box;
}
.container {
border-left: 2px solid black;
border-right: 2px solid black;
width: 100%;
margin: 0;
padding: 5px;
height: 100%;
/*Newly added codes */
box-sizing: border-box;
/* Copied from body */
padding-left: 1.5in;
padding-right: .5in;
}
}
In my code I removed the textarea, instead I put a <p> tag with editable capability. Please review the code and let me know your opinion.
And this is what I have here in Google Chrome.
I tried several option but not found any proper one! But this one is tricky! Just used the following code for print CSS. Please replace and test this code.
#media print {
body {
/* width: 8.5in; */
/* height: 11in; */
padding-left: 1.5in;
padding-right: .5in;
margin: 0;
border-left: 1px solid gray;
border-right: 1px solid gray;
/*Newly added codes */
box-sizing: border-box;
}
.container {
border-left: 2px solid black;
border-right: 2px solid black;
width: 6.5in;
margin: 0 auto;
padding: 10pt 36pt;
/* height: 100%; */
/*Newly added codes */
box-sizing: border-box;
/* Copied from body */
}
}
After that I used the custom margin in google chrome (Though I have not printed it! So you better test it for final output).
Hopefully this will satisfy your need! :)
Related
When using Safari, Setting an outline in CSS causes issues for selectable elements where the outline dynamically changes. Some of the outline gets left behind on previously selected elements:
.box {
outline: 1px solid black;
}
.box.selected {
outline: 5px solid blue;
}
Here is a CodeSandbox that demonstrates the problem. In order to reproduce, it has to be run on Safari: https://codesandbox.io/s/nostalgic-shockley-luu3m?file=/src/App.js&resolutionWidth=320&resolutionHeight=675
Has anyone experienced this issue and been able to solve it?
That’s how it works for the safari browser but you can try changing the style for .box from outline to border
.box {
height: 75px;
width: 100px;
border: 2px solid black;
margin: 0px 5px;
background: red;
}
.box.selected {
outline: 5px solid blue;
}
I have simple css and html code and i wondering why last vertical image not working. I mean it border and margin should be added to last element not first.
Is anyone knows why this not work?
See in https://jsfiddle.net/st2Lwrgj/
* {margin: 0; padding: 0;}
.wrap {width: 250px; border: 1px solid red;overflow:hidden;}
img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
img.vertical {
width: 45%;
float: left;
margin-right: 10px;
}
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
:nth-child(even) will apply to every second image (second, fourth and so on). When you insert a horizontal image without the .vertical class you will break this order.
The following is a bit of a workaround, but the logic is pretty simple.
First we select every second image using img.vertical:nth-child(even)
We then find images without the .vertical class using:not(.vertical)
We then use the general sibling selector to select the following images and revert the order using img.vertical:nth-child(odd) instead of even.
As we have now applied borders to both odd and even ocurances of img.vertical, we need to remove the styling from the images we selected at point 1. We do this with a selector as set in point 3, but with even instead of odd: img:not(.vertical) ~ img.vertical:nth-child(even)
TLDR; change this part:
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
Into the following:
img.vertical:nth-child(even),
img:not(.vertical) ~ img.vertical:nth-child(odd) {
margin-right: 0px;
border: 2px solid blue;
}
img:not(.vertical) ~ img.vertical:nth-child(even) {
margin-right: 10px;
border: 0;
}
You can see how this works in this fiddle.
This question already has answers here:
Nesting CSS classes
(8 answers)
Closed 5 years ago.
I was reading documentation about Angular Material and I ran into this:
.column-login {
padding: 16px;
div {
background: #f5f5f5;
border: 1px solid #000;
padding: 50px;
margin: 16px 0;
}
}
And it seemed to me a little bit weird.
I'm using Visual Studio Code and it shows a bunch of errors there just as I was expecting.
But the code works perfectly.
Now, is there any equivalent to that piece of css code?
Because I tried:
.column-login {
padding: 16px;
}
.column-login > div {
background: #f5f5f5;
border: 1px solid #000;
padding: 50px;
margin: 16px 0;
}
And:
.column-login {
padding: 16px;
}
.column-login div {
background: #f5f5f5;
border: 1px solid #000;
padding: 50px;
margin: 16px 0;
}
But it broke. It only works with the first piece of code I just showed you.
But I don't know, it seems to me so weird.
Can anybody explain me why is it correct?
Nested rules is not valid CSS, but it is a feature of a CSS preprocessor program like Sass - it generates valid CSS when compiled.
Your sample generates the following from Sass:
.column-login {
padding: 16px;
}
.column-login div {
background: #f5f5f5;
border: 1px solid #000;
padding: 50px;
margin: 16px 0;
}
I am styling input[type=range] using CSS, and done with thumb and track.
All of three(-ms, -moz, -webkit) browser have proper prefix.
But, I don't know what vender prefix is suit to style progress on Webkit browser, such as Chrome.
On Internet Explorer and Microsoft Edge, -ms-fill-lower works great.
On Firefox, using -moz-range-progress solved the problem.
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 350px;
}
/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: -7px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
/* width: 150px;
height: 5px; */
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
}
input[type=range]::-moz-range-progress {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
/* Microsoft */
input[type=range]::-ms-track {
height: 2px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
background: #ddd;
}
<input type="range" />
This example will work as I expected on Microsoft Edge, moz://a Firefox, and Internet Explorer, but looks differently on Chrome.
I already read Styling input range for webkit with pure CSS , and tried on mine,
but it works strangely when multiple input[type=range]s are on one document.
So, the question is,
Is there any proper vender prefix for styling track that thumb is already passed, only using CSS?
To the best of my knowledge, this isn't possible. Below is a snippet from Chrome showing the Shadow DOM elements for <input type="range" />:
<input type="range">
#shadow-root (user-agent)
<div style="-webkit-appearance:inherit">
<div pseudo="-webkit-slider-runnable-track" id="track">
<div id="thumb">
</div>
</div>
</div>
</input>
In general, you might want to take a look at range.css, it's a cross-browser code generator for custom range sliders. However, it doesn't provide a way to style the ::-moz-range-progress region. Other example's I've found, including this Codepen snippet, use the deprecated and no-longer-functional deep shadow-piercing selector. For a fully cross-browser solution, you'll have to make your own element.
Soo ive tried this code
.itemselected {
Width: 150px;
height: 150px;
border-bottom: 1px solid #111;
}
But when i use that it loks very weird like theres a border around the Whole thing, i only want the border at the bottom.
.itemselected {
Width: 150px;
height: 150px;
border-bottom: 1px solid #111;
border-top: 0;
border-left: 0;
border-right: 0;
}
That should fix it, i had the same problem before but when i used that code to set the other borders to 0 it worked perfectly :)