putting side by side 2 select elements

jimfog · December 12, 2013

What I am trying to do is described in the title. I am trying to do the same thing a user sees when he goes to store an event in outlook.com calendar, I am referring to the start and how long fields.

Here is my html:

<div id="eventdialog"><div id="container"> <div id="times_modal">                       <label>Time:</label>                       <select class="dropdown">                          <option value="30min">08:00</option>                          <option value="60min">08:30</option>                          <option value="90min">09:00</option>                </select>                </div>          <div id="duration">                    <label>Duration:</label>                    <select>                          <option value="30min">30 minutes</option>                          <option value="60min">60 minutes</option>                          <option value="90min">1 hour</option>                    </select>                </div> </div></div>

The problem now is that each select element appears below one an other.I tried playing with floats but with no result.

I have to add one thing. The div with id="eventdialog" is the modal that appears on clicking a time slot, like outlook.com.

Here is an image of the problem. The labels are in Greek, I hope it is not a problem:

http://sdrv.ms/19kkrh7

justsomeguy · December 12, 2013

Each select element is inside a div, and divs are block-level elements. Don't put them inside different divs if you want them to be inline.

davej · December 12, 2013

Jim, you ask such a strange mixture of simple and advanced questions.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>side by side</title><style>#container{width:200px;border:1px dotted gray;overflow:auto;}.fleft{float:left;margin-right:3px;}</style></head><body><div id="eventdialog">  <div id="container">     <div class="fleft" id="times_modal">        <label>Time:</label><br/>        <select class="dropdown">            <option value="30min">08:00</option>            <option value="60min">08:30</option>            <option value="90min">09:00</option>        </select>    </div>    <div class="fleft" id="duration">        <label>Duration:</label><br/>        <select>            <option value="30min">30 minutes</option>            <option value="60min">60 minutes</option>            <option value="90min">1 hour</option>        </select>    </div>   </div></div></body></html>

jimfog · December 12, 2013

Your answer is correct but there is a p

Jim, you ask such a strange mixture of simple and advanced questions.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>side by side</title><style>#container{width:200px;border:1px dotted gray;overflow:auto;}.fleft{float:left;margin-right:3px;}</style></head><body><div id="eventdialog">  <div id="container">     <div class="fleft" id="times_modal">        <label>Time:</label><br/>        <select class="dropdown">            <option value="30min">08:00</option>            <option value="60min">08:30</option>            <option value="90min">09:00</option>        </select>    </div>    <div class="fleft" id="duration">        <label>Duration:</label><br/>        <select>            <option value="30min">30 minutes</option>            <option value="60min">60 minutes</option>            <option value="90min">1 hour</option>        </select>    </div>   </div></div></body></html>

Your code does to solve the issue. My question is, did you tested yourself before showing it here?

See for yourself:http://sdrv.ms/1fnXnPE

Each select element is inside a div, and divs are block-level elements. Don't put them inside different divs if you want them to be inline.

Your are right...but there is a catch.The drop-down menu with the timeslots is created using this plugin https://github.com/ambicoder/easydropdown

In the readme file it says that in order for the plugin to work a class named dropdown must be attached to the select element.

Unfortunately, this leads that the plugin creates a div element there with class dropdown.

It is done automatically by the plugin.

The above being said I do not know what is the proper solution here.

justsomeguy · December 12, 2013

If you have to use a div then it might be possible to just make the div inline, but that might mess up other styling depending on what the plugin is doing. You can always use a table layout structure.

jimfog · December 12, 2013

I put display inline but nothing changed:

.fleft{float:left;      margin-right:3px;      display:inline;}

davej · December 12, 2013

I can't see it. Skydrive can't seem to retrieve it.

What is it doing? I only tested it on my desktop. You would probably also need to add a clear:both to the next div, or add a little empty div with clear:both.

dsonesuk · December 12, 2013

Adding display-inline to already float: left; won't show anything different as they give the same result

for your original code using

#container > div {float: left; margin: auto 10px;}

should give required result

for the jquery conversion float seems to mess up the design, so you might want to try display: inline-block for both original (no JavaScript) and jq conversion (JavaScript)

#container > div, .dropdown {display:inline-block; margin: auto 10px;}

jimfog · December 13, 2013

Adding display-inline to already float: left; won't show anything different as they give the same result

for your original code using
#container > div {float: left; margin: auto 10px;}
should give required result

for the jquery conversion float seems to mess up the design, so you might want to try display: inline-block for both original (no JavaScript) and jq conversion (JavaScript)
#container > div, .dropdown {display:inline-block; margin: auto 10px;}

I tried your code(both)and it does not solve the issue, what it does is this...see the image:

