HOWTO: Use CSS to change the dropdown field width

bsoremsugar —  February 17, 2012 — 9 Comments

I came across two questions earlier this week:

Does anyone know how to increase the horizontal width” of a drop-down field on the Basic and Advanced Search form? I know how to increase the height of a drop-down field

and

How do I change gorinzotal size of Selection Boxes (enum) in Basic and Advanced Search?
I know how to change vertical size of Selection Boxes.

One method is to customize the SugarField, as shown in this blog post. But you can also use pure CSS to accomplish this as well by simply adding a style.css file in the custom/themes/default/css/ directory with a CSS rule to make the change. So for example, if you want to customize Account Type field in the Accounts module Advanced Search page to make the width 200px and the height 200px, add this rule to the file:

select[name="account_type_advanced[]"]
{
    width: 180px !important;
    height: 200px !important;
}

Be sure to do a Quick Rebuild and Repair to have the new CSS file loaded on the next pageload.

9 responses to HOWTO: Use CSS to change the dropdown field width

  1. 

    hi. this looks good, but I could not get sugar to ever load my style.css file. on version 6.4.5.

    • 

      Hey, sorry. It DID work. But only for height. Width is “overwritten” by the local style definition in the HTML code.
      Thanks!

      • 

         Use the magical !important attribute on the rule to make your rule take precedence.

        • 

          For some reason the magic didn’t happen. No idea why.

          • 

             Use a tool like Firebug to help see the CSS inheritance rules. Can be a bit tricky sometimes to get right.

          • 

            Having the same problem.  It appears that the default yui.css file has “width: auto !important”, and it is being built into the cache folder BEFORE any custom themes when you do a Repair & Rebuild.  I’m looking into a work-around.

          • 

            found a workaround:  “The declaration with the most specific selector will be applied.”  So, if you add the following to custom/themes/default/css/style.css, your changes should stick through a Repair & Rebuild:

            td .yui-ac-input {
            width: 300px !important;
            }
            div .yui-ac-content{
            width: 300px !important;
            }

            HTH

            • 

              thanks for your comment, but the magic still isn’t happening here. I see the following code in cache/themes/Sugar5/css/style.css after rebuild:

              td .yui-ac-input{width: 200px !important;}div .yui-ac-content{width: 200px !important;}select[name="firmentyp_c_advanced[]“]{    height: 200px !important;    width: 200px !important;}select[name="branche_c_advanced[]“]{    height: 200px !important;    width: 200px !important;}

              But still the local style attribute “width:150px” overrules the new attributes.

              perhaps interesting, also… In yui.css (what is this sheet anyway?) I see the following content:

               .yui-ac-content {    position: absolute;    border: 1px solid #808080;    width: 160px;    background: #fff;    overflow: hidden;    z-index: 9050;}

              But the width applied in the local style of the search filter box is “width:150px”. So this local style attribute must have a different origin than yui.css. Isn’t this correct?

              Anyhow, if you have any other ideas, let me know.

              • 

                I got it to work now, but adding “.search td ” before each attribute, thereby making it more specific than the already existing attributes. so e.g.

                .search td select[name="firmentyp_c_advanced[]“]

                …..
                }

                thanks for your input!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s