Drawer - Fixed Width

See example: Drawer - Fixed Width

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

    <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.min.js"></script>
</head>
<body class="min-width-1170">
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-collapse-btn">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-header">
            <div class="navbar-logo"></div>
            <div class="application-name">
                <h1>CoreLogic UI</h1>
            </div>
        </div>

        <div class="navbar-collapse collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/components_-_drawer.html?page=drawer">Back To CLUI</a></li>
            </ul>

            <form class="navbar-form navbar-search">
                <div class="form-group">
                    <div class="input-group">
                        <label class="sr-only" for="navSearch">Search for an address...</label>
                        <input class="form-control" id="navSearch" placeholder="Search for an address..."/>
                        <i class="fa fa-search left-icon"></i>
                    </div>
                </div>
            </form>
        </div>
    </div>
</nav>
<div class="secondary-nav">
    <div class="container-fluid">
        <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">
    <div class="row no-gutter">
        <div class="drawer-md-fixed">
            <div class="drawer-left">
                <div class="drawer">
                    <div class="drawer-header">
                        <h2>This is a sample header for the drawer</h2>
                    </div>
                    <div class="drawer-body">
                        <div class="container-fluid">
                            <div class="row mg-bt-15 vertical-parent">
                                <div class="col-xs-10">
                                    <label class="p" for="toggle-demo1">Choose this option</label>
                                </div>
                                <div class="col-xs-2 vertical-center right text-right">
                                    <div class="toggle-container">
                                        <input id="toggle-demo1" class="cl-toggle toggle-red" type="checkbox"
                                               name="toggle-demo1"/>
                                        <label for="toggle-demo1"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container-fluid">
                            <div class="row mg-bt-15 vertical-parent">
                                <div class="col-xs-10">
                                    <label class="p" for="toggle-demo2">Or perhaps this option</label>
                                </div>
                                <div class="col-xs-2 vertical-center right text-right">
                                    <div class="toggle-container">
                                        <input id="toggle-demo2" class="cl-toggle toggle-green" type="checkbox"
                                               name="toggle-demo2"/>
                                        <label for="toggle-demo2"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container-fluid">
                            <div class="row mg-bt-15 vertical-parent">
                                <div class="col-xs-10">
                                    <label class="p" for="toggle-demo4">
                                        You can click anywhere on this label to activate the toggle.
                                        The toggle will also be vertically centered to this label.
                                    </label>
                                </div>
                                <div class="col-xs-2 vertical-center right text-right">
                                    <div class="toggle-container">
                                        <input id="toggle-demo4" class="cl-toggle" type="checkbox" name="toggle-demo4"/>
                                        <label for="toggle-demo4"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="drawer-footer">
                        <button class="btn btn-primary">Some action</button>
                    </div>
                </div>
            </div>
            <div class="container-full container-background no-top drawer-right"
                 style="background-image: url('https://placekitten.com/g/800/800')">
            </div>
        </div>
    </div>
</div>
<script>
  $(function () {
    window.clui.autoCompleteInit('#navSearch', {
      minLength: 2,
      source: function (request, response) {
        var 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>