Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #15551

    Hello,

    On some of my products, the selection drop down box doesn’t initially show the full width. The right side where the arrow selector for the drop down choice is cit0off a little. After you select yur choice is does then show the full width, It’s not a real big deal, but if there is soemthing I can do to fix this, that would be wonderful. Here is a link to one of the products that do this.

    http://www.nontypicalbuck.com/product/easton-st-axis-n-fused-realtree/

    Thank you so much!

    Kelly

    #87944

    Hi Kelly,

    It’s looking good on my end, can you tell us what browser and OS(i.e Windows 7, etc) you are using? also if you can post a screenshot, it would help us better, what it looks like on your end. :)

    Regards,

    Ismael

    #87945

    Hello, I’m using IE9 with Windows Vista. I’m not sure how to post a screenshot on this site, but I do have a link to look at the pictures. One picture shows it shortened and the other shows it with a selection, where it’s is not shortened. Thank you.

    https://skydrive.live.com/redir?resid=EF36A9F441F9703C!115

    Kelly

    #87946

    It looks like you will have to copy and paste the whole link above. The 115 somehow is disconnected from the hyperlink.

    #87947

    Hi Kelly,

    Try to add this code in Quick CSS:

    form.cart .variations select {
    width: 80% !important;
    }

    Hope this helps. :)

    Regards,

    Ismael

    #87948

    Hi Ismael,

    I placed the code into the Quick CSS, but it didn’t seem to do anything yet. I cleared the cache, but no change. I will check back on it later. Maybe it will take a little while before it updates? Thank you for your help.

    Kelly

    #87949

    Hi,

    The style has been integrated when I inspect it but I guess it is still not working on IE? Try to add

    max-width: 200px;

    Regards,

    Ismael

    #87950

    Hello, I added it to the initial code that you gave me, but that didn’t seem to work either. Please look at the code below to see if I have it correct.

    }

    form.cart .variations select {

    width: 80% !important;max-width: 200px;

    }

    Thank you,

    Kelly

    #87951

    Hi Kelly,

    Kindly remove all the codes I gave you and open header.php(located in wp-content/themes/propulsion/header.php) and find this line of code(line 46):

    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/js/projekktor/theme/style.css" type="text/css" media="screen"/>

    below it, add this code:

    <!--[if IE]>
    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/ie.css" type="text/css" />
    <![endif]-->

    Then go to, wp-content/themes/propulsion/css and create a file and name it ie.css, inside this file add this code:

    form.cart .variations select {
    padding-right: 0 !important;
    }

    Save it and check if it works. :)

    Regards,

    Ismael

    #87952

    Hi Ismael,

    I removed the old quick fix code, and added the above added the above code to in line 47 to the header.php file. I then created the ie.css file a specified, but still no change.

    Maybe I’ll have to wait a bit and see if it updates?

    Thank you Ismael,

    Kelly

    #87953

    Ismael,

    It almost looks like it did change it, but it looks like it went the other way. Now it’s a little shorter in the width. I’m not sure if that’s becasue of the Quick CSS being removed? I compared it to the link of the first pictures I sent, and width is now almost to the center of the drop down “arrow”.

    So it looks to be changing, but it the wrong direction?

    #87954

    Hi,

    The problem is caused by this css located in /config-woocommerce/woocommerce-mod.css on line 1635 .

    #top .prev_image_container form.cart table td{padding: 10px 3px;}

    Unfortunately it comes after ie.css in the cascade making anything you add to ie.css overwritten by anything inside woocommerce-mod.css.

    With that in mind, the most painless (but the ugliest) solution would be to add the code below directly to the header.php file, immediately above the </head> tag:

    <!--[if IE]>
    <style type="text/css">
    #top .prev_image_container form.cart table td{padding: 10px 0px;}
    </style>
    <![endif]-->

    Please let us know how it went,

    Thanks,

    Nick

    #87955

    Hi Nick,

    I placed this in the header.php file located in the public_html/wp-content/themes/propulsion (it didn’t change anything though. The drop down width is still shortened).

    Is this the correct header.php file?

    Here’s where I have it located in this file.

    <?php $style = avia_get_option(‘boxed’,’stretched’); ?>

    <!DOCTYPE html>

    <html <?php language_attributes(); ?> class=”<?php echo avia_get_browser(‘class’, true); echo ” html_$style”;?> “>

    <!–[if IE]>

    <style type=”text/css”>

    #top .prev_image_container form.cart table td{padding: 10px 0px;}

    </style>

    <![endif]–>

    <head>

    Thank you,

    Kelly

    #87956

    Hello,

    Please try to remove cache and reload the page. See if something change. :)

    Regards,

    Ismael

    #87957

    Hi Ismael.

    I cleared the cache and it still is the same. I’m using Quick Cache, maybe there’s something better out there? I also through IE deleted all the temp files and cookies.

    I thought maybe I should take out some of the earlier code. Specifically, the one after line 46 above where it made it shorter. I took it out and it is a little wider, but still not correct. If I need to put tah back in, please let me know.

    Thanks for all your help.

    Kelly

    #87958

    Hi

    Dont know if it will help, but the select boks looks great on IE 9 if you press Compatibility View.

    (I´m on Win7 IE 9.0.9 (KB2722913))

    /Jesper

    #87959

    Yes, that did make it where the drop down box was normal. However, I noticed that when I work with WordPress in compatability view, I have other issues withing WordPress.

    Also, in compatability view, my front page doesn’t show up correctly, not do the fonts show as the same

    Thank you,

    Kelly

    #87960

    Hi,

    Hi. Woops! You put that code in the wrong place. Please put it before the *closing* of the </head> tag, and now it’s before the opening. But if it somehow makes things function perhaps leaving it alone is also a good idea, though yo can try to move it so it looks like the code below relative to the </head> tag. You can always change it back:

    <!--[if IE]>
    <style type="text/css">
    #top .prev_image_container form.cart table td{padding: 10px 0px;}
    </style>
    <![endif]-->
    </head>

    But I wouldn’t worry about compatibility view since its not an accurate representation of a browser, but rather a representation of someone Running IE9 in compatibility view which theoretically will let them see 7 year old websites too cheap to upgrade. IE7 is used by less than 1% of users , and that compatibility view is probably used only be developers and legacy intranets in underdeveloped countries.

    Thanks,

    Nick

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Width of product selection drop down’ is closed to new replies.