How do I get my icon to horizontally line up with my drop down box?












1















having a bit of trouble lining up my icon with my dropdown box. I'm using jQuery Mobile. I have tried using the inline-block feature but I'm having no luck with it.



Could anyone help me with a solution. Thanks






<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">
<select name="type" id="type">
<img src="">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>












share|improve this question























  • I have, in the past, given the container an inline-block display and floated the dropdown menu right, but it didn't work. I have also given the image the inline-block display with the dropdown floated right, still didn't work.

    – A.M.
    Nov 16 '18 at 2:02













  • JQM has grids for this job. See here: stackoverflow.com/a/53271194/4845566

    – deblocker
    Nov 16 '18 at 15:32
















1















having a bit of trouble lining up my icon with my dropdown box. I'm using jQuery Mobile. I have tried using the inline-block feature but I'm having no luck with it.



Could anyone help me with a solution. Thanks






<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">
<select name="type" id="type">
<img src="">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>












share|improve this question























  • I have, in the past, given the container an inline-block display and floated the dropdown menu right, but it didn't work. I have also given the image the inline-block display with the dropdown floated right, still didn't work.

    – A.M.
    Nov 16 '18 at 2:02













  • JQM has grids for this job. See here: stackoverflow.com/a/53271194/4845566

    – deblocker
    Nov 16 '18 at 15:32














1












1








1


0






having a bit of trouble lining up my icon with my dropdown box. I'm using jQuery Mobile. I have tried using the inline-block feature but I'm having no luck with it.



Could anyone help me with a solution. Thanks






<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">
<select name="type" id="type">
<img src="">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>












share|improve this question














having a bit of trouble lining up my icon with my dropdown box. I'm using jQuery Mobile. I have tried using the inline-block feature but I'm having no luck with it.



Could anyone help me with a solution. Thanks






<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">
<select name="type" id="type">
<img src="">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>








<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">
<select name="type" id="type">
<img src="">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>





<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">
<select name="type" id="type">
<img src="">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>






html css jquery-mobile






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 16 '18 at 1:55









A.M.A.M.

528




528













  • I have, in the past, given the container an inline-block display and floated the dropdown menu right, but it didn't work. I have also given the image the inline-block display with the dropdown floated right, still didn't work.

    – A.M.
    Nov 16 '18 at 2:02













  • JQM has grids for this job. See here: stackoverflow.com/a/53271194/4845566

    – deblocker
    Nov 16 '18 at 15:32



















  • I have, in the past, given the container an inline-block display and floated the dropdown menu right, but it didn't work. I have also given the image the inline-block display with the dropdown floated right, still didn't work.

    – A.M.
    Nov 16 '18 at 2:02













  • JQM has grids for this job. See here: stackoverflow.com/a/53271194/4845566

    – deblocker
    Nov 16 '18 at 15:32

















I have, in the past, given the container an inline-block display and floated the dropdown menu right, but it didn't work. I have also given the image the inline-block display with the dropdown floated right, still didn't work.

– A.M.
Nov 16 '18 at 2:02







I have, in the past, given the container an inline-block display and floated the dropdown menu right, but it didn't work. I have also given the image the inline-block display with the dropdown floated right, still didn't work.

– A.M.
Nov 16 '18 at 2:02















JQM has grids for this job. See here: stackoverflow.com/a/53271194/4845566

– deblocker
Nov 16 '18 at 15:32





JQM has grids for this job. See here: stackoverflow.com/a/53271194/4845566

– deblocker
Nov 16 '18 at 15:32












1 Answer
1






active

oldest

votes


















1














You can use flexbox to achieve this, first wrap the select and the img in a container



<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;" class="container">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">

<select name="type" id="type" style="min-width:90%;">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>


And then give that container a display: flex;



.container{
display: flex;
justify-content: space-between;
align-items: center;
}


And for the last you need to give to the class .ui-select a 90% width



.ui-select{
width: 90%;
}


Here you have a codepen to test it, and here information about flexbox and how to use it, let me know if that help!






share|improve this answer


























  • Thanks for the reply but I am looking to line them up horizontally, and this is vertically. So essentially I am looking for the image to be on the left hand side of the dropdown.

    – A.M.
    Nov 16 '18 at 2:07






  • 1





    Ok, I got it, sorry, check this instead codepen.io/federicomartin/pen/wQegjv

    – MartinBA
    Nov 16 '18 at 2:15











  • I will edit the answer!

    – MartinBA
    Nov 16 '18 at 2:16











  • Thank you very much, worked perfectly.

    – A.M.
    Nov 16 '18 at 11:25











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330382%2fhow-do-i-get-my-icon-to-horizontally-line-up-with-my-drop-down-box%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














You can use flexbox to achieve this, first wrap the select and the img in a container



<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;" class="container">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">

<select name="type" id="type" style="min-width:90%;">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>


And then give that container a display: flex;



.container{
display: flex;
justify-content: space-between;
align-items: center;
}


And for the last you need to give to the class .ui-select a 90% width



.ui-select{
width: 90%;
}


Here you have a codepen to test it, and here information about flexbox and how to use it, let me know if that help!






