Jump to content

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


jasonc

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

Link to comment
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>
Link to comment
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. 

Link to comment
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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.