ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Neighborhood
• November 11, 2015 at 1:16 am #227625
  simonm_

  Member

  Post count: 10

  Hey guys,

  The select2 dropdown menu for both the country and state fields seem to be aligning to the width of the entire form rather than the choice bar (see screenshot). I’ve been able to make it look right by adjusting the ‘width’ and ‘left’ values both with pixels and percentages in CSS but I can only get them to work for my current screen width and they are completely out of alignment in all other responsive widths. Any ideas to make that left border line connect with the left line in the choice bar would be greatly appreciated. Thanks!

  Attachments:

  You must be logged in to view attached files.
  November 11, 2015 at 8:58 am #227652
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  .select2-drop{
  left:510px !important;
  width:450px !important;
  }

  Thanks
  Mohammad

  November 11, 2015 at 10:03 am #227671
  simonm_

  Member

  Post count: 10

  Hi Mohammad,

  Thanks for the code, but unfortunately I’m still running into the same problem. Although I can line up the border lines by adjusting the widths etc, as soon as I change the width of my browser, the drop down form only shifts a little and mostly just stays where it is on the screen as the rest of the form responds to the changing width (see screenshot). It even begins to disappear off the side of the screen. In mobile mode something weird happens and the drop down is shoved all the way to the bottom of the screen. Any ideas? Thanks!

  Attachments:

  You must be logged in to view attached files.
  November 11, 2015 at 10:58 am #227688
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please activate the default wordpress theme and check for issue. It seems woocommerce issue so i would suggest to contact at woocommerce support https://support.woothemes.com/.
  Thanks
  Mohammad

  November 11, 2015 at 11:56 am #227726
  simonm_

  Member

  Post count: 10

  Thanks again Mohammad,

  I’ve tested the dropdown with the Twenty Fifteen theme and had no issues, the form worked perfectly.
  I also deleted all custom CSS and disabled all plugins but in these cases, the issue remained.
  Is it still likely to be a woocommerce issue?

  November 11, 2015 at 12:00 pm #227730
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Is dropdown working perfectly with the Twenty Fifteen theme?
  Thanks
  Mohammad

  November 11, 2015 at 12:45 pm #227759
  simonm_

  Member

  Post count: 10

  Hi Mohammad,

  Yes, it is.

  November 11, 2015 at 2:47 pm #227839
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Can you try this css.

  .select2-display-none {
      width: 405px!important;
      margin-left: 135px!important;
  }

  -Rui

  November 12, 2015 at 3:33 am #228049
  simonm_

  Member

  Post count: 10

  Hi Rui,

  Thanks, just tried that code but it only works with one screen width. As soon as I widen or shrink the screen size, the drop down line-up is all thrown out again. It really seems to be a responsive issue to me?

  I also just tried it with another browser and had the same issue.

  By default, the left border of the drop down seems to be exactly in line with the left border of the entire billing form, rather than the choice bar of the select2 form (see screenshot in original post). Could that mean anything?

  Thanks again,

  Simon.

  November 12, 2015 at 3:39 am #228050
  simonm_

  Member

  Post count: 10

  (continued…)

  I should add that the drop down is fully responsive when I haven’t tried to adjust the width using CSS – the left border is just always lined up to the outer edge of the form rather than the top of the select2 bar.

  November 12, 2015 at 11:40 am #228130
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  I understand, I’m not sure how to achieve it.
  Will have to forward it to the development team.

  -Rui

  November 13, 2015 at 12:35 am #228450
  simonm_

  Member

  Post count: 10

  Thanks Rui,

  Does that mean it could potentially be addressed in a future update?

  November 13, 2015 at 12:38 am #228452
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  It could be that or the development team can provide an css fix as soon as they read this topic(and it’s feasible of course).

  Let’s wait for the reply.

  -Rui

  November 15, 2015 at 2:59 am #228794
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Hi there,

  This is because of the custom css – unfortunately it’s not possible as standard without multiple sections of custom css for each viewport size to have it fixed to the area that the item row occupies.

  If you want, we can provide css to make the labels show above the inputs, rather than next to?

  – Ed

  November 16, 2015 at 12:22 am #228833
  simonm_

  Member

  Post count: 10

  Hi Ed,

  A fix to make the labels show above the inputs would be great. Thanks for your help!

  Simon.

• Back to forum

  Posted in: Neighborhood