With bootstrap 3.0 search block appearance needs to be fixed.

I used input group. There is a hack in the code, I don't know why but is getting the wrong padding.

Files: 
CommentFileSizeAuthor
#12 safari_chrome_overlaps_the_slogan_and_header.png19.63 KBj_nunes
#12 firefox.png18.21 KBj_nunes
#8 bootstrap-fix-search-block-2094179-7.patch4.81 KBMark Carver
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#8 interdiff.txt1.22 KBMark Carver
#7 bootstrap-fix-search-block-2094179-7.patch4.97 KBMark Carver
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#7 interdiff.txt4.03 KBMark Carver
#6 bootstrap-fix-search-block-appearence.patch2.3 KBkslonka
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#2 bootstrap-fix-search-block-appearence-new.patch2.53 KBkslonka
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#1 bootstrap-fix-search-block-appearence.patch2.05 KBkslonka
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
bootstrap-fix-search-block-appearence.patch2.05 KBkslonka
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Comments

StatusFileSize
new2.05 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Missed one class, new patch included

StatusFileSize
new2.53 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Ignore above patches, uploaded the same file again :(. This one is correct

Status:Active» Needs work
  1. +++ b/includes/form.inc
    @@ -29,6 +29,7 @@ function bootstrap_form_search_form_alter(&$form, &$form_state) {
       $form['basic']['keys']['#attributes']['class'][] = 'search-query';
    @@ -50,6 +51,7 @@ function bootstrap_form_search_block_form_alter(&$form, &$form_state) {
       $form['search_block_form']['#attributes']['class'][] = 'search-query';

    I think these can be removed (ie: not used in BS3).

  2. +++ b/includes/form.inc
    @@ -29,6 +29,7 @@ function bootstrap_form_search_form_alter(&$form, &$form_state) {
    +  $form['basic']['keys']['#attributes']['class'][] = 'form-control';
    @@ -50,6 +51,7 @@ function bootstrap_form_search_block_form_alter(&$form, &$form_state) {
    +  $form['search_block_form']['#attributes']['class'][] = 'form-control';

    These are no longer needed.

  3. +++ b/template.php
    @@ -261,13 +261,20 @@ function bootstrap_process_block(&$variables, $hook) {
    +  // fixme: dunno why padding is off by 2 px...
    +  $output .= '<button style="padding-top: 5px; padding-bottom: 5px" class="btn btn-default" type="button">';

    Definitely cannot commit inline styles. This will need to be fixed before committed. Perhaps in #2084331: Update and recompile the overrides.less/css file?

  4. +++ b/template.php
    @@ -261,13 +261,20 @@ function bootstrap_process_block(&$variables, $hook) {
    +  if (icon_bundles('bootstrap')) {
    +    $output .= '<i class="glyphicon glyphicon-search"></i>';
    +  } else {
    +    $output .= '<i class="icon-search"></i>';
    +  }

    This should just be (no else):

    if (module_exists('icon')) {
      $output .= theme('icon', array('bundle' => 'bootstrap', 'icon' => 'glyphicon-search'));
    }
  5. +++ b/template.php
    @@ -261,13 +261,20 @@ function bootstrap_process_block(&$variables, $hook) {
    diff --git a/templates/search-block-form.tpl.php b/templates/search-block-form.tpl.php
    diff --git a/templates/search-block-form.tpl.php b/templates/search-block-form.tpl.php
    new file mode 100644
    new file mode 100644
    index 0000000..aa19949
    index 0000000..aa19949
    --- /dev/null
    --- /dev/null
    +++ b/templates/search-block-form.tpl.php
    +++ b/templates/search-block-form.tpl.php
    +++ b/templates/search-block-form.tpl.php
    @@ -0,0 +1,6 @@
    @@ -0,0 +1,6 @@
    +<div>
    <?php if (empty($variables['form']['#block']->subject)): ?>
    +    <h2 class="element-invisible"><?php print t('Search form'); ?></h2>
    <?php endif; ?>
    <?php print $search_form; ?>
    +</div>

    What's the purpose of copying the search-block-form.tpl.php into this theme? Removing markup?

Mark:
1. OK
2. form-control is needed (http://getbootstrap.com/components/#input-groups)
3. Padding is off by 2px in firefox. Will need to investigate why
4. OK
5. Yes, search-block-form.tpl.php has
<div class="container-inline">
which ironically makes it appear as block not inline.

2. No it's not, I just committed this fix in #2084343-21: Form preprocessing needs to be refactored.
3. We can address any styling issues in #2084331: Update and recompile the overrides.less/css file, not as inline styles.

StatusFileSize
new2.3 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Updated, but there are still problems with container-inline on chrome on search page (its the one with
<div id="edit-basic" class="container-inline form-wrapper">
and i can't find where I can remove that, it's not in .tpl files...), and padding on my firefox.

Status:Needs work» Needs review
StatusFileSize
new4.03 KB
new4.97 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

How about this?

StatusFileSize
new1.22 KB
new4.81 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Actually now that I think about it, it makes sense to always wrap and only include the icon if IconAPI exists.

Everything looks ok, I've found what's causing firefox to display <input>'s incorrectly https://drupal.org/node/2084331#comment-7882325

Status:Needs review» Fixed

Committed c07d39a to 7.x-3.x.

Version:7.x-3.x-dev» 7.x-3.0-beta1

Issue tags:+screenshots
StatusFileSize
new18.21 KB
new19.63 KB

Hi.

I think this is the right issue.

Up to date Safari and Chrome:
searchblock on navigation

Firefox:
Corrected FF

I can't find 7.x-3.0-beta1 but I've tested with rc1 and -dev and this case remains.

Status:Fixed» Active

Version:7.x-3.0-beta1» 7.x-3.x-dev

Version:7.x-3.x-dev» 7.x-3.0-beta1
Status:Active» Fixed

Actually @staminna, this relates to the search block in the navbar (entirely different issue). Please create new issues instead of open fixed ones.

Status:Fixed» Closed (fixed)

Wrong status