How do I put these on the same line?
Question
It's a stupid question, I'll give you that. For the life of me I can't figure out how to align the text and my colorpicker. How do I get everything to be on one line, rather than the two lines it is now. See my fiddle . I've tried getting rid of display:block and clear:both but that didn't seem to work. Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link href="http://evoluteur.github.com/colorpicker/css/evol.colorpicker.css" rel="stylesheet" />
<script src="http://evoluteur.github.com/colorpicker/js/evol.colorpicker.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#color_picker").colorpicker();
});
</script>
</head>
<body>
<span>Select a color: <input id="color_picker" value="#92cddc"/></span>
</body>
</html>
Please see my fiddle for the css and js (I don't want to clutter everything up by posting everything here)
3 answers
solution1
1 ACCPTED 2013-02-17 05:20:06
Try using this way: http://jsfiddle.net/C7hAY/6/
html:
<span style='display:block; width:320px;'>
Select a color: <input id="color_picker" value="#92cddc"/>
</span>
jquery:
$(document).ready(function(){
$("#color_picker").colorpicker();
$("#color_picker").parent().css('float','right');
});
Although i suggest you to do it with css .
What happened there:
When you bind the colorpicker to the input element jQuery wraps it with div so if you don't style that div it will always be in the second line and i styled it dynamically with use of jQuery , using .parent() .
solution2
0 2013-02-17 05:25:40
Here is the simplest solution:
$("span > div").css("display","inline-block");
solution3
-1 2013-02-17 05:26:47
The issue:
When you create the color picker, it wraps your <input> element inside a div . The generated code will look like this:
<span>Select a color:
<div style="width:181px;">
<input id="color_picker" value="#92cddc" class="colorPicker evo-cp0">
<div class="evo-colorind" style="background-color:#92cddc"></div>
</div>
</span>
That's why there is a newline in there.
Solution: Live Demo
Just set the style of the div to display:inline-block; .
Code:
$(document).ready(function(){
$("#color_picker").colorpicker();
$("#color_picker").parent().css("display", "inline-block");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.