search.html

---
layout: ballerina-search-page
---

<style type="text/css" media="screen">
    li.cSearchMenu {
        display: none;
    }

    .form-control-field {
        width: 100%;
    }

    .cResults {
        padding: 0;
        margin: 0;

    }

    ul.cResults li {
        list-style: none !important;
        margin-left: 0 !important;
        padding: 10px 0 30px 0 !important;
        border-bottom: 1px solid #e6e9ea;


    }

.cSearchPage .form-control-field {
padding: 20px;
}



.nav > li.cVersionItem {
   display: none !important;
}
.wy-breadcrumbs-aside{
    display: none !important;
}



.cSearchButton {
	margin-right: 10px;
	height: 40px !important;
	outline-style: none;
	background-color: #20b6b0;
	text-align: center;
	min-width: 75px;
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 0px;
}
.cSearchButton:hover {
    background-color: #494949;
}

.cSearchButton img {
	width: 27px;
	margin-top: 7px;
}
.select-css {


    border: 1px solid #e6e9ea;
    height: 42px;

    padding: 10px 20px;
border-radius: 0;
font-weight: 200;
font-size: 16px !important;
border-radius: 0;

}

</style>

<div class="container">
    <h1>Search </h1>
</div>

<div class="container cSearchField">
    <div class="col-sm-12 col-md-2"></div>

    <div class="col-sm-12 col-md-8 cSearchPage">
        <form class="cSearch-form-inline ">
      
            <div class="col-xs-12 col-sm-7 col-md-7" style="padding-left: 5px; padding-right: 5px;">
                <input id="searchText" name="searchText" class="form-control-field" type="text" placeholder="Search" aria-label="Search">
            </div>
            <div class="col-xs-12 col-sm-3 col-md-3" style="padding-left: 5px; padding-right: 5px;">
                <select name="searchVersion" id="searchVersion" class="select-css">
                    <option value="swan-lake" data-value="latest">Swan Lake</option>
                    <option value="1.2">v1.2</option>
                </select>
            </div>
            <div class="col-xs-12 col-sm-2 col-md-2" style="padding-left: 5px; padding-right: 5px;">
                <a id="searchButton" class="cSearchButton"><img src="/img/search-white.svg"/></a>
            </div>
            
            
           
        </form>
    </div>

    <div class="col-sm-12 col-md-2"></div>


</div>

<div class="container cSearchResults">

    <h2></h2>
    <h3 class="searchStatus">Loading Search Results ...</h3>
    <ul id="searchResult" class="cResults">

    </ul>

</div>
<script src="/js/lunr.js" type="text/javascript"></script>
<script src="/js/searchIndex.js" type="application/javascript"></script>
<script src="/js/site-search.js" type="application/javascript"></script>

<style>
.nav > li.cVersionItem , .cBallerinaTocContainer {
    display: none !important;
}
</style>