[#6855] - Protostar search module input width setting doesn't work
- Closed
- 2 May 2015
- Very low
- Build: master
- # 6855
Steps to reproduce the issue
I'd been trying to reduce the 'Box Width' of the text field in the Protostar search module without any success. I had tried a number of values. The search module is in the left column of my site, position-8. The issue is that the search box bleeds over into the centre column when the browser window is reduced or when the site is viewed on a tablet.
Expected result
I expected that by reducing the value in the 'Box Width' field in the module settings the text input box would reduce in size when I viewed my site on a tablet or in a smaller browser size.
Actual result
The text box bled over into the adjacent column; nothing changed.
System information (as much as possible)
I have just upgraded to Joomla 3.4.1. The Protostar template was part of that upgrade. I had not made any changes to it.
Additional comments
I raised this issue in the Joomla Community Forum where I was offered a fix which involved adding some code ...
input#mod-search-searchword {
width: 85%;
}
... to the Protostar template.css. That worked. Another forum user joined the discussion, tested to try to replicate the problem and found that the 'Box Label' doesn't work either.
That user encouraged me to share the information here and add a link to the discussion.
http://forum.joomla.org/viewtopic.php?f=713&t=884301&p=3296571#p3296571
Votes
For enabling Box Width just use something like
.inputbox.search-query{
width:auto;
}
in your CSS file.
For enabling Box Label something like
label.element-invisible{
position:inherit;
height:auto;
width:auto;
}
in your CSS file.
Or use an PHP override and remove above Bootstrap classes and others you don't like.
How would that fix the problem with Joomla not honouring the settings in the modules edit screen ?
Give it a try. That's just CSS,
That's not a Joomla "problem". Protostar is a responsive Bootstrap template and it uses Bootstrap CSS classes. It works as expected. You have the same "problem" nearly in any form (frontend and backend).
Joomla doesn't ignore your settings. Have a look in HTML source code of your page. You'll see a size attribute and also a label tag.
So, if you want to influence the output use instruments like CSS or template overrides. What's the problem?
Sadly this issue has been around for a long time.
On 29 April 2015 at 23:21, Michael Babker notifications@github.com wrote:
@bertmert https://github.com/bertmert The point in this issue is that
there are options in the UI to change something and those options do not
work. Your CSS fix would indeed change something, but that doesn't change
the fact the UI options are broken.—
Reply to this email directly or view it on GitHub
#6855 (comment).
Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/
@brianteeman
Are you confirming the issue ?
I've reported it before so yes I believe it is an issue.
On 30 Apr 2015 10:44 am, "Webdongle" notifications@github.com wrote:
@brianteeman https://github.com/brianteeman
Are you confirming the issue ?—
Reply to this email directly or view it on GitHub
#6855 (comment).
zero-24
- | Status | New | ⇒ | Confirmed |
Also see #4879
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6855.
I don't see that UI options are really broken. Joomla sets attribute size correktly and inserts the label correctly.
- But a template (Protostar) overrides size and hides label using CSS because this template is "bootstrapped".
- Test it with Beez3: Size works but label is still hidden.
- Any other template (not Bootstrap 2): You'll see the label, too (even if field Box Label is empty)..
Bootstrap comes along with this CSS that one has to override always for nearly all forms whenever Bootstrap is loaded (plus mediaqueries).
input, textarea, .uneditable-input {
width: 206px;
}
It's not easy to get rid of it ;-)
One could add something like this to Protostar template.css (or inside default.php of module)
input[size].search-query{
width:auto;
}
"When size attribute is set, reset width."
Plus a condition inside default.php. Only if size entered then set size attribute for INPUT.
(But really in core?)
roland-d
- | Status | Confirmed | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2015-05-02 18:06:12 |
| Closed_By | ⇒ | roland-d |
I can confirm that with J3.4.1 giving values to the 'Box Width' and 'Box Label' fields has no affect with the display using Protostar as default Template.