search shortcode explorer 9

[talgo]

hi.

i am using search shortcode in text widget. it works great on chrome but on explorer the width of a search field is to wide. any ideas what can i do?

this is my website  http://avital-cpa.co.il/

[scrambler]

The width of the search input filed is set at 193px, reduce it. Ideally all these width should be set in percentages so they can adapt to the container size

By the way the whole point of using weaver theme is because it is responsive and will adapt to any browser size, even on mobile.

You have added a fixed width to you site that prevents it from scaling down, so when we reduce the browser size, things get cutoff.

This is a very bad idea in this day and age….

[talgo]

hi @scrambler.

if i will reduce the 193px width so the search field on chrome gonna be to narrow.

the fixed with of the site was added during the search for the solution to my problem of the search field. right now the site is responsive but the problem is the same.

how can i set the width of the search field in percentages.

[scrambler]

OK so two things.

1-width in percentage:

What are you using to create your search box? B
Because normally the search widget automatically uses % in weaver.

2- The reason the dimension was not working, is because the search input box has 28px left padding and 10px right padding that are not accounted for in the width of the box on IE but are on chrome. This probably comes from the fact that this element does not have a defined box-sizing property (the one that defines if padding is included in the width or not) and the default ends up being different on the 2 browsers.

Again, the search widget in weaver normally takes care of all that.

So if you are not using the search widget but a manually constructed one, you will need to change the inline style of the search input field to

style=”-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;”

[talgo]

hi @scrambler i  tried  to use the weaver search widget but I just couldn’t center it properly.

now i am using weaver text widget and weaver search shortcode.

i am not a professional css user, so i have no idea where to put the code (style of the search input field) that you gave me.

[scrambler]

If you are using weaver search shortcode, then I guess it is weaver’s fault 🙂

Something does appear to have change as when I set the width now, it contains the padding

To change the width, add the rule below in Advanced Options > Head Section > Custom CSS Rule box
.searchform input#s {width:100% !important;}

You also need to do that for your contact form. Normally the plugin you are using should allow you to set the width of the form in percentage instead of a fixed width.
If you really cannot find how to go that with the plugin, you could use the rule below (in the same location as the one above) to override the current rules
body .cf7-style.cf7-style-312 input, body .cf7-style.cf7-style-312 {width:90%;}

If the search box still has the wrong size on some browsers, post back with the above changes in place

[Author]

Posts