Full-Screen Layout

See example: Full-Screen Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>CLUI</title>
    <link rel="shortcut icon" href="static/favicon.png"/>

    <!-- CSS to be documented -->
    <link rel="stylesheet" href="css/corelogic-ui.css">

    <!-- Main libraries -->
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/corelogic-ui.js"></script>
</head>
<body>
<nav class="navbar navbar-default nav" role="navigation">
    <div class="mobile-overlay"></div>
    <div class="mobile-search">
        <div class="mobile-searchbar">
            <i class="fa fa-search"></i>
            <form name="mobileForm">
                <label class="sr-only" for="mobileSearchbox">Search for something...</label>
                <input type="text" class="navbar-search" placeholder="Search something..." id="mobileSearchbox">
            </form>
            <i class="fa fa-times"></i>
        </div>
    </div>
    <div class="container-fluid">
        <div class="navbar-collapse-btn">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#example-navbar-collapse-3">
                <span class="sr-only">Toggle navigation</span>
                <i class="fa fa-bars" aria-hidden="true"></i>
            </button>
        </div>
        <button type="button" class="navbar-mobile-search">
            <i class="fa fa-search" aria-hidden="true"></i>
        </button>

        <div class="navbar-header">
            <div class="navbar-logo"></div>
            <div class="application-name">
                <h1>CoreLogic UI</h1>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse-3">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Active Page</a></li>
                <li><a href="#">Inactive Page</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
                <li><a href="/layout_-_full-screen_layout.html?page=full-screen_layout">Back To CLUI</a></li>
            </ul>
            <form class="navbar-form navbar-search">
                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control" id="navSearch" placeholder="Search for an address..."/>
                        <i class="fa fa-search left-icon"></i>
                    </div>
                </div>
            </form>
            <i class="fa fa-times"></i>
        </div>
    </div>
</nav>
<div class="secondary-nav">
    <div class="container-fluid more">
        <ul class="secondary-tabs">
            <li class="active"><a class="secondary-tab" href="#">Secondary</a></li>
            <li><a class="secondary-tab" href="#">Navigation</a></li>
            <li><a class="secondary-tab" href="#">Element</a></li>
            <li><a class="secondary-tab" href="#">Example</a></li>
        </ul>
    </div>
</div>

