CODEWITHSUNDEEP
htmlcss
jugal
jugal

Reputation: 361

How to remove .tab-pane boder at the time of priniting the page?

I am using below code for border the .tab-pane and nav-tabs but the border is showing at the time of printing the page using window.print() ... any idea how to remove border at the time of print ?

.tab-pane {

    border-left: 3px solid blue;
    border-right: 3px solid blue;
    border-bottom: 3px solid blue;
    border-radius: 2px 2px 5px 5px;
    padding: 20px;
}
.nav-tabs {
 border-bottom: 3px solid blue;
}

Upvotes: 0

Views: 26

Answers (2)

neatlysliced
neatlysliced

Reputation: 245

Have you considered print media query? Can make the borders transparent to preserve spacing.

@media print{
    .tab-pane {
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-radius: 2px 2px 5px 5px;
        padding: 20px;
    }
    .nav-tabs {
        border-bottom: 3px solid transparent;
    }
}

Upvotes: 1

Ajinkya
Ajinkya

Reputation: 57

you can create separate classes for border properties and you can remove those classes at the time of printing using .classList.remove('classname') method

Upvotes: 1

Related Questions