How do I toggle between Portrait and Landscape card using custom toggle button

Donald Symmons 2,856 Reputation points
2023-03-30T01:25:04.3033333+00:00

Hello forum,

I recently created a toggle button to help toggle between landscape and portrait mode of bootstrap card, before user can print. Please how can I make the toggle button I created to change the orientation of the card?

I have no idea how to do this, which is why I am seeking for help and guidance. Thank you

Here is my CSS and HTML

<style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@900&display=swap');
        @import url('https://fonts.cdnfonts.com/css/graphik?styles=44660,44666,44654,44656,44658,44662,44652,44650,44664');
 
        .wrapper { display: flex; width: 100%; align-items: stretch; }
 
        @media screen and (min-width: 1200px) {
            #content { width: 100%; }
        }
 
        @media screen and (min-width: 360px) and (max-width:640px) {
            #content { width: 100%; }
        }
 
        #lblright { float: right; position: center; right: 5px; }
 
        hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
 
        #orgName { font-weight: 800; font-family: 'Mulish', sans-serif; font-size: 17pt; color: #0b2436; }
 
        #title { font-weight: 900; font-family: 'Mulish', sans-serif; font-size: 15pt; color: #0b2436; }
 
        #TextName { text-transform: capitalize; }
 
        #permitID { font-weight: 600; color: #616161; font-size: 20pt; }
 
        #infolbl { font-size: 3pt; font-weight: 300; }
 
        #headcolor { font-size: 3pt; font-weight: 300; }
 
        .fs-drop-op { opacity: 0; }
        .switch
        {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .switch input
        { opacity: 0;}
        
        .slider
        {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
        .slider:before
        {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
        input:checked + .slider
        {
            background-color: #2196F3;
        }
        
        input:focus + .slider
        {
            box-shadow: 0 0 1px #2196F3;
        }
        
        input:checked + .slider:before
        {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }
        
        /* Rounded sliders */
        .slider.round
        {
            border-radius: 34px;
        }
        
        .slider.round:before
        {
            border-radius: 50%;
        }
        #PermitPrint { background-color: #145c7c; border-color: #145c7c; font-size: 9pt; color: #fff; margin: 0 auto; min-width: 100px;}
    </style>

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrapper">
        <nav id="sidebar" style="font-family: 'Graphik', sans-serif;">
                <ul class="list-unstyled sidebar-header" style="padding: 10px; margin: 0 auto; margin-top: 2%;">
                    <li style="margin: 0 7px;">
                        <asp:Label runat="server" ID="id" Font-Size="9pt" ForeColor="#546579" Font-Bold="true" Text="ID"></asp:Label>
                    </li>
                    <li style="margin: 0 7px;">
                        <asp:Label ID="named" runat="server" Font-Size="10pt" Text="NAME" ForeColor="White"></asp:Label>
                    </li>
                </ul>
                <ul class="nav navbar-nav list-unstyled components">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Page 2</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Page 3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Page 4</a>
                    </li>
                </ul>
                <ul class="list-unstyled components">
                    <li class="nav-item"><a href="#">Page 5</a>
                    </li>
                </ul>
            </nav>
        <div id="content" style="font-size: 10pt; width: 100%;">
                <nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="font-size: 12pt; font-weight: 500; border-bottom: 0.1px solid #f3f3f4; background-color: #fff;">
                    <div class="container-fluid">
                        <button type="button" id="sidebarCollapse" class="btn btn-info">
                            <i class="fas fa-bars"></i>
                            <span class="sr-only">Toggle Navigation</span>
                        </button>
                        <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-bars"></i>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav ml-auto">
                                <li class="dropdown" runat="server" style="padding: 5px; font-weight: 400;">
                                    <asp:Label ID="user" runat="server" Font-Size="10pt" Text="Login Username" ForeColor="#0b2436"></asp:Label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <asp:UpdatePanel ID="UpdatePane1" runat="server" ClientIDMode="Static" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 0%;">
                            <div class="col-sm-7" style="width: 100%; margin-bottom: 1%;">
                                <asp:Panel Class="print-contents" ID="pnlContents" runat="server" BorderStyle="Solid" BorderWidth="2" BorderColor="#f0f1f2">
                                    <div class="card1" runat="server" id="permit" style="width: 100%; margin: 0 auto; padding: 6px; border-radius: 6px; border: 1px solid #dde0e2;">
                                    <div class="row" style="width: 100%;">
                                        <div class="col-2">
                                            <asp:Image ID="Image2" ImageUrl="~/images/resources/linkedin.png" AlternateText="logo" runat="server" Width="35" Height="35" />
                                        </div>
                                        <div class="col-8">
                                            <span style="float: inline-start;">
                                                <div style="text-align: center;">
                                                    <asp:Label ID="Label7" runat="server" Text="Sleek Inc"></asp:Label>
                                                </div>
                                                <div style="text-align: center;">
                                                    <asp:Label ID="title" runat="server" Text="JAZZ MUSICAL FEST"></asp:Label>
                                                </div>
                                                <div style="text-align: center;">
                                                    <asp:Label ID="Label8" runat="server" Text="Emerald Event Center, 75 Mayne Avenue, Calabar"></asp:Label>
                                                </div>
                                            </span>
                                        </div>
                                        <hr style="margin-top: 3px;" />
                                    </div>
                                    <div class="eventdetail" runat="server" id="eventdetail" style="display: block; margin: 0 auto; margin-top: 5%;">
                                        <div class="row" style="width: 100%;">
                                            <div class="col-4">
                                                <asp:Label ID="Label4" runat="server" Text="Access Level"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label5" runat="server" Text="Date"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label6" runat="server" Text="Time"></asp:Label>
                                            </div>
                                        </div>
                                        <div class="row" style="width: 100%;">
                                            <div class="col-4">
                                                <asp:Label ID="Label11" runat="server" Text="REGULAR"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label13" runat="server" Text="Mar 17, 2023"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label15" runat="server" Text="8:00 PM"></asp:Label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top: 5%; margin-bottom: -1%;">
                                        <div class="col-sm-10">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <asp:Label ID="Label2" runat="server" Text="David Iriepekin"></asp:Label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="width: 100%; margin: 0 auto;">
                                            <div class="col-sm-5">
                                                <div class="form-group">
                                                    <div class="input-group">
                                                        <asp:Label ID="phonelbl" runat="server" Text="0802347568"></asp:Label>
                                                    </div>
                                                </div>
                                                <div class="form-group" style="float: left; font-size: 5pt;">
                                                    <div class="input-group">
                                                        <asp:Label ID="permitID" runat="server" Text="31570"></asp:Label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-7">
                                                <div class="form-group" style="float: right; font-size: 5pt;">
                                                    <div class="input-group">
                                                        <asp:Image ID="Image3" ImageUrl="Test.png" runat="server" Width="80" Height="80" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                </asp:Panel>
                            </div>

                            <div class="col-sm-4" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff;">
                                <div class="" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 1%; border-radius: 4px;">
                                    <div style="margin-top: 1%; margin-bottom: 4%;">
                                        <label style="font-weight: 500; font-size: 8pt; color: #93979e;">Edit your permit</label>
                                    </div>
                                    <asp:Label ID="headcolor" runat="server">Header Color</asp:Label>
                                    <div class="input-group" style="font-size: 4pt;">
                                        <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                        <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
                                            PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ColorChanged" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                                <span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                            </span>
                                        </div>
                                    </div>
                                    <asp:Label ID="Label3" runat="server">All Labels Color</asp:Label>
                                    <div class="input-group" style="font-size: 4pt;">
                                        <asp:TextBox ID="BackTxt" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                        <cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="BackTxt"
                                            PopupButtonID="BackColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="BackChangedColor" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="BackColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                                <span id="perm_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                            </span>
                                        </div>
                                    </div>
                                    <asp:Label ID="fontlbl" runat="server">Choose Font</asp:Label>
                                    <div class="input-group">
                                        <input type="text" class="fonts" />
                                    </div>
                                    <br />
                                    <asp:Label ID="Label1" runat="server">Orientation</asp:Label>
                                    <div class="input-group">
                                        <label class="switch">
                                            <asp:CheckBox ID="checktoggle" runat="server" Checked="true" />
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                    </Triggers>
                </asp:UpdatePanel>
                <br />
                <div style="margin: 0 auto; padding: 10px;">
                    <asp:Button ID="PermitPrint" runat="server" CssClass="btn navbar-btn" Text="Print" OnClientClick="return PrintPanel();" />
                </div>
            </div>
            </div>
    </form>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
    <script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
    <script type="text/javascript">
         //This is the javascript for changing label font family.
        $(document).ready(function () {
            function selectFontAndApplyToEle(fontName, callback) {
                $('div.font-select').find('.fs-results li').removeClass('active');
                var dropEle = $('div.font-select').find('.fs-drop');
                var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
                dropEle.addClass('fs-drop-op');
                var posFont = fontToSelect.offset().top
                var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
                $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
                fontToSelect.addClass('active').trigger('click');
                setTimeout(function () {
                    $('div.font-select a div').trigger('click');
                    dropEle.removeClass('fs-drop-op');
                    callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
                }, 500);
            }

            $(function () {
                $('input.fonts').fontselect({
                    style: 'font-select',
                    placeholder: 'Select a font',
                    lookahead: 2
                }).on('change', function (e) {
                    var fontFamily = $(this).val().replace(/\+/g, ' ');
                    $('.card1').css('font-family', fontFamily);
                });
                selectFontAndApplyToEle('Anton', function (fontFamily) {
                    $('.card1').css('font-family', fontFamily);
                    setTimeout(function () {
                        selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
                            $('.card1').css('font-family', fontFamily);
                        });
                    }, 1000);
                });
            });
        });
         //This is where label colors can be changed, both for all labels and one label.
        function ColorChanged(sender) {
            document.getElementById("title").style.color = "#" + sender.get_selectedColor();
        }
            function ChangedAllColor(sender) {
                document.getElementById("permit").style.color = "#" + sender.get_selectedColor();
            }
    </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript">
        //My sidebar toggle navigation
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#sidebarCollapse').on('click', function () {

            $('#sidebar').toggleClass('active');

            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });

        function PrintPanel() {
            window.print();
            var panel = document.getElementById("<%=pnlContents.ClientID %>");
             var printWindow = window.open('', '', 'height=500,width=800');
             printWindow.document.write('<html><head><title>DIV Contents</title>');
             printWindow.document.write('</head><body >');
             printWindow.document.write(panel.innerHTML);
             printWindow.document.write('</body></html>');
             printWindow.document.close();
             setTimeout(function () {
                 printWindow.print();
             }, 500);
             return false;
         }
    </script>
</body>
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,425 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,292 questions
0 comments
Accepted answer
  1. Lan Huang-MSFT 25,956 Reputation points Microsoft Vendor
    2023-03-30T08:46:16.1533333+00:00

    Hi @Donald Symmons,

    You can't lock a website or a web application in a specific orientation. It goes against the natural behaviour of the device.

    According to your project, I think your requirement should be to achieve horizontal printing when the web page is large, and vertical printing when the screen is small.

    You can use CSS media queries to do this,

     @media print and (min-width: 360px) and (max-width:640px) {
            @page {
                size: A4 portrait;
            }
        }

    Only need to use window.print() in PrintPanel()

    
 function PrintPanel() {
            window.print();
            return false;
        }

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest