Opencart 3.0.3.3 Search Bar Alignment Error

Question

Hi, I created a Theme for Opencart 3.x (3.0.3.3) in TemplateToaster the search bar look like this :

 

 

but when I upload it on Opencart it look like this :

 

 

Do you know how to correct this error?

Regards

Answer 1

We have already generated the case at our end and forwarded it to our Development Team. Solution will provided in future build of TemplateToaster as soon as possible.

For the time being to resolve the issue, you may use custom code given below:

header #search {
  width: calc(100% - 70px - 10px);
}
header .form-search span.input-group-btn {
  display: block;
}
header .form-search span.input-group-btn button {
  font-size: 14px;
  height: 38px;
}
header .form-search span.input-group-btn button::before {
  content: "Search";
}
header .form-search .fa.fa-search {
  display: none;
}

Steps to use custom code:
Open your .ttr file => General tab => Click CSS option => in appeared dialog => Write/Copy&Paste above code => Click Save => Now export your Theme

Comments

The Search Bar layout issue with TemplateToaster theme in latest Version of Opencart 3.0.3.6 and 3.0.3.5 is due to a bug in Opencart itself.

You may refer the link for more read: https://github.com/opencart/opencart/issues/8094

Opencart Team have already fixed the bug. But they didn't released a new version yet. Once it get released it will automatically solve the TemplateToaster theme issue.


For the time being to resolve the issue, you may use TemplateToaster theme in Opencart 3.0.3.3 or earlier versions.