I am trying to achieve borders on each print page, on chrome it works fine but in safari border is getting chopped.
I have created a div which is fixed. That div has borders so when window print is triggered, borders comes on all the pages on chrome, but not on safari.
Anyone has solution for this??
my code:
<div class="loading-mask" data-role="loader" style="display: none !important">
<div class="loader">
</div>
</div>
<div class="cutom-container"></div>
<div class="content-div">
<div>
<div class="logo-content">
<div class="logo-div">
<img class="print-logo" src="<?= $this->getViewFileUrl('images/cart-page-print-logo.png'); ?>" alt="<?= __('Print Header Logo'); ?>"/>
<p>
----- </h3>
</p>
<div class="input-container">
<label>Company Name : </label><span id="pcname"> </span>
</div>
<div class="input-container">
<label>Contact : </label><span id="pcontact"> </span>
</div>
<div class="input-container">
<label>Phone : </label><span id="pphone"> </span>
</div>
</div>
</div>
<div class="img-content">
<img class="promotional-img" src="<?= $this->getViewFileUrl('images/PRT-offer graphic.png'); ?>" alt="<?= __('Print Offer'); ?>"/>
</div>
</div>
<div>
<div class="input-container">
<label>Email : </label><span id="pemail"> </span>
</div>
<div class="input-container">
<label>Delivery Address : </label><span id="daddress"> </span>
</div>
<div class="input-container">
<label>Mailing Address : </label><span id="maddress"> </span>
</div>
</div>
<div>
<table id="product-list-print">
</table>
</div>
<div id="sub-total-print">
</div>
<div>
<div class="logo-content">
<p>
Shipping (Shipping rates are appox and apply to US Mainland ONLY)</br> - Please see Sales Specialist for exact quote. Shipping rates for Aff ordable Advantage Trailers do not apply. Park Model Units will require additional shipping fee. <strong>Estimate is valid for 7 days.</strong>
</p>
</div>
<div class="img-content">
<div>
To order this unit sign here
</div>
<div>
<canvas id="myCanvas" style="width: 100%">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</div>
</div>
</div>
css :
/* Print page css */
.cutom-container{
border : solid #670827 5px;
border-radius: 10px;
position:fixed;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
/*border: 5px solid red;*/
}
.content-div{
padding: 10px 5px 5px 5px;
display: none;
}
.logo-content{
display: inline-block;
width: 64%
}
.img-content{
display: inline-block;
width: 35%
}
.print-logo{
width: 50%;
}
.logo-div{
text-align: center;
}
.promotional-img{
width: 100%;
}
.img-content{
text-align: center;
}
.input-container{
padding: 8px;
text-align: left;
border:solid #670827 1px;
font-size: 15px;
margin: 10px;
}
/* end */
.warranty-container{
padding: 10px;
font-size: 16px;
border: solid;
border-width: 1px;
}
.cart-product-warrenty{
display: none;
}
.center-align{
text-align: center;
}
#signArea{
margin-bottom:20px ;
}
#media print {
#page {
border : solid #670827 5px;
border-radius: 10px; }
.cart-container{
display: none;
}
.cutom-container{
display: block !important;
padding: 15px;
}
.content-div{
display: block !important;
padding: 15px;
}
.cart-product-warrenty{
display: contents;
}
.summary.title{
display: none;
}
#sub-total-print>.fieldset{
display: none;
}
#block-shipping{
display: none;
}
input.qty{
width: 50px !important;
padding: 0 !important;
text-align: center;
}
.product-item-name{
text-decoration: unset;
font-size: 1.8rem;
line-height: 1;
font-weight: 700;
padding-top: 0px;
}
.messages{
display: none;
}
a{
text-decoration: none !important;
}
}
#media only screen and (max-width: 600px) {
.modal-content{
width: 80%;
}
.current{
width: 250px !important;
}
.sign-pad{
width: 247px !important;
}
.modal-content{
margin-bottom: 55px;
}
.cart-product-warrenty{
display: none;
}
}
Why height text box is less than button?
My Code :
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,#but {
float: left;
}
#but ,.txt {
border: 1px solid #999;
padding: 10px;
font-size: 20px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>
The <input> element, is one of the replaced elements, and In CSS, a replaced element is an element whose representation is outside the scope of CSS. It has some special styles from browser user agent stylesheet, and they don't get inherited by default, such as font-family, font-size, line-height etc., and those rules can determine a box's height.
You can force them to get inherited by setting <property>: inherit;, so that the <input type="text"> can inherit those styles from <div class="t"> and its parent <div id="container"> etc., so it will be able to get the same style as the <div id="but">, in order to make them the same height.
You can set those specific styles on the input box directly, but using inherit can prevent from overriding rules.
#container {
font-size: 20px;
overflow: auto;
}
.t,
#but {
float: left;
}
.txt {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.txt,
#but {
border: 1px solid #999;
padding: 10px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>
In addition, you will use a <button> tag instead of <div> button in the real case I think. To make the input field and button the same height, you will also need to set the same padding values for them directly.
#container {
font-size: 20px;
overflow: auto;
}
.t,
#but {
float: left;
}
.txt,
#but {
font-family: inherit;
font-size: inherit;
line-height: inherit;
border: 1px solid #999;
padding: 10px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<button id="but"><span>Search</span></button>
</div>
Browser handles difference html element and attribute differently i check it computed tab in chrome developer tool and find out input field render height differently 1 px more in top and bottom so its 2 px actual height you set.
these line will fix your problem, check the snippet for how to apply them.
font-size:16px;
line-height:16px;
height:16px;
font-family:sans-serif;
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,#but {
float: left;
}
#but ,.txt {
border: 1px solid #999;
padding: 10px;
font-size:16px;
line-height:16px;
height:16px;
font-family:sans-serif;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="" placeholder="write a name" />
</div>
<div id="but"><span>Search</span></div>
</div>
/You'll need to do something like this although there is likely to be some differences across systems./
.searchtext {
border:1px solid #000;
border-right:none;
padding:4px;
margin:0px;
float:left;
height:16px;
overflow:hidden;
line-height:16px;
}
.searchbutton {
border:1px solid #000;
background:#fd0;
vertical-align:top;
padding:4px;
margin:0;
float:left;
height:26px;
overflow:hidden;
width:5em;
text-align:center;
line-height:16px;
}
Try giving font-size to all your elements, they will become of equal height.
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,
#but {
float: left;
}
#but,
.txt {
border: 1px solid #999;
padding: 10px;
font-size: 14px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>
The problem is your font-size.
Please try to give font-size to all your elements like in the following fiddle:
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,
#but {
float: left;
}
#but,
.txt {
border: 1px solid #999;
padding: 10px;
font-size: 14px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>
This is not valid selector:
line-height: 100%;
You have to define height to container, or wrap your inner content with:
.container .wrap{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
And then set height: 100% to your #but element.
I'm learning to build a responsive website for myself. I'm having a problem with the box-sizing border-box on the top and bottom borders of one of my images. I have two columns of images of different heights, I want the edges to match up but I also want a few pixels of white space to separate each image.
My problem is when using box-sizing border-box on the top and bottom borders they stay outside of the edge of the image thus pushing the next image below down by a few pixels making it no longer match it's neighbour on the bottom edge.
I want to fix this issue before going ahead and adding borders on the other images. I'm new to CSS so perhaps there is something very obvious i've got wrong?
Any help to get the borders to stay on the inside edge of the images would be greatly appreciated!
I've attached a screen grab of what is happening.
border-box problem
#rightCol {
width: 50%;
height: auto;
float: right;
box-sizing: border-box;
border-left: 2px solid white;
}
#rightCol img {
width: 100%;
height: 100%;
display: block;
}
#leftCol {
width: 50%;
height: auto;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-right: 2px solid white;
}
#leftCol img {
width: 100%;
height: 100%;
display: block;
}
.innerBorder {
-moz-box-sizing: border-box;
box-sizing: border-box;
border-top: 4px solid white;
border-bottom: 4px solid white;
}
<div id="rightCol">
<div>
<img src="./images/pa.jpg" />
</div>
<div>
<img src="./images/game.jpg" />
</div>
<div>
<img src="./images/spine.jpg" />
</div>
</div>
<div id="leftCol">
<div>
<img src="./images/truck.jpg" />
</div>
<div>
<img class="innerBorder" src="./images/ccc.jpg" />
</div>
<div>
<img src="./images/box.jpg" />
</div>
</div>
I don't think your .innerBorder styles are needed. Try this:
#rightCol {
float: left;
box-sizing: border-box;
border-left: 2px solid white;
}
#rightCol img {
max-width: 100%;
height: auto;
}
#leftCol {
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-right: 2px solid white;
}
#leftCol img {
max-width: 100%;
height: auto;
}
<div id="leftCol">
<div>
<img src="./images/truck.jpg" />
</div>
<div>
<img src="./images/ccc.jpg" />
</div>
<div>
<img src="./images/box.jpg" />
</div>
</div>
<div id="rightCol">
<div>
<img src="./images/pa.jpg" />
</div>
<div>
<img src="./images/game.jpg" />
</div>
<div>
<img src="./images/spine.jpg" />
</div>
</div>
As you can see by the image. The icon sits high. Any margin or padding I seem to try moves the text box down with it. With it positioned extra high, it also pushed the search text up. Any suggestions on how to fix?
I just want the search icon to be the same height and even with the search box and not mess with the label text.
.icon-btn {
padding: 0;
margin: 0;
display: inline-block;
height: 26px;
}
.icon-magnifier-dark:before {
background-color: white;
border: solid;
content: "\e035";
color: #color-light;
font-family: outlinedFont;
font-style: normal !important;
font-size: 20px;
line-height: 1;
box-sizing: border-box;
}
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="Search" style="">Search</label>
<input type="text" name="Search" id="Search" size="10" style="" />
<a class="icon-btn" href="#" style="">
<i class="icon-magnifier-dark" style=""></i>
</a>
</div>
I think some other CSS might be overriding or changing the aligning, so you should check your full CSS once. I checked your JSFiddle which you provided in comment on one of the answer, I saw the aligning was OK in the Fiddle.
change font-size
font-family: outlinedFont;
font-style: normal !important;
font-size: 15px;
line-height: 1;
box-sizing: border-box;
}
You made it so difficult. Please Check this code below...
HTML:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="Search" style="">Search</label>
<input type="text" name="Search" id="Search" size="10" style="" />
<a class="icon-btn" href="#" style="">
<i class="icon-magnifier-dark" style=""></i>
</a>
</div>
Css:
.icon-btn {
display: inline-block;
width: 26px;
height: 26px;
background-color: red;
text-align: center;
padding:5px;
padding: 3px;
box-sizing: border-box;
}
.icon-magnifier-dark:before {
content: "\e035";
font-family: outlinedFont;
font-style: normal;
}
input[type="text"]{
width:150px;
height:26px;
vertical-align:top;
box-sizing: border-box;
margin-right: -5px;
}
Check the demo on jsfiddle
I'm trying to build a searchbox with label filters tucked to the left of the box, my markup looks something like this:
<div id="searchbox">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<input id="input" value="search query">
</div>
I put one of my attempts in a jsfiddle:
http://jsfiddle.net/nSDV9/7/
I want the input element to use all the remaining space in the searchbox, regardless of the number of filter elements tucked to the left of it (including zero). I have tried to apply the float/overflow:hidden/etc. tricks I could find, but I haven't been able to get the effect I want.
You can do like this:
http://jsfiddle.net/nSDV9/9/
Html:
<div id="container">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<div class="searchwrap">
<input id="searchbox" value="search query">
</div>
</div>
Css:
#container{
width: 500px;
background: red;
overflow: hidden;
position: relative;
}
.searchwrap{
background:green;
overflow:hidden;
position:relative;
height:20px;
}
.filter{
float:left;
background-color: green;
color: white;
font-weight: bold;
}
#searchbox {
position: absolute;
border: 0;
background: yellow;
left: 0;
width:100%;
}
See: http://jsfiddle.net/thirtydot/nSDV9/8/
HTML:
<div id="container">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<div class="search-container"><input id="searchbox" value="search query"></div>
</div>
CSS:
#container{
width: 500px;
background: #ccc;
overflow: hidden;
position: relative;
}
.filter{
float: left;
margin-top: 4px;
margin-right: 4px;
background-color: green;
color: white;
font-weight: bold;
}
.search-container {
overflow: hidden;
padding: 4px;
}
#searchbox {
width: 100%;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This is the cleanest I could make:
http://jsfiddle.net/nSDV9/11/