How do I put them on one line?
This is a silly question, I'll give it to you. For the life of me, I can't figure out how to align the text and my colored pointer. How can I get everything to be on the same line and not the two lines that are now. See my violin . I tried to get rid of the display: block and clear: both, but that doesn'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 css and js (I don't want to clutter everything by posting everything here)
source to share
Try 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 do it with css
.
What happened there:
When you bind colorpicker to an input element jQuery wraps it with div
, so if you don't style div it will always be in the second line
and i styled it dynamically with use of jQuery
using .parent()
.
source to share
Problem:
When you create a color picker, it wraps your item <input>
inside 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>
This is why there is a new line there.
Solution: Live Demo
Just set the style div
to display:inline-block;
.
code:
$(document).ready(function(){
$("#color_picker").colorpicker();
$("#color_picker").parent().css("display", "inline-block");
});
source to share