CSS page rule option for optimal display in Safari

What is the workaround for using alternative rules in Safari? I am currently implementing the angularPrint directive to enable print functionality on certain pages. This directive includes some helper classes in my document and utilizes the @page directive. While everything works smoothly on most browsers, Safari does not support these specific rules. I have discovered that the rules are not compatible with Safari and I am seeking suggestions for alternatives. Any ideas?

 @page {
    margin: 0cm;
    /*size: A4 landscape;*/
  }

  @page :first {
    margin-top: 0cm;
  }

  @page :left {
    margin-left: 0cm;
    margin-right: 0cm;
  }

  @page :right {
    margin-left: 0cm;
    margin-right: 0cm;
  }
htmlcssprintingsafarimedia-queries

Answer №1

Give this a try.

@page {
    margin: 2in;    /* default margin for all pages */
}
@page :left {
    margin: 1in;    /* left page margin */
}
@page :right {
    margin: 3in;    /* right page margin */
}
@page :first {
    margin-top: 5in;    /* top margin for the first page */
}

For more information, check out this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the theme of a toggle button in Jquery Mobile when the button is pressed

I have a group of buttons with a specific class <div class="prog-day"> <div class="prog-clear" data-role="controlgroup" data-type="horizontal> <a href="#" data-role="button" data-mini="true" data-theme="b">Clear</a> ...

javascriptjquerycssjquery-mobile

Creating a New Section in your HTML Table

Can a page break be implemented in an HTML table? I've attempted to add page breaks to the following HTML: <html> <title>testfile</title> <meta http-equiv="expires" content="0" /> <meta http-equiv="cache-contr ...

htmlcss

I'm puzzled by the inconsistency of my scrolltop function on mobile, as it seems to be scrolling to various parts of the page depending on my

I am encountering an issue with a function that scrolls to a specific element when a button is clicked. Strangely, this functionality works fine on desktop but fails on mobile devices. It successfully scrolls to the correct position only when at the top of ...

javascripthtmljquery

Deactivate user input in Knockout Kendo TimePicker

Is it possible to prevent user input in the Kendo UI TimePicker while using knockout-kendo binding? In a previous project without knockout-kendo, I was able to achieve this by using the following code (see jsfiddle example): $('#timepicker').at ...

javascriptjqueryhtmlknockout.jskendo-ui

Tips for creating an animated effect on the active tab when it switches

Currently, I have a tab list containing li items. When an item is active, the li item has rounded corners and a box shadow effect. My goal is to add an animation that shows the active pill moving to its next position when it changes, but I am unsure of how ...

htmlcssreactjs

Identifying CSS on iPhone and iPad: A Guide

I need to adjust the CSS style based on different devices. This is how I currently have it set up: <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Destop.css")" media="only screen and (min-width: 1224px)"/> <link rel="s ...

htmlcss

The back to top feature is malfunctioning when navigating to a new page

I've been working with jQuery Mobile to create some pages and wanted to add a "back to top" element. It's been functioning well, but I've encountered an issue. When I navigate from one page, let's say #sport, back to #restaurants after ...

jqueryhtmlajaxjquery-mobilescrolltop

Tips for adjusting the size of a dropdown arrow icon

Is there a way to adjust the size of the drop-down icon using CSS? If not, I am looking to replace it with an image button. Thank you! <select> <option value="age">18</option> <option value="age"& ...

htmlcss

How do I change the class of an element using $this?

Please review the code below: $(".nwe-cl-icontext").click(function () { $(this).parent().toggleClass("nwe-active"); }) .nwe-cl-c.nwe-active { background: red; } .nwe-cl-c { background: green; } <scrip ...

htmljquerycss

The DOM assigned a new source to an image

Currently, I am working on a project that involves both jquery and PHP. In this project, users are able to upload images which are then displayed in blocks. The uploading functionality is already working, but I am facing an issue with setting the image sou ...

javascriptphpjqueryhtmldom

Update the value of the following element

In the table, each row has three text fields. <tr> <td><input type="text" data-type="number" name="qty[]" /></td> <td><input type="text" data-type="number" name="ucost[]" /></td> <td><input ty ...

javascriptjqueryhtml

Restrict the height of a division based on the adjacent division

Within the parent div, I have two child div elements that are meant to be positioned side by side. The first element contains an image which loads dynamically, meaning its height is unknown in advance. I want the parent div's total height to match the ...

htmlcssimageheightauto

When the field is clicked into for the second time, the month and year picker values will update

I recently implemented a month and year date picker code I found on a website. While I was able to customize the date format (mm/dd/yy) and successfully select values, I encountered an issue where the selected date changes drastically when clicking away fr ...

javascriptjqueryhtmlforms

What could be causing the last LI to drop onto a new line when floating UL to the right?

I'm currently working on creating a horizontal navigation that needs to align to the right side of the page. However, when I float the navigation to the right and then float all the list items to the left, the last item in the list breaks onto a new l ...

htmlcsscss-floathtml-lists

Steps on how to trigger an onmouseover event for entire blocks of text:

I'm currently in search of an onmouseover code that seems to be elusive on the vast internet. A CSS box format has been successfully created: .box { float: left; width: 740px; height: 300px; margin-left: 10px; margin-top: 10px; padding: 5px; border: ...

javascripthtml

Creating multiple thumbnails and storing them in various folders using CodeIgniter

I am looking to organize my images into different folders - one for original pictures and another for thumbnails. However, when I try to upload an image to the thumb directory, it shows up as empty. https://i.stack.imgur.com/5Fybz.png Below is the code s ...

phphtmlcodeigniter

Angular: Display an element above and in relation to a button

Before I dive in, let me just mention that I have searched extensively for a solution to my problem without much luck. The issue is describing exactly what I'm trying to accomplish in a way that yields relevant search results. If you're interest ...

cssangularhtmltypescript

Display a fancy slideshow that transitions to five new images when the last one is reached

Here is a screenshot of my issue: https://i.stack.imgur.com/duhzn.png Incorporating Bootstrap 3 and FancyBox, I am facing an issue with displaying images in rows. When I reach the last image, clicking on the right arrow should result in sliding to anothe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilize JavaScript or JQuery to create a dynamic pop-up window that appears seamlessly on the

Looking to create a unique feature on an HTML page? Want a clickable link that opens a "pop-up" displaying a specific image, right within the page rather than in a new tab or window? Ideally, this pop-up should be movable around the page like a separate ...

javascriptjqueryhtml

Identifying the precise image dimensions required by the browser

When using the picture tag with srcset, I can specify different image sources based on viewport widths. However, what I really need is to define image sources based on the actual width of the space the image occupies after the page has been rendered by th ...

javascripthtmlcss