Hide search bar only from dashboard

[marrel]

Hi everyone!!

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!!

[aaron_nimocks]

Try this.

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

[marrel]

thank you for your help @aaron_nimocks!
For me it works with this:

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

[marrel]

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:

[aaron_nimocks]

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

.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%.

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

I can look later if you still need help.

[aaron_nimocks]

.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?

[aaron_nimocks]

Think I got it. At least this works on 7.7.2

//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.

[marrel]

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

after: this is what I was thinking about.

Thank you very much for your help!!!

[marrel]

Do you have any idea @aaron_nimocks?