<div class="container-fluid container-full container-background vertical-parent">
    <div class="vertical-center">
        <div class="row">
            <div class="col-xs-12 col-md-6 col-md-offset-3">
                <div class="panel panel-default scrollable">
                    <div class="panel-heading">
                        <div class="panel-title">Search for a Property</div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="form-group form-group-lg">
                                <div class="input-group">
                                    <i class="fa fa-search left-icon"></i>
                                    <input class="form-control" id="middleSearch" placeholder="Enter an address"/>
                                    <div class="input-group-btn">
                                        <button class="btn btn-primary btn-lg" id="search">Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  $(function () {
    //For demo purposes only
    $('#search').on('click', function () {
      $('.panel-body').find('.row').append('<div class="row"><label>1,000 matching results found:</label></div><div class="row-fluid results"><ul><li><a href="#">Lorem ipsum dolor sit amet, in quam vulputate, arcu amet vel, risuslacus.</a></a></li><li><a href="#">Arcu dapibus.</a></li><li><a href="#">Ante urna, amet sem posuere, pellentesque hendrerit.</a></li><li><a href="#">Etiam blandit, et fusce.</a></li><li><a href="#">Viverra ante, sit nulla.</a></li><li><a href="#">Arcu fringilla, vehicula quis.</a></li><li><a href="#">Sit natoque.</a></li><li><a href="#">In eget in, ridiculus vitae lacinia.</a></li><li><a href="#">Purus nam.</a></li><li><a href="#">Elit velit neque.</a></li><li><a href="#">Neque erat potenti, eu pulvinar porta.</a></li><li><a href="#">Morbi pellentesque a, erat duis, sed elit.</a></li><li><a href="#">Amet cillum eros, quis vestibulum, pharetra suscipit.</a></li><li><a href="#">Sodales integer id, hendrerit nam fames, lorem et mi.</a></li><li><a href="#">Leo vel justo.</a></li><li><a href="#">Suscipit augue.</a></li><li><a href="#">Dis et sit.</a></li><li><a href="#">Magna lacinia cursus, pede eu in.</a></li><li><a href="#">Eu per.</a></li><li><a href="#">Non at nec, facilisis massa, eros wisi.</a></li><li><a href="#">Eu ac, vestibulum velit.</a></li><li><a href="#">Felis amet volutpat.</a></li><li><a href="#">Magnis erat, vehicula cras nunc, quis magnis.</a></li><li><a href="#">Ac ipsum nec, vitae mauris sit, amet non.</a></li><li><a href="#">Accumsan voluptate vel.</a></li><li><a href="#">Lorem tortor sit, fusce erat porttitor, leo nulla tellus.</a></li><li><a href="#">Elit tellus mi, in vestibulum magna, id sed porttitor.</a></li><li><a href="#">Habitant diam facilisi.</a></li><li><a href="#">Magna augue, aliquam ultrices, velit nam.</a></li><li><a href="#">Curabitur ultricies nullam, pulvinar amet libero.</a></li><li><a href="#">Facilisi proin, sit erat ac, dui pulvinar.</a></li><li><a href="#">Fringilla quam aut.</a></li><li><a href="#">Molestie magna id.</a></li><li><a href="#">Cras arcu.</a></li><li><a href="#">Lacus ligula.</a></li><li><a href="#">Tempor pellentesque nec, elit neque, nulla rutrum libero.</a></li><li><a href="#">Ullam semper tempus.</a></li><li><a href="#">Suspendisse nec laoreet.</a></li><li><a href="#">Per pellentesque adipiscing, consequat integer vel.</a></li><li><a href="#">Iaculis mollis tincidunt, massa mollis, elit varius arcu.</a></li><li><a href="#">Posuere quis, sit tellus at.</a></li><li><a href="#">Tincidunt culpa, wisi pede suspendisse, potenti nullam malesuada.</a></li><li><a href="#">Vel in vitae.</a></li><li><a href="#">Nam vel nulla, amet a in.</a></li><li><a href="#">Mi mollis libero, fusce morbi quam, sociis dictum nulla.</a></li><li><a href="#">Sed dictum.</a></li><li><a href="#">Vestibulum purus, amet consectetuer aenean.</a></li><li><a href="#">Ipsum in ut.</a></li><li><a href="#">Cras gravida lobortis, aenean elit nullam, eu ac.</a></li><li><a href="#">A odio nec, urna nec, amet donec.</a></li><li><a href="#">Proin nec quam, laoreet tincidunt mi, dui ac elementum.</a></li><li><a href="#">Euismod phasellus.</a></li><li><a href="#">At amet.</a></li><li><a href="#">Amet lorem.</a></li><li><a href="#">Fusce posuere magna, hendrerit a gravida.</a></li><li><a href="#">Eu aliquam sollicitudin, quis et.</a></li><li><a href="#">Class in maecenas, est sunt eget.</a></li><li><a href="#">Tincidunt tempus, mauris arcu ut.</a></li><li><a href="#">In placerat euismod, accumsan dui eros, a ornare.</a></li><li><a href="#">Sed metus, ut tempus nulla.</a></li><li><a href="#">Dapibus pellentesque.</a></li><li><a href="#">Arcu risus.</a></li><li><a href="#">Molestie quis, imperdiet dapibus, est lobortis.</a></li><li><a href="#">Commodo risus elit, sapien tristique tincidunt.</a></li><li><a href="#">Arcu rhoncus.</a></li><li><a href="#">Condimentum neque, et pede sed.</a></li><li><a href="#">Vivamus eget tellus, eleifend volutpat dolores, luctus pharetra.</a></li><li><a href="#">Nec elementum, dui sed, lacus et vestibulum.</a></li><li><a href="#">Aenean ut donec.</a></li><li><a href="#">Consectetuer ultrices tellus, mollis quis, eros metus.</a></li><li><a href="#">Enim feugiat, vel sed, morbi lacinia vel.</a></li><li><a href="#">Blandit pulvinar nibh, neque odio tincidunt.</a></li><li><a href="#">Ac nunc dolor, gravida sodales, integer tortor purus.</a></li><li><a href="#">Posuere rutrum, sed tortor.</a></li><li><a href="#">Accumsan nibh aptent.</a></li><li><a href="#">Nulla id donec.</a></li><li><a href="#">Ornare elit rutrum.</a></li><li><a href="#">Enim officia, eu ultricies rutrum, tempus faucibus.</a></li><li><a href="#">Integer odio, augue quam, gravida aenean.</a></li><li><a href="#">Ante facilisis tempus, aliquet erat erat.</a></li><li><a href="#">Vulputate aliquam risus, suspendisse torquent ipsum, augue quis.</a></li><li><a href="#">Proin commodo, lorem sed, neque risus nisl.</a></li><li><a href="#">Ut non, id congue.</a></li><li><a href="#">Pharetra purus, vivamus ridiculus maecenas, vitae molestie.</a></li><li><a href="#">Morbi nam turpis, odio vivamus.</a></li><li><a href="#">Et quam ligula, iaculis duis proin.</a></li><li><a href="#">Mollis vitae integer.</a></li><li><a href="#">Felis est.</a></li><li><a href="#">Scelerisque dignissim, luctus dictumst, porta porta ac.</a></li><li><a href="#">Nec mollis, nulla vehicula quam.</a></li><li><a href="#">Ac tempor ut.</a></li><li><a href="#">Nullam consectetuer.</a></li><li><a href="#">Purus sem.</a></li><li><a href="#">Velit posuere amet.</a></li><li><a href="#">Nemo ducimus.</a></li><li><a href="#">Nunc quam sit.</a></li><li><a href="#">Eu nonummy, a neque.</a></li><li><a href="#">Nec in, viverra posuere, nam amet ante.</a></li><li><a href="#">Eget tempor.</a></li><li><a href="#">Pharetra ligula.</a></li></ul></div>');
      $(this).off('click');
    });
    window.clui.init();

    window.clui.autoCompleteInit('#mobileSearchbox', {
      minLength: 2,
      select: function () {
        window.clui.mobileSearchClose();
      },
      source: function (request, response) {
        const settings = {
          async: true,
          url: "https://clp-typeahead-service-int.clgxlabs.net/autocomplete",
          crossDomain: true,
          data: {
            input: request.term
          },
          method: "GET"
        };

        $.ajax(settings).done(function (data) {
          response($.map(data.result_set, function (item) {
            return {
              label: item.address,
              value: item.address
            };
          }));
        });
      }
    });

    window.clui.autoCompleteInit('#middleSearch', {
      minLength: 2,
      source: function (request, response) {
        const settings = {
          async: true,
          url: "https://clp-typeahead-service-int.clgxlabs.net/autocomplete",
          crossDomain: true,
          data: {
            input: request.term
          },
          method: "GET"
        };

        $.ajax(settings).done(function (data) {
          response($.map(data.result_set, function (item) {
            return {
              label: item.address,
              value: item.address
            };
          }));
        });
      }
    });

    window.clui.autoCompleteInit('#navSearch', {
      minLength: 2,
      source: function (request, response) {
        const settings = {
          async: true,
          url: "https://clp-typeahead-service-int.clgxlabs.net/autocomplete",
          crossDomain: true,
          data: {
            input: request.term
          },
          method: "GET"
        };

        $.ajax(settings).done(function (data) {
          response($.map(data.result_set, function (item) {
            return {
              label: item.address,
              value: item.address
            };
          }));
        });
      }
    });
  });
</script>
</body>
</html>