Issue with ABCpdf failing to implement inline CSS styles

On my aspx page, I have a script containing the following CSS:

<style type="text/css">
        .subcontainer{margin: 0 auto; padding-top: 20px}
       .hide-val{display:none;}
    </style>

While the page loads fine in the browser and the hide-val class is not displayed, the styles are not applied when using AddImageURL.

Doc theDoc2 = new Doc();

            theDoc2.HtmlOptions.UseScript = true;
            theDoc2.HtmlOptions.Media = MediaType.Print;
            theDoc2.HtmlOptions.InitialWidth = 1048;

            //for multiple pages
            theDoc2.Rect.Inset(10, 30);

            theDoc2.Page = theDoc2.AddPage();
            int theID2;
            theID2 = theDoc2.AddImageUrl(urlToHtmlPage);

            while (true)
            {
                theDoc2.FrameRect(); // add a black border
                if (!theDoc2.Chainable(theID2))
                    break;
                theDoc2.Page = theDoc2.AddPage();
                theID2 = theDoc2.AddImageToChain(theID2);
            }

            for (int i = 1; i <= theDoc2.PageCount; i++)
            {
                theDoc2.PageNumber = i;
                theDoc2.Flatten();
            }
            //end multipage 
            theDoc2.Save(HttpContext.Current.Server.MapPath("htmlimport.pdf"));
            theDoc2.Clear();

I have come across similar questions but haven't found a solution yet.

Is there a way to include the CSS style in the document?

c#cssabcpdfabcpdf9

Answer №1

Did you consider adding @media print to your CSS when setting 

theDoc2.HtmlOptions.Media = MediaType.Print;
?

You could try something like this:

<style type="text/css>
  @media print {
       .subcontainer{margin: 0 auto; padding-top: 20px;}
       .hide-val{display:none;}
  }
</style>

Alternatively, removing the line 

theDoc2.HtmlOptions.Media = MediaType.Print;
might also resolve the issue.

This solution hasn't been verified yet, but it's definitely worth a try.

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

Utilizing Bootstrap 4 to create fixed and fluid width side-by-side divs with scrollbars

I want to create a basic dashboard page. I decided to arrange two divs next to each other to serve as the side menu and content. Here is what the layout looks like: https://i.sstatic.net/EATK6.png I encountered an issue where the vertical scrollbar is n ...

csshtmltwitter-bootstrapbootstrap-4dashboard

Two separate pieces of text converge within a single span

I am facing a challenge with alignment in a bootstrap <span> element. Specifically, I want to align the word "amount" to the left, and the "$" to the right, within the same label. I attempted to nest a <span> inside another <span> and app ...

htmlcsstwitter-bootstrap

Enhance Bootstrap: adjust button width based on fluid text width

Incorporating Bootstrap 5 framework, I have designed a card that showcases brand information along with a navigation button on the right side. https://i.sstatic.net/25QVr.png When the description is brief, the button aligns perfectly in a single line. Ho ...

csstwitter-bootstrapflexboxbootstrap-5

Conceal and reveal text using JavaScript

I am attempting to create a function where text appears and disappears when clicking on the '+' sign, but I am facing difficulties in getting it to work. Additionally, when I apply this function to other sections, the original one stops working a ...

javascripthtmlcss

What is the redirect URL for the OAuth2 REST API in a .NET Standard class?

I am in the process of developing a .NET Standard class designed to handle connection information for publicly available REST APIs. Since this class is intended to be used by various front-end applications, some of which may not have a "redirect URL" to ca ...

c#.netoauth-2.0

Crafting CSS for styling input type file elements

My attempts to style the input type file with CSS have been unsuccessful. In my current code, the "choose file" button is displaying above my styled button. How can I use CSS to remove this? I am aiming to only display a blue colored button for uploading ...

cssbootstrap-4

Replace nested appsettings setup with abbreviated command line switch

Within my application, I have implemented appsettings to manage configuration loading. The main configuration file I am using is appsettings.json: { "FileReader": { "InputDirectory": "tmp" } } I am exploring the possi ...

c#asp.net.netasp.net-coreasp.net-web-api

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

javascriptjqueryhtmlcss

Delete the line-height property from the initial line

I have created text that is aligned using the "justify" option, and I would like to add some leading to the text. However, I want the first line of the text to remain at x:0px y:0px. Does anyone know how to remove the line-height from the first line of a ...

htmlcssdom

Transforming the appearance of web elements using jQuery (graphic)

While there are numerous resources on changing CSS with jQuery, I seem to be having trouble getting my image to hide initially and show up when a menu tab is clicked. Any help would be greatly appreciated! ;) h1 { text-align: center; } .Menu { widt ...

jquerycssimage

Organizing components within a division

It's maddening... I'm working on a website and trying to create a header div that includes the site name, search bar, and sign in/log in buttons. I want the logo on the left, search bar in the center, and sign in/log in buttons on the right, sta ...

htmlcss

Starting the animation only when the slide is visible

Struggling to add animations dynamically as a HTML/CSS developer who avoids JS but uses jQuery occasionally? Sound familiar? Well, I have. Recently, I managed to create a CSS-3 animation for the images in a Bootstrap carousel. Check out the code below: ...

htmlcsstwitter-bootstrap

Problems Arising with Javascript Animation Functionality

I've created a script for an interactive "reel" that moves up or down when clicking on specific arrow buttons. However, I'm encountering two issues: 1) The up arrow causes it to move downward, while the down arrow moves it upward. 2) After exe ...

javascripthtmlcssanimation

Ways to showcase information from a database in a textbox and then make modifications to it

After retrieving data from a SQL database, I am able to display it in my textbox and dropdownlist. However, when I try to update the information using the update button, the changes made in the textbox or dropdownlist do not reflect in the database. I ha ...

c#asp.netsql-server-2008

How can you line up various form elements, like pickers, in a row using Material UI?

As someone new to material ui, I haven't come across a solution for my specific issue yet. While there are similar questions, none seem to address the problem of aligning different form field types. My observation is that the material ui date picker ...

cssreactjstypescriptmaterial-ui

Unable to locate ChangeTracker within the entity framework

I've been trying to keep track of changes in entity framework within WPF, but I'm having trouble finding the definition for ChangeTracker. It's showing an error in my code snippet for the Cancel button in a data entry form in WPF MVVM Entity ...

c#.netentity-framework

Iterate through Javascript quotes and automatically navigate to the first quote once the loop is completed

I've encountered an issue with the script where I am unable to loop back to the first element once all child elements have been traversed. https://jsfiddle.net/pad5bp0o/2/ Here is the jQuery code snippet: $(document).ready(function() { var length ...

javascriptjqueryhtmlcss

Code for a succinct MySQL query in PHP using associative arrays

I'm trying to query multiple times like this: <?php $datacenter=mysqli_connect('localhost','user','pass','db'); After the DB connection, I want to count the number of votes for options 1, 2, and 3. $r11= ...

javascriptphphtmlcssmysql

What are some ways to expand the width and increase the spacing of bootstrap cards?

On my website, I have created Bootstrap cards that are displayed on two different pages. One set of cards is shown on the landing page, where I am looking to increase the spacing between them. The other set appears on the books page, and I want to make t ...

csslaraveltwitter-bootstrap

Click the navigation bar to toggle it on and off

I have a script that creates a navbar. Currently, the dropdown menu only opens when hovered over. The issue arises when accessing this on a mobile browser, as the dropdown menu does not open. How can I modify this script to make the dropdown menu open wh ...

javascripthtmljquerycss