I have developed a stock tracking app for my customers. This app also can generate barcode. I would like to allow print barcodes in printer, but I cannot do it properly. In a page, there have to be 72 barcodes that are ordered by CSS display:flex. Everything ok in my screen. But in print screen there is something wrong. I need help about this topic. I have done some triements as remove flex codes or decrease column about by decrease barcode numbers, it is ok again in printing.
CSS codes:
body {
background: rgb(204, 204, 204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
.tablo {
position: absolute;
margin-top: 1.05cm;
margin-left: 0cm;
display: flex;
flex-wrap: wrap;
}
.hucre {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 1px solid black;
width: 35mm;
height: 23mm;
padding-left: 0.11cm;
padding-right: 0.11cm;
padding-top: 0.065cm
}
.firm {
text-align: center;
line-height: 0.7;
font-size: 0.7rem;
font-weight: 600;
}
.barkod {
text-align: center;
line-height: 0.7;
font-size: 0.7rem;
}
svg {
height: 16mm;
}
#media print {
body,
page {
margin: 0;
box-shadow: 0;
}
}
HTML codes:
<page size="A4">
<div style="position:absolute; margin-top:3mm; margin-left:3mm">
<div class="d-flex">
<div class="hoverEffect me-2" onclick="history.back()"><i class="bi bi-arrow-left-circle"></i> GERİ
</div>
<div class="hoverEffect" onclick="window.print()"><i class="bi bi-printer"></i> YAZDIR</div>
</div>
</div>
<div class="tablo" id="tablo">
</div>
</page>
Problem visuals:
Everything is ok in website
Right and bottom (not shown) gaps appear
Try to solve my problem
actually, error not in your html or css code.
you have to choose right print option.
i think you want to take a pdf print or something like that.
so you must go to your print ( page / scale ) option.
you can look this images for advanced print settings.
( "none" margin. )
Related
I am trying to create a simple card, where image should cover/fit the full width of the container div.
My desired style would be something similar like in the image below.
I tried to apply object-fit:cover with 100% width but didn't help.
Here is how it looks like now
Here is related code and sandbox link
html/jsx
import React from "react";
import styles from "./Card.module.css";
function App() {
return (
<div className={styles.cardWrapper}>
<img
src="https://i.ebayimg.com/00/s/MTAyNFg1NzY=/z/qWYAAOSwm1Vcc6F4/$_72.JPG"
alt="description"
/>
<h3 style={{ fontSize: "15px" }}>title</h3>
<div className={styles.description}>description</div>
</div>
);
}
export default App;
and css
.cardWrapper {
width: 165px;
height: 192px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 25%);
text-align: center;
margin: 0 auto;
align-items: center;
}
.description {
font-size: 12px;
color: #808080;
margin-top: 20px;
font-weight: 400;
}
.cardWrapper img {
height: 100%;
width: 100%;
object-fit: contain;
width: auto;
height: auto;
}
Any help will be appreciated
Simply remove the width: auto and height: auto from your .cardWrapper img:
.cardWrapper {
width: 165px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 25%);
text-align: center;
margin: 0 auto;
align-items: center;
padding-bottom: 15px;
}
.description {
font-size: 12px;
color: #808080;
margin-top: 20px;
font-weight: 400;
}
.cardWrapper img {
height: 100%;
width: 100%;
}
<div class="cardWrapper">
<img
src="https://i.ebayimg.com/00/s/MTAyNFg1NzY=/z/qWYAAOSwm1Vcc6F4/$_72.JPG"
alt="description"
/>
<h3>title</h3>
<div class="description">description</div>
</div>
You were overwriting your already working 100% rules, so just leave them in, and remove anything else. You dont need the object-fit either.
As stated by #louielyl in the comments:
remove the absolute height on the .cardWrapper as well, otherwise the description has no room left in the wrapper and falls out.
The reason why your width:100% and height:100% didn't work is because your latter css width: auto; height: auto; overwrite them.
Try this and you will see your image grows as expected:
.cardWrapper img {
height: 100%;
width: 100%;
object-fit: contain;
}
It happens because it is CSS's behavior to override with the latter styling that has the same property, for details, you could take a look at Specificity.
I'm working with Reactjs in a page... like a diary.
At the end of the page, there is an img that I'm trying to set inside the page but because of the size, it goes out of the page... I try to modify it with Css, but still not working. Can you help me please?
This is how the page looks:
This is how the html code looks:
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
This is how I set the css:
.notes__main-content{
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar{
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content{
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input, .notes__textarea{
border: none;
&:focus{
outline: none;
}
}
.notes__title-input{
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea{
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image{
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
To be clear, what I want to do is to set the img to 150px so it can fit my page. Thank you for your help
You can add another div inside notes__image div. Lets call it notes__image__inner with a div wrapper.
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<div className="notes__inner__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
</div>
Update the notes__image and img CSS with this:
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
position: relative;
}
.notes__inner__image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.notes__inner__image img {
width: 100%;
position: static;
height: 100%;
object-fit: cover;
}
Images don't magically shrink to fit their containers. You need to tell them to do so:
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
You don't want to use the width property as that'll stretch images beyond their native size, and you don't want to set height as that will goof up aspect ratio.
Here I've converted className to class for demonstration purposes. If you view the fullscreen demo and shrink the window size you can see it in action.
.notes__main-content {
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar {
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input,
.notes__textarea {
border: none;
&:focus {
outline: none;
}
}
.notes__title-input {
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea {
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
<div class="notes__content">
<input type="text" placeholder="Somer awesome title" class="notes__title-input" autoComplete="off" />
<textarea placeholder="What happened today?" class="notes__textarea"></textarea>
<div class="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen" />
</div>
</div>
The className property is used in React. Is this a React application? If not, it needs to be revised to "class".
Also make sure your image does not overflow the bounds of the div. You can set strict width and height in the image by using the img tag's "width" and "height" properties. Or create a notes__image img declaration, like this:
.notes__image img {
width: 100%;
height: 100%;
}
Edit: here is a CodePen with CSS / HTML
I spend the weekend creating a CSS card for a website, only to realize that it's not responsive, at all. I'm not very well versed in CSS or responsive design, so I am hoping someone with more experience can help me out. So far, I've tried playing around with the #media tag, but I have not had any success. This is the relevant CSS:
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background: #ffffff;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.courses-container {
}
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
max-width: 100%;
margin: 20px;
overflow: hidden;
width: 1300px;
}
.course h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.course h2 {
letter-spacing: 1px;
margin: 10px 0;
}
.course-preview {
background-color: #2a265f;
color: #fff;
padding: 30px;
max-width: 250px;
}
.course-preview a {
color: #fff;
display: inline-block;
font-size: 12px;
opacity: 0.6;
margin-top: 30px;
text-decoration: none;
}
.course-info {
padding: 30px;
position: relative;
width: 100%;
}
.right-container {
padding: 30px;
background-color: #fff;
width: 30%;
line-height: 200%;
}
.progress-container {
position: absolute;
top: 30px;
right: 30px;
text-align: right;
width: 150px;
}
.progress {
background-color: #ddd;
border-radius: 3px;
height: 5px;
width: 100%;
}
.progress::after {
border-radius: 3px;
background-color: #2a265f;
content: '';
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 10%;
}
.progress-text {
font-size: 10px;
opacity: 0.6;
letter-spacing: 1px;
}
This is a simple suggestion, using CSS Grid. It's a two column card (as yours): the left column width-fixed (300px), the right column width-fluid. I've applied a little gap between them just to make my example clearer.
.card {
max-width: 1000px;
display: grid;
grid-template: "left right" / 300px 1fr;
background-color: #fed330;
border-radius: 10px;
height: 300px;
}
.card>* {
padding: 20px;
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
#media screen and (max-width: 700px) {
.card {
grid-template: "left" "right" / 100%;
}
}
<div class="card">
<div class="left">
Lorem ipsum....
</div>
<div class="right">
Lorem ipsum...
</div>
</div>
It could be a useful starting point.
#gaston
A good way to test and learn about CSS is to use the browser's "Inspect" feature, with which you can test the css behavior in real time.
Activating, Deactivating features, changing values, and adding new ones.
You see the result in real time.
Then just adjust your code according to your tests.
Just right-click on the area you want to inspect. and then Inspect.
You will see an area with HTML and another with CSS.
Click on the areas in HTML and see the corresponding css.
***** Then just test to find the desired result.
That's how I found the solution in your code:
In the ".course" class of your css you added the "width" property twice.
"max-width: 100%;"
"width: 1000px;"
However, the last property entered has priority over the previous ones.
"width: 1000px;" is defining that your card will ALWAYS have 1000px.
SOLUTION:
Just remove: "max-width: 100%;"
And Modify "width: 1000px;" for "max-width: 1000px;"
So your card will have a maximum of 1000px, the minimum will be defined according to the width of the window
It will look like this:
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba (0, 0, 0, 0.2);
display: flex;
margin: 20px;
overflow: hidden;
max-width: 1000px;
}
The #media function will set the css when the screen is adjusted to a minimum or maximum width chosen by you.
What is defined within #media will have priority over other css. but only when the window meets the width you set.
You can use this to change the shape of your card completely to very small screens, placing the purple part on top of the card for example.
If you've solved your problem, mark the right answer to help others.
Good luck.
I have a Navigation bar that reaches across my pages and follows the viewport when scrolling by using position:sticky The only class (I beleive) this really worth posting is .secondary-heading but i did not want to rule out the possibility of other scss affecting my issue.
.secondary-heading {
// This is the class in question....
position: sticky;
z-index: 1000;
top: 0;
width: 100%;
// The remainder might not be necessary...
.tab-bar {
height: 70px;
background-color: $white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px;
&:not(.with-title) {
box-shadow: 0px 5px 5px -5px $medium-gray;
}
img {
margin-right: 20px;
}
>div {
a {
#include font-size(20);
padding: 0 15px;
color: $dark-gray;
position: relative;
top: -4px;
padding-bottom: 19px;
padding-top: 25px;
&:hover {
color: $sea-blue;
cursor: pointer;
}
&.active {
background-color: $standard-gray;
color: white;
&:hover {
color: white;
cursor: initial;
}
}
}
}
}
.title-bar {
height: 70px;
background-color: $standard-gray;
color: white;
#include font-size(30);
box-shadow: 0px 5px 5px -5px $medium-gray;
display: flex;
align-items: center;
span {
margin-left: 240px;
}
}
}
On Chrome and Firefox, this styling works perfectly and scrolls as expected with the page, but in Edge, the bar flickers as it scrolls. Is there a way to style this so the bar does not flicker?
Here is my HTML for the NavBar:
<div class="secondary-heading">
<div class="tab-bar" [class.with-title]="showTitleBar">
<div>
<a routerLink="#" i18n>Home</a>
<a routerLink="#" i18n>Link</a>
<a routerLink="#" i18n>Link</a>
</div>
</div>
<div class="title-bar">
<span>{{ headerTitle }}</span>
</div>
</div>
I am using the versioning:
Microsoft Edge 42.17134.1.0 Microsoft EdgeHTML 17.17134
My solution was to use position: fixed while in IE as well as Edge. Not ideal, but I was able to get the result that I was looking for. Just still waiting on Microsoft to catch up...
I'm having trouble with flexbox. I'm trying to present book cards with a fixed footer (which will contain edit / remove buttons). but the footer of each card keeps running away, and results not in the same height. I searched in google and sof and found that:
.product-modify {
margin-top: auto;
margin-bottom: auto;
}
but it does not seem to work.
I would appreciate any tips.
I USE REACT BTW. DONT LAUGH AT ME. THIS IS A CODE SNIPPET WHICH DOES NOT RUN because I could not figure out how to add react es6 to here.
Thank You for any help (:
this is my css:
<div>
<h1 className="searchResultsHeadline">Search Results:</h1>
<section className="products">
{books.map((book, index) => (
<div key={book.id} className="product-card">
<BookCard />
</div>
))}
</section>
</div>
/* Book List */
.searchResultsHeadline {
font-family: "Montserrat", sans-serif;
}
.products {
display: flex;
flex-wrap: wrap;
}
.product-card {
flex: 1 17%;
margin: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 40%;
min-height: 100%;
padding: 5px;
}
.product-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.product-card:after {
content: "";
flex: auto;
}
.product-image img {
max-width: 100%;
border-radius: 5%;
}
.product-modify {
margin-top: auto;
margin-bottom: auto;
}
.empty-space {
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 130px;
height: 180px;
margin: 0 1% 24px;
}
#media (max-width: 600px) {
.product-card {
flex: 1 46%;
}
}
#media (max-width: 480px) {
.product-filter {
flex-direction: column;
}
}
Did you try a simple position:relative / position:absolute relationship like this
.product-card {
...
position:relative;
}
.product-modify {
position:absolute;
bottom:0;
}
First of all. Thank you very much for your answers.
I found out this piece of code that fixed my footer and makes it sticky footer which allways stick to the bottom:
.card-inner {
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
credit for the source:
flexbox sticky footer