CSS code to move Search bar to left side inside Table view Javascript view.

[sathya_159]

Hi,
Can somebody suggest a CSS code to move the search bar to left side in table view inside the JavaScript view!

[bruno29a]

Hi @sathya_159 , this line is actually separated into 2 elements. On the left, you have the pagination. Though you don’t display the pagination, the space is still “reserved” for it, so you first have to “get rid” of that space.

The way to do this is to set display:none:

#knimePagedTable_wrapper > div:nth-child(1) > div:nth-child(1) {
	display: none;
}

BEWARE though, if you set this style, and you enable the pagination, the pagination will not display because of this style.

Once you remove this space, you an then move the search to the left:

#knimePagedTable_filter {
	text-align: left;
}

Results:

Here’s the demo workflow: Move Search box of Table View to the left via CSS.knwf (9.2 KB)

[sathya_159]

Perfect @bruno29a this solutions solves my purpose thanks alot, also could advice how to change search text to something else if possible(i.e search → search books).

[sathya_159]

@bruno29a can you suggest if we can make an clickable button associated to this search bar, because I would prefer to do search here in table view compared to making a string widget separately. For my used case this search bar is very user friendly.

[bruno29a]

Hi @sathya_159 , the “Search:” is actually part of a label, so you can’t really change it. You can hide it and add a text. The problem is that the text field is also inside the label.

So, I can’t remove the whole label. Instead, I have to hide it, meaning that though the text “Search:” does not show, the space is still there.

The best I can do is the following code:

#knimePagedTable_filter > label {
	visibility: hidden;
}

#knimePagedTable_filter > label:before{
	visibility: visible;
	content: "Search books:";
}
#knimePagedTable_filter > label > input {
	visibility: visible;
}

You will see that there’s a space between the “Search books:” and the text field. That’s the space for the hidden “Search:”

For your other question, the clickable button, it’s hard to do all this via css only. You can probably add the button, but you have to code the event of clicking, which I don’t think is possible via css.

I hate doing front-end, so I don’t like doing css

[sathya_159]

Thanks @bruno29a, even if we can’t make a clickable button, still it has improved the GUI a lot, I have changed Search to video search and it works perfectly fine. Thanks for your help again!
Do you have any ideas how to stop java-script view from fluctuating, because my screen bounces and I can’t view text on the extreme right.