Forum Discussion

Samantha_O's avatar
Samantha_O
Champion
10 years ago

Custom Search Component, do I need one?

We want to move the search bar from the main panel to the side rail in one section of our Community.  When we move the component around in Studio, the drop-down causes the Search widget to take up extra space, and is not a desired look. 

 

It seems that if we want to modify the search bar, I would need a custom component to do this.  Does this sound right? 

Here is what I am looking to do: 

 - I want the search bar & button to take up just 1 line and not drop to multiple lines (like the Lithium component does)

 - In order to accomplish this I (think I) need to hide the search drop down just in this one area (it is on a specific page type, so it would be universal across the page type, but not affect the rest of the Community). 

 

Any recommendations or suggestions are welcome. 

  • VarunGrazitti's avatar
    VarunGrazitti
    10 years ago
    Ok, another way of achieving this. Create a custom component(don't worry, we will still use the default search component) and include the search component in it and hide the drop down in this one from the parameter. Add a condition to this custom component so this renders only when the page is the one you want. Add the css inside the condition as well. Should get you what you're looking for.
  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    10 years ago

    Samantha_O  You can hide the drop down from the xml tab in studio, there is a parameter to hide it which you can find when you hover on the specified component in studio.
    Moreover, to fit the search bar in the side rail, you can then reduce the width of the text box using CSS and make the search button an icon which would take relatively less space, like the one lithium has in their top black bar.

    I hope this helps.

    • Samantha_O's avatar
      Samantha_O
      Champion
      10 years ago

      Thanks for the quick reply.  From what I was seeing it looked/sounded like if I choose to hide the drop-down in the search component it would affect the Community as a whole.  If I update the XML with this, would it be just for one page (or is there a way to make it just for one page, or if it is in the smaller column) or throughout the whole Community? 

       

      Thanks for the idea on the search icon instead of the button, that sounds like it will definitely help.  Then the same question above applies here, would this be for the Community as a whole? 

      • VarunGrazitti's avatar
        VarunGrazitti
        Boss
        10 years ago
        Ok, another way of achieving this. Create a custom component(don't worry, we will still use the default search component) and include the search component in it and hide the drop down in this one from the parameter. Add a condition to this custom component so this renders only when the page is the one you want. Add the css inside the condition as well. Should get you what you're looking for.