https://skydrive.live.com/redir?resid=BE27434B2AAC8130!269&authkey=!AKmYOSAzveYCIuA&v=3&ithint=photo%2c.JPG

As you see the label is positioned right of the select element, something clearly unwanted.

I could never imagine that this would prove so difficult.

Edited December 13, 2013 by jimfog

dsonesuk · December 13, 2013

I do'nt see anything but login to skydrive

it would help if you give us the end result of conversion or page, so we wouldn't have to guess to correct the problem.

Edited December 13, 2013 by dsonesuk

jimfog · December 13, 2013

strange...I had made a post where I was saying that the original issue was solved but something else came up.You cannot see any image cause I changed it

which reflects the new situation-problem:

https://skydrive.live.com/redir?resid=BE27434B2AAC8130!272&authkey=!AGUhmvTkfwGVA-E&v=3&ithint=photo%2c.JPG

THere is a message in the image that describes the current problem.

I will give further explanation if needed. The only thing to add is that except the problem depicted in the image another (second) problem is the fact that

the options of the menu are not shown at all, the modal box acts as "boundary" the prohibits that.

Sorry for the not so good description of the problem...I am very sleepy. :Bucktooth:

I will edit this post again if needed.

dsonesuk · December 13, 2013

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <link rel="stylesheet" type="text/css" href="demo.css"/>        <link rel="stylesheet" type="text/css" href="themes/easydropdown.css"/>        <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>        <script src="src/jquery.easydropdown.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            /*#times_modal, #duration {float: left;margin: auto 10px;}*/            #container {                border: 1px solid #CCCCCC;                float: left;                margin: 10px;                padding: 15px;                border-radius: 5px;            }            #container > div, .dropdown {float:left; margin: auto 10px;}            #container > div label {                display: block;                font-size: 1.4em;                height: 37px;                line-height: 1.8em;                vertical-align: top;                margin-left: 10px;                /*to stack label above dropdown instead of side REMOVE FLOAT;*/                float: left;            }        </style>    </head>    <body>        <div id="eventdialog">            <div id="container">                 <div id="times_modal">                    <label>Time:</label>                    <select class="dropdown">                        <option value="30min">08:00</option>                        <option value="60min">08:30</option>                        <option value="90min">09:00</option>                    </select>                </div>                <div id="duration">                    <label>Duration:</label>                    <select class="dropdown">                        <option value="30min">30 minutes</option>                        <option value="60min">60 minutes</option>                        <option value="90min">1 hour</option>                    </select>                </div>             </div></div>    </body></html>

jimfog · December 14, 2013

dsonesuk...

Your code works as long as I increase the width of the modal.Otherwise this is the image that gets shown:

http://sdrv.ms/18s0KFn

Further some points must be made:

You chose a font-size of 1.4em for the labels. I think you chose that font-size a little arbitrarily,cause as you see the labels become too large.
The second point is depicted in this image http://sdrv.ms/1dAq4a5...if I choose to extend the drop-down menu this is not shown as it constrained from the modal.

These are what I have to mention.for now.

dsonesuk · December 14, 2013

I choose that font-size to make it line up and match more or less the input font with what i got from easydropdown as example only, and I can't tell what is causing the dropdown problem BECAUSE, as mentioned BEFORE we have nadda to go by, but! none working links to images, and just images, i tried inspecting images with firebug, but all it comes up with, is that it IS an image! surprising that isn't it, AND therefore no HTML and CSS to go by.

jimfog · January 2, 2014

I choose that font-size to make it line up and match more or less the input font with what i got from easydropdown as example only, and I can't tell what is causing the dropdown problem BECAUSE, as mentioned BEFORE we have nadda to go by, but! none working links to images, and just images, i tried inspecting images with firebug, but all it comes up with, is that it IS an image! surprising that isn't it, AND therefore no HTML and CSS to go by.

I apologize for replying so lately....the PC was to the technician for 2 weeks,I had to format the HDD. Now to the issue...

These 2 images show the menus extended...and non extended.Of course what I want here that the dropdowns are like this http://sdrv.ms/1coc7gh

http://sdrv.ms/1coacYR http://sdrv.ms/1coaBuy

