# 検索ボタンを押すと出現する検索窓が壊れている

**URL:** <https://community.shopify.com/t/topic/372829>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [November 11, 2024, 1:52am UTC](https://community.shopify.com/t/topic/372829 "2024-11-11T01:52:20Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

検索ボタンを押すと表示される検索窓に不具合が発生している技術的な問題。

**提示されたコード:**
- HTMLコードが投稿されているが、一部が逆順や文字化けしており、正常に読み取れない状態
- `<details-modal>`要素を使用した検索モーダルの実装コード
- Shopifyの Liquid テンプレート構文を含む

**回答内容:**
- 問題の原因はHTMLではなく、CSSにある可能性が高い
- CSSコードだけでは問題特定が困難
- 開発パートナーへの相談を推奨
- プライベートメッセージで実際の問題ページを共有すれば、具体的な解決策を提示できる可能性がある

**対応状況:**
- 質問者は他にも修正したい箇所があったため、DAWNテーマのオリジナルを再度反映させることを検討中
- 具体的な解決には至っていない

<div class="post-metadata">

**Author:** ![uf2](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@uf2](https://community.shopify.com/u/uf2)\
**Post date:** [November 11, 2024, 1:52am UTC](https://community.shopify.com/t/topic/372829/1 "2024-11-11T01:52:20Z")

</div>

```auto
<details-modal class="header__search">
  <details>
    <summary
      class="header __icon header__ icon--search header __icon--summary link focus-inset modal__ toggle"
      aria-haspopup="dialog"
      aria-label="{{ 'general.search.search' | t }}"
    >
      <span>
        <span class="svg-wrapper">
          {{- 'icon-search.svg' | inline_asset_content -}}
        </span>
        <span class="svg-wrapper header__icon-close">
          {{- 'icon-close.svg' | inline_asset_content -}}
        </span>
      </span>
    </summary>

    <style>
      
   
    <div
      class="search-modal modal__content gradient"
      role="dialog"
      aria-modal="true"
      aria-label="{{ 'general.search.search' | t }}"
    >
      <div class="modal-overlay"></div>
      <div
        class="search-modal __content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__ content-top{% else %} search-modal__content-bottom{% endif %}"
        tabindex="-1"
      >
        {%- if settings.predictive_search_enabled -%}
          <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
        {%- else -%}
          <search-form class="search-modal__form">
        {%- endif -%}
        <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
          <div class="field">
            <input
              class="search __input field__ input"
              id="{{ input_id }}"
              type="search"
              name="q"
              value="{{ search.terms | escape }}"
              placeholder="{{ 'general.search.search' | t }}"
              {%- if settings.predictive_search_enabled -%}
                role="combobox"
                aria-expanded="false"
                aria-owns="predictive-search-results"
                aria-controls="predictive-search-results"
                aria-haspopup="listbox"
                aria-autocomplete="list"
                autocorrect="off"
                autocomplete="off"
                autocapitalize="off"
                spellcheck="false"
              {%- endif -%}
            >
            <label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
            <input type="hidden" name="options[prefix]" value="last">
            <button
              type="reset"
              class="reset __button field__ button{% if search.terms == blank %} hidden{% endif %}"
              aria-label="{{ 'general.search.reset' | t }}"
            >
              <span class="svg-wrapper">
                {{- 'icon-reset.svg' | inline_asset_content -}}
              </span>
            </button>
            <button class="search __button field__ button" aria-label="{{ 'general.search.search' | t }}">
              <span class="svg-wrapper">
                {{- 'icon-search.svg' | inline_asset_content -}}
              </span>
            </button>
          </div>

          {%- if settings.predictive_search_enabled -%}
            <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
              {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
            </div>

            <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
          {%- endif -%}
        </form>
        {%- if settings.predictive_search_enabled -%}
          </predictive-search>
        {%- else -%}
          </search-form>
        {%- endif -%}
        <button
          type="button"
          class="search-modal __close-button modal__ close-button link link--text focus-inset"
          aria-label="{{ 'accessibility.close' | t }}"
        >
          <span class="svg-wrapper">
            {{- 'icon-close.svg' | inline_asset_content -}}
          </span>
        </button>
      </div>
    </div>
  </details>
</details-modal>

```

テーマはDAWNを使用しています。

虫眼鏡のマークを選択すると、検索窓が出現するようになっているのですが、

この検索窓がヘッダーのほかの要素の上に出現し、文字などがかぶった状態で出てしまいます。

また、検索窓を閉じるための「×」ボタンも２つ出現しています。

バージョンは15を使用しています。どなたか解決方法をご存知の方がいらっしゃいましたら

ご教示いただけますと幸いです。

 ![検索窓内にヘッダーの要素が被っています](https://canada1.discourse-cdn.com/shopifyforum/original/3X/6/1/61397461d7aa538f2a38ed4ce2aed2fbb6548e3d.png)

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [November 13, 2024, 8:56am UTC](https://community.shopify.com/t/topic/372829/2 "2024-11-13T08:56:29Z")

</div>

@uf2 様

問題があるとすると、貼っていただいたHTMLではなく、CSSの方ではないかと思います。

しかし、CSSを記載いただいたとしても、その情報から何が問題かを見つけるのは難しいのではないかと思います。

開発パートナーがいらっしゃるようでしたら、そちらに相談するのがおすすめですが、

もしいらっしゃらないようなら、プライベートメッセージでやりとりさせていただいて、

問題が発生しているページを実際に拝見できれば、

具体的な解決策をご提示できる可能性があります。

(解決のお約束はできませんが。)

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![uf2](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@uf2](https://community.shopify.com/u/uf2)\
**Post date:** [November 14, 2024, 6:14am UTC](https://community.shopify.com/t/topic/372829/3 "2024-11-14T06:14:32Z")

</div>

株式会社Q

田辺様

ご確認いただきありがとうございます。

フロント部分はほかにも修正したいと思っていた箇所があったため、これを機にオリジナルのDAWNテーマを再度

反映させることにいたしました…！

ご親切にご回答いただきありがとうございました。