share|improve this answer


























  • Thanks for the reply but I am looking to line them up horizontally, and this is vertically. So essentially I am looking for the image to be on the left hand side of the dropdown.

    – A.M.
    Nov 16 '18 at 2:07






  • 1





    Ok, I got it, sorry, check this instead codepen.io/federicomartin/pen/wQegjv

    – MartinBA
    Nov 16 '18 at 2:15











  • I will edit the answer!

    – MartinBA
    Nov 16 '18 at 2:16











  • Thank you very much, worked perfectly.

    – A.M.
    Nov 16 '18 at 11:25
















1














You can use flexbox to achieve this, first wrap the select and the img in a container



<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;" class="container">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">

<select name="type" id="type" style="min-width:90%;">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>


And then give that container a display: flex;



.container{
display: flex;
justify-content: space-between;
align-items: center;
}


And for the last you need to give to the class .ui-select a 90% width



.ui-select{
width: 90%;
}


Here you have a codepen to test it, and here information about flexbox and how to use it, let me know if that help!






share|improve this answer


























  • Thanks for the reply but I am looking to line them up horizontally, and this is vertically. So essentially I am looking for the image to be on the left hand side of the dropdown.

    – A.M.
    Nov 16 '18 at 2:07






  • 1





    Ok, I got it, sorry, check this instead codepen.io/federicomartin/pen/wQegjv

    – MartinBA
    Nov 16 '18 at 2:15











  • I will edit the answer!

    – MartinBA
    Nov 16 '18 at 2:16











  • Thank you very much, worked perfectly.

    – A.M.
    Nov 16 '18 at 11:25














1












1








1







You can use flexbox to achieve this, first wrap the select and the img in a container



<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;" class="container">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">

<select name="type" id="type" style="min-width:90%;">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>


And then give that container a display: flex;



.container{
display: flex;
justify-content: space-between;
align-items: center;
}


And for the last you need to give to the class .ui-select a 90% width



.ui-select{
width: 90%;
}


Here you have a codepen to test it, and here information about flexbox and how to use it, let me know if that help!






share|improve this answer















You can use flexbox to achieve this, first wrap the select and the img in a container



<head>
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;" class="container">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">

<select name="type" id="type" style="min-width:90%;">
<option value="">Account Type...</option>
<option value="Teacher">Teacher</option>
<option value="School">School</option>
</select><br>
</div>
</body>


And then give that container a display: flex;



.container{
display: flex;
justify-content: space-between;
align-items: center;
}


And for the last you need to give to the class .ui-select a 90% width



.ui-select{
width: 90%;
}


Here you have a codepen to test it, and here information about flexbox and how to use it, let me know if that help!







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 16 '18 at 2:20

























answered Nov 16 '18 at 2:02









MartinBAMartinBA

7161213




7161213













  • Thanks for the reply but I am looking to line them up horizontally, and this is vertically. So essentially I am looking for the image to be on the left hand side of the dropdown.

    – A.M.
    Nov 16 '18 at 2:07






  • 1





    Ok, I got it, sorry, check this instead codepen.io/federicomartin/pen/wQegjv

    – MartinBA
    Nov 16 '18 at 2:15











  • I will edit the answer!

    – MartinBA
    Nov 16 '18 at 2:16











  • Thank you very much, worked perfectly.

    – A.M.
    Nov 16 '18 at 11:25



















  • Thanks for the reply but I am looking to line them up horizontally, and this is vertically. So essentially I am looking for the image to be on the left hand side of the dropdown.

    – A.M.
    Nov 16 '18 at 2:07






  • 1





    Ok, I got it, sorry, check this instead codepen.io/federicomartin/pen/wQegjv

    – MartinBA
    Nov 16 '18 at 2:15











  • I will edit the answer!

    – MartinBA
    Nov 16 '18 at 2:16











  • Thank you very much, worked perfectly.

    – A.M.
    Nov 16 '18 at 11:25

















Thanks for the reply but I am looking to line them up horizontally, and this is vertically. So essentially I am looking for the image to be on the left hand side of the dropdown.

– A.M.
Nov 16 '18 at 2:07





Thanks for the reply but I am looking to line them up horizontally, and this is vertically. So essentially I am looking for the image to be on the left hand side of the dropdown.

– A.M.
Nov 16 '18 at 2:07




1




1





Ok, I got it, sorry, check this instead codepen.io/federicomartin/pen/wQegjv

– MartinBA
Nov 16 '18 at 2:15





Ok, I got it, sorry, check this instead codepen.io/federicomartin/pen/wQegjv

– MartinBA
Nov 16 '18 at 2:15













I will edit the answer!

– MartinBA
Nov 16 '18 at 2:16





I will edit the answer!

– MartinBA
Nov 16 '18 at 2:16













Thank you very much, worked perfectly.

– A.M.
Nov 16 '18 at 11:25





Thank you very much, worked perfectly.

– A.M.
Nov 16 '18 at 11:25




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330382%2fhow-do-i-get-my-icon-to-horizontally-line-up-with-my-drop-down-box%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Bressuire

Vorschmack

Quarantine