I am the webmaster for a large, well-established Drupal site. I am trying to fix a search form in its header whose container seems to be too small, so the search button gets pushed down. I used Firebug to narrow in on the stylesheet and style that was needed to be altered. There is a div inside the search form called #search which was set at 175px. I changed it to 200px, which would work perfectly. The problem is that Firebug still shows it at 175px (yes it was the same stylesheet), even though when I go to the actual file, my change to 200px is there. Does any Drupal expert out there have any idea what might be causing this issue? I have hunted high and low with no luck. I’m sorry I can’t post the url of the site, so I am looking for ideas of what I might be missing.
Hi WebMachine
Did you try clearing your cache so your updates take effect?
Maybe try your page in a different browser with no history and see what happens.
And a bit of your markup might help.
Or try a % to the #search.
Barry
Thanks for your response, Barry.
Yes, I clear the cache everytime I make a change to the site.
Here is some code to show you what the problem is:
Source Code:
<form action="/" accept-charset="UTF-8" method="post" id="search-theme-form">
<div><div id="search" class="container-inline">
<div id="search" class="container-inline">
<div class="form-item" id="edit-search-theme-form-1-wrapper">
<label for="edit-search-theme-form-1">Search this site: </label>
<input type="text" maxlength="128" name="search_theme_form" id="edit-search-theme-form-1" size="15" value="" onblur="if (this.value == '') {this.value = '';}" onfocus="if (this.value == '') {this.value = '';}" class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
<input type="hidden" name="form_build_id" id="form-ae70954c663351bcff27c4a6bafeb72e" value="form-ae70954c663351bcff27c4a6bafeb72e" />
<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />
</div>
</div>
</form>
What I get when I view element in Firefox with Firebug
screen.css?5 (line 58)
search {
position: absolute;
right: 25px;
top: 120px;
width: 175px;
}
What the actual screen.css file has:
/* Search */
#search { width: 200px; position: absolute; top: 120px; right: 25px;}
#search label { display: none;}
#search div.form-item { float: left; margin-bottom:0;margin-top:0; }
#search input textarea { border:1px solid #ccc; padding:2px; margin: 0; }
#search input[type=text]{margin:0;}
#search .form-submit {margin: 0; float: right;}
What I get from my Firefox Developer Tools when I view css:
/* Search */
#search { width: 175px; position: absolute; top: 120px; right: 25px;}
#search label { display: none;}
#search div.form-item { float: left; margin-bottom:0;margin-top:0; }
#search input textarea { border:1px solid #ccc; padding:2px; margin: 0; }
#search input[type=text]{margin:0;}
#search .form-submit {margin: 0; float: right;}
I tried adding !important beside the 200px, but that didn’t even show up in Firebug, so I’m not sure that using a % would register either.
I’ve hunted everywhere - what can I be missing?
Did you realise you have two #search ?
<div id=“search” class=“container-inline”>
<div id=“search” class=“container-inline”>
I thinking this is more a CSS issue than a specific Drupal problem, though if your not seeing updates got to be the cache.
I tried adding !important beside the 200px, but that didn’t even show up in Firebug, so I’m not sure that using a % would register either.
I’m starting to reminisce now (:
I’ve had this problem myself in the past, updating the CSS or whatever file and nothing updates - unfortunately can’t remember what the problem was and how I fixed it.
Try adding some new CSS background-colors for a page or node and see if they update.
Barry
Sorry, that was a copying error on my part. There really is only one #search.
I have cleared the cache several times to no avail since I started this several days ago, but you have given me a direction to look in. If you ever think of what caused your updating issue, I’d really appreciate hearing about it.
Will do and keep at it WebMachine I’m sure you’ll figure it out.
And just make sure you’re not updating your dev environment and looking at your live site.
Barry
Are you updating the correct .css file? Worth looking to see if you have multiple versions…
I have gone over the css files multiple times, and I am positive that I am updating the correct file. Besides, it is referenced in the firebug report so you know exactly which file is affecting the element.
I have cleared the cached numerous times. The actual stylesheet screen.css shows the changed width as 200px, but firebug and my developer toolbar ‘view css’ in Firefox still shows 175px.
I tried doing other minor changes to the styles to see if they would work, but nothing is responding. Please take another look at my post where I have posted the code from various sources. If anyone has had this same experience and was able to solve it, please let me know what you did.
This has further-reaching consequences than my just not being able to increase the size of the search box container - I will be needing to make other changes to the site also, so I really have to solve this conundrum.
Have you tried the module Field Formatter Class? It works great, you can force a class to any field!
Also, have you tried to set
min-width: 175px;
Thanks, GroovyMotion, but I don’t think you understand the issue.
The element in question already has an id (#search) that I can target so why would I need the module Field Formatter Class to force the element to have a new class? Please see the code in my previous post.
And I have already changed the width of the element from 175px (the original width) to 200px (what I need) in the appropriate stylesheet, but the change does not take effect, and even Firebug thinks the element is still 175px wide.
What good would using
min-width:175px;
be?
Have you confirmed the style exists in the generated stylesheet? A popular approach is to write some generic comment than search for it in the generated style sheet. If it doesn’t exist than your styles aren’t being included. If it is than the problem most likely comes down to lower specificity of the rule. You could also try turning off aggregated CSS under admin/config/structure/performance to see if that solves the issue. If so there might be some custom code behind the scenes doing something wonky for added caching/performance reasons or something. Without actually seeing the site in question and going though the debug process it is nearly impossible to suggest a single solution since there are so many possible causes from CSS issues to the caching layer to custom code digging its clutches into the standard workflow.
My bad! I have a form and drupal would keep it resizable and too big so this is what I did:
<textarea id="edit-submitted-reason" class="form-textarea required" rows="5" cols="60" name="submitted[reason]"></textarea>
and
.form-textarea {max-width: 37.5em !important;}
and it works.
I think it is a caching issue, because I tried changing other styles in the header (eg adding a coloured outline, etc) and nothing would take effect. I didn’t build the site, so it’s going to be like finding a needle in a haystack, and I don’t want to break the site in the process.
The search form is the default one generated by Drupal, and it adds its own unique id(#search). Firebug is not picking up on anything else that would affect the element width (see my posted code in a previous post), and the generated css stylesheet is not picking up my change, even though the actual screen.css file shows the change.
I had already checked aggregated CSS, and it had not been enabled, so that isn’t the problem.
Thanks for all your suggestions, and I will keep hunting.
Hey, I had the same issue when I modified my webform for media-queries and the solution was to force the textarea size with a wrapper. Maybe try that.