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>