Topic on Skin talk:Chameleon

How to make the SearchBar fluid

9
Kghbln (talkcontribs)

I am banging my head against the wall for many hours [sic!] now however I completely fail to somehow adapt the SearchBar.

Does anybody know how to make it fluid, i.e. have it with a width of 95% on all screens desktop and mobile screens. Usually something like the following CSS helps:

box-sizing: border-box;
display: block;
width: 100%;
max-width: 95%;

However in this case it is completely useless.

The xml for this is standard:

<row>
	<cell span="12">
		<component type="SearchBar" class="pull-right" buttons="search"/>
	</cell>
</row>


Moreover I get a bluish shadow when the search box is clicked on. Here I have not even been able to detect where the color comes from needless to say how to change it.

Any hint or help will be appreciated.

Kghbln (talkcontribs)

Sometimes it helps to rant. ;)

I have just come up with the following CSS which is ok for the time being:

.form-inline .input-group {
	width: 100%;
}
.p-search.pull-right {
	box-sizing: border-box;
	width: 100%;
	display: block;
}

Without setting the first class to 100% it will not work. I am loosing the pull right here, but in my case this is hopefully acceptable.

Still I think there must be a better solution.

F.trott (talkcontribs)

Well, fluid mode is an attribute of the grid, not of a single component. So to have just the search box fluid and nothing else you'd have to put it in a grid of its own.

Also, the 12-column cell containing the search box is itself contained in a 9-column cell, which obviously limits its width.

Kghbln (talkcontribs)

This does not work since a grid cannot be the child of a row. The solution I posted turns out to be borked too since the search box aligns left for whatever reason. What I am trying to achieve is to have the search box at 100% of the whole cell which is a child of row. I just do not get it how to do it. Currently the search box is only about 5cm wide on a desktop screen so I figured that it will be nice to have a wider one. The wider one however does not work on a narrow screen.

F.trott (talkcontribs)

I got the impression that you want it stretched over the whole page. To stretched it over one cell only, try this:

.p-search, .p-search .form-inline .input-group {
  width: 100%;
}
.p-search .form-inline .input-group .input-group-btn {
  width: 0;
}
Kghbln (talkcontribs)

No I indeed only wanted to stretch over one cell. Wow, this works cool! Admittedly I would never have come up with this. Great, a day of frustration comes to a good end!

Kghbln (talkcontribs)

To self answer the second question about the border color and border shadow of the box when one clicks into the search box. Finally found it:

.form-control:focus {
    border-color: #91c800;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(145,200,0,0.6);
}

I used to be in a grump and now I am in a fluff. :)

F.trott (talkcontribs)
:D
Kghbln (talkcontribs)

One not on this one. It does not work for Chrome, just for Firefox.

Reply to "How to make the SearchBar fluid"