Jump to content
jasonc

Right align select option 'container', not text within option

Recommended Posts

I have been looking via google and this forum but still no closer to finding the answer to this.

I have a select that is in the right side of my page but the options are jumping out to the right side of the page. So I am looking to get the 'container' moved to the left so it is aligned to the right of the select.

post-29199-0-29932000-1505476079_thumb.png

Edited by jasonc

Share this post


Link to post
Share on other sites

For the sake of simplicity I have used instyle.

I am wanting the right side select to have its option 'container' to be moved over to the left so it is like that in the image in my first post.
 

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.form2 { width: 200px; margin: 0 auto; padding: 0.5em 0.5em 0.5em 0.5em; }
.form2 input.field { float: left; width: 100%; height: 2em; border: 0.02em solid #000; line-height: 1.7em; font-size: 0.9em; padding: 0.2em; }
.form2 select {  }
.form2 select.field { float: left; width: 100%; height: 2em; border: 0.02em solid #000; line-height: 1.7em; font-size: 0.9em; padding: 0.2em; }
</style>
</head>
<body>
        <form class="form2" id="form2" name="form2" method="post" action="">
                <div style="float: left; width: 48%;"><select class="field" title="Select Stairs, Lift or N-A" name="stairliftna" id="stairliftna"><option value="Select Stairs, Lift or N-A">Select Stairs, Lift or N/A</option><option value="Stairs">Stairs</option><option value="Lift">Lift</option><option value="n-a">N/A</option></select><br><br>
                </div>
                <div style="float: left; width: 4%;"> </div>
                <div style="float: left; width: 48%;"><select class="field" title="Select Packing service" name="packingservice" id="packingservice"><option value="Select Packing service">Select Packing service</option><option value="Self packing">Self packing service</option><option value="Part packing">Part packing service</option><option value="Full packing service">Full packing service</option></select><br><br>
                </div>
                <br class="clearFloat">
        </form>
</body>
</html>
Edited by jasonc

Share this post


Link to post
Share on other sites

That doesn't look like a "real" select, but more likely a CSS/JavaScript element. Impossible to help without you providing the relevant code. What would be really helpful is if you could create a JSFiddle with just the minimum code to replicate the problem.

 

EDIT: OK, when I clicked Save your 2nd post wasn't there. 

Edited by Psycho

Share this post


Link to post
Share on other sites

If I done a JSFiddle it would be the same code.  I recreated the same problem using my original code and stripped out everything that was not needed to show my issue.

 

The right side select is the issue.  I am wanting the options 'container' to be right aligned to the select as shown in the image I added in the OP

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.