We help IT Professionals succeed at work.

Website styling issues when wrapping website elements in form tag.

Hello

I purchased a Dashboard design but I am having a few issues with it;
I require to wrap the html elements in a form tag; but styling gets screwed up like below:
wrapping all html elements in a form tag.Without wrapping the tml elements in a form tag it works like below:
without wrapping all html elements in a form tag.
For my purposes of using the template I need the elements wrapped in a form tag like in "wrapped_form_index.html", but I am unable to fix the issues or determine why the template stops working when being wrapped in a form tag.
Template site files are attached here: Template-Problem.zip
(files that applies to the website are located in /Scripts and /Styles)
- another minor issue is that the menu icons disappear in a position between full size and the mobile menu boundaries, if you have any idea where the css does this change please point it out as I would like to keep menu icons and not have three menu styling states.
Comment
Watch Question

Ryan ChongSoftware Team Lead

Commented:

try add at Page wrapper instead, like:

<!-- ============================================================== -->
        <!-- Page wrapper  -->
        <!-- ============================================================== -->
        <div class="page-wrapper">
            <form id="bodyform">
                <!-- ============================================================== -->
                <!-- Container fluid  -->
                <!-- ============================================================== -->
                <div class="container-fluid">
                    <!-- ============================================================== -->
                    <!-- Bread crumb and right sidebar toggle -->
                    <!-- ============================================================== -->
                    <div class="row page-titles">
                        <div class="col-md-5 align-self-center">
                            <h3 class="text-themecolor">Dashboard 1</h3>
                        </div>
                        <div class="col-md-7 align-self-center">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="javascript:void(0)">Home</a>
                                </li>
                                <li class="breadcrumb-item">Apps</li>
                                <li class="breadcrumb-item active">Dashboard 1</li>
                            </ol>
                        </div>
                    </div><!-- ============================================================== -->
                    <!-- End Bread crumb and right sidebar toggle -->
                    <!-- ============================================================== -->
                    Hello <!-- ============================================================== -->
                    <!-- ============================================================== -->
                    <!-- End Page Content -->
                    <!-- ============================================================== -->
                </div><!-- ============================================================== -->
                <!-- End Container fluid  -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- footer -->
                <!-- ============================================================== -->
                <footer class="footer">
                    � 2019 Admin Template
                </footer><!-- ============================================================== -->
                <!-- End footer -->
                <!-- ============================================================== -->
            </form>
        </div>
        <!-- ============================================================== -->

Author

Commented:
Ryan, the form tag needs to wrap around the whole page(as tried in "wrapped_form_index.html")  as the platform that I am using requires the areas to be within the form tag,
ASP.NET Web Forms technology doesn’t allow more than one <form> tags with runat=“server” on a single Web Form page.
Ryan ChongSoftware Team Lead

Commented:

what if just put the form end tag just before the body end tag?


Author

Commented:

I get the same styling problems(like in the screenshot posted in main post) when wrapping in a form like this;

My template had multiple forms tag that caused the display error.