You can see the problem I think.And now the HTML...I hope that you can make a meaning out of it:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-describedby="eventDialog" aria-labelledby="ui-id-1" style="position: absolute; height: auto; width: 367px; top: 192px; left: 487px; display: block;">/*here ends the div that contains everything in the dialog*/<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Νew Appointment</span><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button></div><div id="eventDialog" class="ui-helper-hidden ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 36px; max-height: none; height: auto;">/*this contain the title of the dialog box along with an x that close the dialog*/<div id="eventDialog" class="ui-helper-hidden ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 36px; max-height: none; height: auto;">                        <div>                    <label>Name</label><br>                    <input id="title" class="field" type="text">                 </div>         <div id="container">             <div id="times_modal">                    <label>Ώρα</label><br>                       <div class="dropdown"><span class="old"><select class="" id="EasyDropDown2177EA">                          <option value="30min">08:00</option>                          <option value="60min">08:30</option>                          <option value="90min">09:00</option>                       </select></span><span class="selected">08:00</span><span class="carat"></span><div style="height: 0px;"><ul><li class="active">08:00</li><li>08:30</li><li>09:00</li></ul></div></div>             </div>       <div id="duration">                 <label>duration</label><br>                    <div class="dropdown"><span class="old"><select class="" id="EasyDropDownE0E4C7">                          <option value="30min">30 minutes</option>                          <option value="60min">60 minutes</option>                          <option value="90min">1 hour</option>                    </select></span><span class="selected">30 minutes</span><span class="carat"></span><div style="height: 0px;"><ul><li class="active">30 minutes</li><li>60 λεπτά</li><li>1 hour</li></ul></div></div>             </div>            </div>          <!--</div>--><!--                <div>                    <label>Color:</label>                    <input id='color' class="field" type="text"></input>                </div>-->           </div>   </div>the following div contains the buttons OK and cancel<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">cancel</span></button></div></div>

here is the CSS:

dialog css(it is produced by jquery-UI)element.style {position: absolute;height: auto;width: 367px;top: 192px;left: 487px;display: block;}#container css {border: 1px solid #CCCCCC;float: left;margin: 10px;padding: 15px;border-radius: 5px;}dropdowns(these 2, in dev tools appear with an overwrite line)#times_modal, #duration {float: left;margin: auto 10px;}

Let me know...

dsonesuk · January 2, 2014

As far i can see using the basic modal, you have to change content container to overflow visible

from original css code

.ui-dialog .ui-dialog-content {

background: none repeat scroll 0 0 transparent;

border: 0 none;

overflow: auto;

padding: 0.5em 1em;

position: relative;

}

to this (add this below above if adding to stylesheet)

.ui-dialog .ui-dialog-content {

overflow: visible;

}

IF you need to adjust height force height with !important

#dialog { /*use your dialog id ref */

height: 247px !important; /*adjust to your required height*/

}

EDIT: IT would have helped if you supplied this in the first place, and mentioned this was using jquery code and css to produce the modal.

What you originally supplied is nothing like the end result when jquery converts it so we had ideal of this conversion and just worked to your code in post #1 and then reference to easydrop code in post #4, even then you still had not mentioned that the jquery modal is being used. in fact it was by me ding a google search for 'ui-dialog' i was able to understand what the problem was, finally!.

Edited January 3, 2014 by dsonesuk

jimfog · January 3, 2014

yes the code you gave me dsonesuk fixed things...but only partially. The improvement is that when the dropdowns are extended they do not slide one down the other

as it is depicted here http://sdrv.ms/1coacYR.

So there are 2 issues remaining:

Here is the first-the image has notes in it http://sdrv.ms/1dth6ND

This is the second image http://sdrv.ms/1dth8Fp...this image too has notes regarding the problem.

If the HTML/CSS shown in my last post is not enough I will post again with more from it.

I went to to the css file related to the dropdown (easydropdown.css) and I set .dropdown div to overflow:visible.

The result was this,better than before but still not what it must be:

http://sdrv.ms/KncoHi

Edited January 3, 2014 by jimfog

dsonesuk · January 3, 2014

There's no way i can help further unless we have access to the page that produces this modal, to give a solution, we can be doing this to next xmas at this rate.

jimfog · January 3, 2014

There's no way i can help further unless we have access to the page that produces this modal, to give a solution, we can be doing this to next xmas at this rate.

How Can I give you access to that page? Any ideas? Is fiddle enough?

You are right of course in what you say, no doubt about that.

dsonesuk · January 3, 2014

get/create a test domain, or a test folder in a current domain that you can reproduce this page, where you can test your code and we can access.

jimfog · January 4, 2014

get/create a test domain, or a test folder in a current domain that you can reproduce this page, where you can test your code and we can access.

I suppose that means paying a hosting package.Is there a similar faster solution?

Not cheaper, cause paying 2-3$/month is not a problem

I am just asking in case you know

jimfog · January 9, 2014

get/create a test domain, or a test folder in a current domain that you can reproduce this page, where you can test your code and we can access.

I am preparing to do so.I am in the process of finding a hosting package.

putting side by side 2 select elements

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in