width of adv search input box and protostar template

More
9 years 4 months ago - 9 years 4 months ago #51621 by Macjoomla
Hello,

i am on Joomla 3.3.6 with Flexicontent 2.2.1 rc and using protostar template with flexi advanced search modul on position 7 (right). No matter which length of input box i choose in module preferences, it does not change and input box is going out of template boarder.

Now after some looking around, it seems, protostar is ignoring this input and as a workaround i added following lines to the template css.
Code:
#mod-search-searchword { width: 150px !important; }
After this, at least normal joomla search module (which did wrong either) is listening to the pixels in css. Unfortunately flexi advanced search does not. Please see attached screenshot.
[attachment=0:vjxbq1x5]<!-- ia0 -->Bildschirmfoto 2014-12-18 um 11.14.09.png<!-- ia0 -->[/attachment:vjxbq1x5]
What should i do to shorten the input box?

Thank you and best regards, Macjoomla
Attachments:
Last edit: 9 years 4 months ago by Macjoomla.

Please Log in or Create an account to join the conversation.

More
9 years 4 months ago #51623 by ggppdk
Hello

short answer: use a more specific rule:
to make rule more specific e.g. prepend body, like this
Code:
body #mod-search-searchword { width: 95% !important; }
Code:
body #mod-search-searchword { width: 120px !important; }


even if we remove, !important the 150px, will still take effect, because the CSS rule is specific, since it uses an HTML id TAG


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
9 years 4 months ago #51626 by ggppdk
Hello

but probably this rule should use a percentage !!

and not fixed pixels !!


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
9 years 4 months ago #51627 by Macjoomla
hello ggppdk.

thank you for your answer, i replaced my lines with:
Code:
body #mod-search-searchword { width: 85% !important; }
This works fine for the joomla search module, but flexi advanced search module seems totally unimpressed and does not change size :(

Best regards, Macjoomla

Please Log in or Create an account to join the conversation.

More
9 years 4 months ago #51629 by ggppdk
Hello

there is a minimum width 180px in effect

[updated]

try
Code:
body #search_searchword { minimum-width: 0px !important; width: 85% !important; }


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
9 years 4 months ago #51631 by Macjoomla
Sorry, no luck, no it reads like
Code:
body #mod-search-searchword { minimum-width: 0px !important; width: 85% !important; } body #search_searchword { minimum-width: 0px !important; width: 85%; }
in my template css, but flexi adv search width does not change.

Best regards, Macjoomla

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.843 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline