[CSS] Search form is displayed in two rows

jensf · 2015-08-27 12:10:06

Hi,

Unfortunately I have some trouble to “configure” search functionality and place it with an additional button in the end of the navigation bar.

The code from my site header:

(...) <li><txp:section link="1" title="1" name="photographie" /></li>
 <li class="divider"></li>
 <li> 
  <txp:search_input />                
 </li>             
</ul>
</section>

And for search_input form:

[Edit 2015-08-31: changed “value” into “placeholder” attribute for search field.]

<form role="search" method="get" action="<txp:site_url /><txp:section name="blog" />"> 
 <input type="search" placeholder="Find!" name="q" <txp:if_search>value="<txp:search_term />"</txp:if_search> />
 <input type="submit" class="small button" value="Find!" />
</form>

The result is visible here: the search button is displayed below the search field. I tried the other way around with adding the required attributes to the search_input tag as described in the documentation but whatever I add here, no button is created or any other attribute is processed.

The code from the header form should include the button, size etc.:

<txp:search_input label="Search" button="Find!" />

Do you have an idea how I get the search field + button in a row?

Cheers!
—
Jens

Edited to label title and rename it according to topic content. – Uli -

Last edited by uli (2015-08-31 21:22:08)

ruud · 2015-08-27 12:39:50

<txp:search_input form="" label="Search" button="Find!" />

Very confusing that you have to set form to an empty string for the other attributes to have any effect.

uli · 2015-08-27 14:17:39

Jens, in http://frickeln.jensfreyer.de/css/app.css you have the selector input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea

It says display: block and width: 100% :)

jensf · 2015-08-31 13:37:06

ruud wrote #294389:

<txp:search_input form="" label="Search" button="Find!" />...

Very confusing that you have to set form to an empty string for the other attributes to have any effect.

Thank you for this hint, ruud! With “empty” form attribute a standard button is created. Unfortunately I’m not able to customize/add a class for this button as I do this in the search_input form.
So, my last issue is to get the search field and the submit button horizontal side by side between the form tags… But this is surely more a question of the styles I’m using (…or isn’t it!? Sorry, but I’m still far away from “a master” with html, css and Txp. CMS. ;-))

ruud · 2015-08-31 13:50:43

Look at the answer uli gave.

jensf · 2015-08-31 13:55:06

uli wrote #294395:

Jens, in http://frickeln.jensfreyer.de/css/app.css you have the selector input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea
It says display: block and width: 100% :)

And this is what I meant with not “a master” with my last reply to ruud’s hint. ;-) Disable the attributes for the input selectors solves my last issue with the formatting.

Thank you very much for your help!

uli · 2015-08-31 14:39:11

jensf wrote #294450:

Disable the attributes for the input selectors solves my last issue with the formatting.

Just a heads-up: Don’t delete rules or selectors, too many other elements on other pages could be involved. Rather set up a special selector like the following and put it below the mentioned rule set in your CSS file.

.right input[type="search"],
.right input[type="submit"] {
	display: inline-block;
	width: auto;
}

That way only these two input types are involved, and only if inside the top nav.

Thank you very much for your help!

You’re welcome :)

jensf · 2015-09-09 11:44:09

uli wrote #294451:

Just a heads-up: Don’t delete rules or selectors, too many other elements on other pages could be involved. Rather set up a special selector like the following and put it below the mentioned rule set in your CSS file.

.right input[type="search"],...

That way only these two input types are involved, and only if inside the top nav.

You’re welcome :)

@uli,

Thanks for the heads-up. And I’m absolutely with you and already tried sth. out to combine selectors with .top-bar-section class and the attibutes for display and width. But – so far – without success.
Following your very good idea I added the “special” formatting for the two input types and class="right" which is assigned for <ul> element:

(...) 
<section class="top-bar-section">
 <ul class="right">
  <li class="devider"></li>
  <li><txp:search_input />
(... from search_input form:)
   <form role="search" method="get" action="<txp:site_url /><txp:section name="blog" />" style="margin: 0 0.53125rem;"> 
    <input type="search" placeholder="Find!" name="q" <txp:if_search>value="<txp:search_term />"</txp:if_search> />
    <input type="submit" class="small button" value="Find!" />
   </form>
  </li>
 </ul>
</section>

But it’s not willing to work so far if you can see at the top right of my site draft. In the CSS file I added the selectors for class="right" starting lines 1737 ff. You can jump to that point with browser search for “46224”.

I am sure you are much more familiar as I am with all of that stuff and I would be happy if you’d have another hint for me. :-)

uli · 2015-09-09 14:42:01

The one thing that’s confusing me is the closing CSS comment immediately before your comment that contains “46224” (this one at the end here: textarea.radius { border-radius: 3px; } */ ). It has no opening counterpart. Edit: Try to remove it. Let’s hope it’s that thing that’s also confusing browsers. Other than that, I’m out of ideas, position, selector precedence, syntax, bracketing, semicolons, no nesting in the wrong @media rules: everything seems to be OK.

Last edited by uli (2015-09-09 14:51:27)

jstubbs · 2015-09-10 05:37:15

Hi jensf,

As you seem to be using Foundation 5, not sure if you followed the instructions for search bars within the top-bar nav? The markup you are using is not the same as the F5 example:

<li class="has-form">
  <div class="row collapse">
    <div class="large-8 small-9 columns">
      <input type="text" placeholder="Find Stuff">
    </div>
    <div class="large-4 small-3 columns">
      <a href="#" class="alert button expand">Search</a>
    </div>
  </div>
</li>

jstubbs · 2015-09-10 05:38:13

Your current markup seems to be like this:

<li> 
	<form role="search" method="get" action="http://frickeln.jensfreyer.de/blog" style="margin: 0 0.53125rem;"> 
		<input type="search" placeholder="Find!" name="q">
		<input type="submit" class="small button" value="Find!">
	</form>
</li>

jakob · 2015-09-10 07:49:51

Uli’s tip was good. Removing the */ in the wed dev tools makes the fields appear next to each other with the css from Uli’s earlier tip and without changing the source code.

Textpattern CMS

Textpattern CMS support forum

#1 2015-08-27 12:10:06