I have am using a jquery plugin called impromptu to display a dialog box. As part of the dialog there is a div holding the buttons. The div is defined as follows...
<div class="jqibuttons ">
<button class=" jqibutton jqidefaultbutton " value="1" name="jqi_state0_buttonNext">Next</button>
</div>
The style for the div is defined as follows...
div.jqi .jqibuttons {
background-color: #f4f4f4;
border-radius: 0 0 6px 6px;
border-top: 1px solid #e4e4e4;
margin: 0 -7px -7px;
text-align: right;
}
It looks like the screen shot below. I would like to display an error message where I have said "Show error message here" (algined left).
I have had a go at putting an error message inside the div but i am having problems. Here is the function I am using to try and prepend the error...
function addErrorToDialog(error) {
var message = '<span id="messageBox" style="display: block; width:100%"><span class="dialog-error red-text">' + error + '</span></span>';
$("#messageBox").empty();
$('.jqibuttons').prepend(message);
}
I've had a go at a few different things (as you can see by the unusual span with a display:block) but I canot get the message to show as I would like. Could someone please help me with how I might modify to get something closer to what I'm after?
The screen shot below shows what my code currently produces. Not what I'm after.
thanks
--EDIT---
Tried to use append rather than prepend but the error appears on the right because as you can see by the css in my original post text-align is set to right. How can i update the css to get the button to stay where it is but get the error message to align left in a span?
The message is displaying above the button because you are using prepend in
$('.jqibuttons').prepend(message);
Instead, use
.append(message)
with the class for the message "Show error message here". As in, say the code is