# Hide search bar only from dashboard

**URL:** <https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117>\
**Category:** Kibana\
**Created:** [June 29, 2020, 1:26pm UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117 "2020-06-29T13:26:40Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\
**Post date:** [June 29, 2020, 1:26pm UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/1 "2020-06-29T13:26:40Z")

</div>

Hi everyone!! 👋

 ![image_2020_05_15T09_11_19_369Z](https://us1.discourse-cdn.com/elastic/original/3X/c/5/c5c2108009586e2c9a1a4f9c19729fd82d48e228.png)  
I want to hide the search bar from 'dashboard' page only (not for 'discovery' page) as the panels have already filters for the data to be visualized and I want my colleagues not to have the ability to add filters to dashboard.

I have used the below code  
`.kuiLocalSearchAssistedInput { display: none !important; }`  
in order to hide this bar from dashboard but it have been hidden also from discovery page which was not expected.

Kindly do you have any idea how to hide it only from dashboard and not globally in kibana? thank you!!

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [June 29, 2020, 2:23pm UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/2 "2020-06-29T14:23:26Z")

</div>

Try this.

```auto
.application.ng-scope.tab-dashboard .kuiLocalSearchAssistedInput {
    display: none;
}

```

---

<div class="post-metadata">

**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\
**Post date:** [June 30, 2020, 7:18am UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/3 "2020-06-30T07:18:07Z")

</div>

thank you for your help @aaron-nimocks! 🙂  
For me it works with this:

` .tab-dashboard .kuiLocalSearchAssistedInput { display: none !important; }`

---

<div class="post-metadata">

**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\
**Post date:** [July 1, 2020, 1:05pm UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/4 "2020-07-01T13:05:26Z")

</div>

I am wondering also if it is possible to transfer the `datePicker` bar along with the `Refresh` button in the same line as the `Full screen`, `Share`, `Clone`, `Edit` buttons, in order to minimize the empty space and the page to look better.  
Do you have any idea @aaron-nimocks?

Please look the below screenshot:

 ![image_2020_05_15T09_11_19_369Z](https://us1.discourse-cdn.com/elastic/original/3X/e/6/e6da774e432587fb82660ebd021f2411e0ecbeb4.png)

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [July 1, 2020, 1:35pm UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/5 "2020-07-01T13:35:47Z")

</div>

I can look at it when I get some more time.

```auto
.tab-dashboard .kbnQueryBar.kbnQueryBar--withDatePicker > div:nth-child(1) {
    display: none;
}

```

That's the first step. Need to remove the entire DIV for the search bar in order to make the timepicker bigger. Not just the way we did it before.

Now just need to figure out how to make the width of the below 100%.

```auto
<div class="euiFlexItem euiFlexItem--flexGrowZero">

```

I can look later if you still need help.

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [July 1, 2020, 1:57pm UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/6 "2020-07-01T13:57:31Z")

</div>

```auto
.tab-dashboard .kbnQueryBar.kbnQueryBar--withDatePicker > div.euiFlexItem.euiFlexItem--flexGrowZero {
    flex-grow: 1;
}

```

That will move everything to the left. Now I am assuming you want just the Time Picker to extend across the screen?

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [July 1, 2020, 2:09pm UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/7 "2020-07-01T14:09:38Z")

</div>

Think I got it. At least this works on 7.7.2

```auto
//removes the search bar
.tab-dashboard .kbnQueryBar.kbnQueryBar--withDatePicker > div:nth-child(1) {
    display: none;
}

//Fills up that empty space where search bar was
.tab-dashboard .kbnQueryBar.kbnQueryBar--withDatePicker > div.euiFlexItem.euiFlexItem--flexGrowZero {
    flex-grow: 1;
}

//Pushes Refresh button to the right
.tab-dashboard .kbnQueryBar.kbnQueryBar--withDatePicker > div.euiFlexItem.euiFlexItem--flexGrowZero > div > div.euiFlexItem.kbnQueryBar__datePickerWrapper {
    flex-grow: 1 !important;
}

//Extends the timepicker 100%
.tab-dashboard .kbnQueryBar.kbnQueryBar--withDatePicker > div.euiFlexItem.euiFlexItem--flexGrowZero > div > div.euiFlexItem.kbnQueryBar__datePickerWrapper > div {
    width: 100%;
}

```

When you click on the timepicker you might not like how that looks. But it works.

---

<div class="post-metadata">

**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\
**Post date:** [July 2, 2020, 8:35am UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/8 "2020-07-02T08:35:56Z")

</div>

thank you very much @aaron-nimocks for your time and your quick reply !!! 🙂  
Yes, with your above code-lines, the `Time Picker` was moved to the left along with the `Refresh` button below the `Full screen` , `Share` , `Clone` , `Edit` buttons. But I am wondering if you have any idea how the `Time Picker` along with the `Refresh` button can be moved next/ after the `Full screen` , `Share` , `Clone` , `Edit` buttons.  
please look the below screenshots.

**before**

 ![image_2020_05_15T09_11_19_369Z2](https://us1.discourse-cdn.com/elastic/original/3X/8/e/8e51960bcb1c7f717d9a29e7afa0d852ad3af4a3.png)

**after:** this is what I was thinking about. 😐

 ![image_2020_05_15T09_11_19_369Z](https://us1.discourse-cdn.com/elastic/original/3X/f/9/f92a971f1fa7dcee4d78c0bc463460054846fdd3.png)

Thank you very much for your help!!!

---

<div class="post-metadata">

**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\
**Post date:** [July 3, 2020, 11:29am UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/9 "2020-07-03T11:29:37Z")

</div>

Do you have any idea @aaron-nimocks? 🙄

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 31, 2020, 11:29am UTC](https://discuss.elastic.co/t/hide-search-bar-only-from-dashboard/239117/10 "2020-07-31T11:29:38Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.