Bootstrap Snippet Search results page - 2nd using HTML Bootstrap

"Search results page - 2nd"
Bootstrap 4.1.1 Snippet by karim111

4.1.1

599 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title> Search Results </title>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-P1YKL1G2MM"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-P1YKL1G2MM'); </script> <script src="/iFOx/bundles/modernizr?v=w9fZKPSiHtN4N4FRqV7jn-3kGoQY5hHpkwFv5TfMrus1"></script> <link href="/iFOx/Content/css?v=x65-FuHMwrSx-nDPbfads6l-HNUKuTzYqQwn_eBO5301" rel="stylesheet"/> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><link href="Content/bootstrap-datepicker.css" rel="stylesheet" /></head> <body> <form method="post" action="./HowDoI_iFOxSecurity" id="ctl01"> <div class="aspNetHidden"> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Revo9QOkv15IzMePkBvHNJg32sEmgtHH+s8mpX1qxy9iR7NMqwGvSsJJ/FZeJjD1i9oG0s1LieqS1rX+goVbJV6/DcIiQ/rCvnVdruSDutwC919YSRlKiw6sUegGo9zU3i5dnby09gJu1WchFtBMEUAxdnXQ2iJZ2YuYQ+lbaw1vCDYTcnIFoudnEv9vrZ1uAJZnSCg+Wsg5OhiBTckLWKXk23F3yICPzOteYduttHMYyLIAdDta4K/eKPB3FuYjPstdv8h98+TaYBNqp7kR7Q==" /> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['ctl01']; if (!theForm) { theForm = document.ctl01; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> <script src="/iFOx/bundles/MsAjaxJs?v=D6VN0fHlwFSIWjbVzi6mZyE9Ls-4LNrSSYVGRU46XF81" type="text/javascript"></script> <script src="Scripts/jquery-3.4.1.min.js" type="text/javascript"></script> <script src="Scripts/bootstrap.min.js" type="text/javascript"></script> <script src="Scripts/respond.min.js" type="text/javascript"></script> <script src="/iFOx/bundles/WebFormsJs?v=N8tymL9KraMLGAMFuPycfH3pXe6uUlRXdhtYv8A_jUU1" type="text/javascript"></script> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="52BF1E0C" /> </div> <script type="text/javascript"> //<![CDATA[ Sys.WebForms.PageRequestManager._initialize('ctl00$ctl09', 'ctl01', [], [], [], 90, 'ctl00'); //]]> </script> <script src="Scripts/bootstrap-datepicker.js"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#"> <img src="imgs/OxleasLogoTransparent.png" alt="Oxleas NHS Foundation Trust"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarMain"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="Default.aspx">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownReporting" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reporting </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item " href="Reports?Directorate=">Reports</a> <a class="dropdown-item" href="http://biapps.int.oxleas.nhs.uk/BusinessFinanceAnalytics/timetable.aspx" target="_blank">Timetable</a> </div> </li> <li class="nav-item"> <a title="Help and guidance on iFOx" class="nav-link" href="HowDoI_iFOxSecurity.aspx">How Do I?</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownApps" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Apps </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="http://biapps.int.oxleas.nhs.uk/DataEdo/" target="_blank">DataEdo</a> <a class="dropdown-item" href="http://ifoxapp1/mds/" target="_blank">MDS</a> <a class="dropdown-item" href="http://biapps.int.oxleas.nhs.uk/MMS/" target="_blank">MMS</a> <a class="dropdown-item" href="http://biapps.int.oxleas.nhs.uk/JobPlanning/" target="_blank">Job Planning</a> <a id="HyperLink2" class="dropdown-item" href="http://bitfs.int.oxleas.nhs.uk:8080/TFS/" target="_blank">TFS</a> <a class="dropdown-item" href="http://biapps.int.oxleas.nhs.uk/Zoning/" target="_blank">Zoning</a> </div> </li> </ul> <ul class="navbar-nav"> <li class="navbar-text">Hi <span id="sUsersName">Santa Clause</span>!</li> </ul> </div> </nav> <div class="container-fluid body-content"> <div class="row"> <div class="col-md-2 leftcolumn"> <div class="vertical-menu"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <hr /> <h4>Filter</h4> <a class="" href="HowDoI_ManagedGroups.aspx">directorate</a> </div> </div> </div> <div class="col maincolumn tab-content"> <div id="iFoxIssues" class="tab-pane fade"> <div class="DivContainer"> <h2>How Do I?<span id=""></span></h2> </div> <div class="DivContainer"> <h3>iFOx Issues</h3> <h3>Who can access iFOx?</h3> <p><a href="/sites/ifox/Pages/home.aspx">iFOx reporting</a> is accessible to all users, and in most cases no additional user permissions are required. The only exception to this is when you need to access reports that contain PID data. These reports are locked down to certain groups of users. For more information about accessing locked down reports, see <a href="/sites/ifox/iFOx_HowDoI/SitePages/Report%20security.aspx">iFOx report security.</a></p> <h4>Can't access iFOx?</h4> <p>If you are having problems accessing the main page of <a href="/sites/ifox/Pages/home.aspx">iFOx</a>, please look through the FAQ's below to troubleshoot the issue:</p> <ul> <li style="text-decoration: underline"><strong>I get a log in prompt every time I click on the iFOx link</strong></li> <li style="list-style: none; display: inline"> <ul> <li>Open Internet Explorer</li> <li>Open iFOx page and cancel any prompts</li> <li>Go to Tools --> Internet Options --> Security tab</li> <li>Click on Trusted sites</li> <li>Click on Sites button</li> <li>Where it says <b>Add this website to the zone:</b> type in <b><em>http://*.oxleas.nhs.net</em></b> and click on <b>Add.</b> <ul> <li>If you get an error prompt, uncheck <b>Require server verification (https:) for all sites on this zone</b> and try above step again</li> <li>Then click on <b>Close</b></li> </ul> </li> <li>Click on <b>Custom level...</b> <ul> <li>Scroll all the way down until you see <b>User Authentication</b> heading</li> <li>Click on <b>Automatic logon with current user name and password</b> and click <b>OK</b></li> </ul> </li> <li>Click <b>OK</b> again and you should return to Internet Explorer.</li> <li>Close Internet Explorer and reopen iFOx. Hopefully the logon prompt should no longer show.</li> </ul> </li> </ul> <ul> <li style="text-decoration: underline"><strong>I can't access a report</strong></li> <li style="list-style: none; display: inline"> <ul> <li> <span>Certain reports, especially those that contain Patient Identifiable Data (PID) on iFOx are locked to particular user groups. These user groups are managed by the report owners and only they can grant or revoke access to those reports. For further information including how to obtain access to these reports, please see</span> <a href="/sites/ifox/iFOx_HowDoI/SitePages/Report%20security.aspx"><span>iFOx report security.</span></a> </li> </ul> </li> </ul> </div> </div> <div id="reportPermissions" class="tab-pane fade show active" role="tabpanel" aria-labelledby="v-pills-home-tab"> <div class="DivContainer"> <h2>Search Result Filter<span id=""></span></h2> </div> </div> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> input[type=text] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } </style> <input type="text" name="search" placeholder="Search.."> </div> </div> </div> </div> <script> $(document).ready(function () { //Filter report list by search input $(".txtManagedGroupFilter").on("keyup change mouseup", function () { var value = $(this).val().toLowerCase(); $(".reportCategoryContainer, .reportCategoryItem").filter(function () { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> <hr /> <footer> <div class="col maincolumn"> <div class="footer"> <div class="row"> <div class="DivContainer col-md"> <h5>NHS</h5> <div class="footer-menu"> <a href="https://email.nhs.net" target="_blank">NHS Mail</a> <a href="https://www.nhs.uk" target="_blank">NHS UK</a> <a href="#"></a> </div> </div> <div class="DivContainer col-md"> <h5>Oxleas</h5> <div class="footer-menu"> <a href="https://theox.oxleas.nhs.uk/" target="_blank">Ox</a> <a href="http://oxleas.nhs.uk/" target="_blank">Intranet</a> </div> </div> <div class="DivContainer col-md"> <h5>BI & Performance</h5> <div class="footer-menu"> <a href="http://biapps.int.oxleas.nhs.uk/iFOx/" target="_blank">iFOx</a> <a href="http://bitfs.int.oxleas.nhs.uk:8080/TFS/" target="_blank">TFS</a> <a href="http://biapps.int.oxleas.nhs.uk/Zoning/" target="_blank">Zoning</a> <a href="http://biapps.int.oxleas.nhs.uk/JobPlanning/" target="_blank">Job Planning</a> </div> </div> </div> <div class="row"> <div class="col"> <h6>© 2020 - iFOx Portal | Version 2.0 </h6> <sup class="discreet">Informatics | Business Intelligence | Vijay Rabadia & Sanjib Pandey</sup> </div> </div> </div> </div>  </footer> <button onclick="topFunction()" id="buttonScrollToTop" class="btn buttonScrollToTop" title="Go to top"><i class="fa fa-arrow-circle-up"></i></button> </form> <script> $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); }); //Scroll to top var mybutton = document.getElementById("buttonScrollToTop"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function () { scrollFunction() }; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } //End of Scroll to top </script> </body> </html>

Related: See More

Vue Now UI Kit

Awesome Search Box

Awesome Search Box

Carousel with Search

Carousel with Search

Bootstrap 4 search Bar

Bootstrap 4 search Bar

Questions / Comments:

Posting GuidelinesFormatting