• Rendering of search box in mCustomSearch

    By Matt White 1 decade ago

    The search works great, but the rendering of it is wrong, the text box position and size don't fit inside the rounded corner space allocated for it: 

     

    I will try and fix it, but in the meantime just thought you should know.

     

    Matt

    • My Solution...

      By Matt White 1 decade ago

      This is how I fixed the layout issue:

       

      }]]>

      class="searchcontainer">

      "margin-left:auto; width:100%">

      class="searchcontainerinner">

      "#{sessionScope.searchQuery}"

      autocomplete="off" id="inputText1" styleClass="searchbox">

      "onkeyup" submit="true"

      refreshMode="partial" refreshId="dataView1">

       

      And then added the following CSS:

      .searchcontainer {

      color: rgb(255, 0, 0);

      background: -webkit-gradient(linear, left top, left bottom, from(rgb(225, 226, 230)), to(rgb(151, 167, 188) ) );

      height: 32px;

      vertical-align: middle;

      line-height: 41px;

      }

       

      .searchcontainerinner {

      height: 26px;

      font-size: 20px;

      padding: 4px 13px 0px 5px;

      -webkit-border-radius: 25px;

      -moz-border-radius: 25px;

      background: #ffffff;

      color: rgb(16, 92, 182);

      font-weight: bold;

      width: 85%;

      margin-left: auto;

      margin-right: auto;

      margin-top: 2px;

      }

       

      .searchbox {

      width: 100% !important;

      border:none;

      position: relative;

      top: -10px;

      }

       

      Hope this helps.

       

      Matt