How do I get my icon to horizontally line up with my drop down box?
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>
html css jquery-mobile
add a comment |
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>
html css jquery-mobile
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
add a comment |
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>
html css jquery-mobile
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
html css jquery-mobile
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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!
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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!
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
add a comment |
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!
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
add a comment |
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!
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!
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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