I have a div that creates a border with css and what I want to do is show a form when a user clicks the button.
HTML form:
<div class="dropshadow-add">
<h3>Add</h3>
<button class="addwebcam">Add</button>
<button class="addaxiscam">Add Another</button>
<div id="cameraformwebcam" title="Add a webcam">
<form id='AddCameraFormWebcam' name='' method='post' action=''>
<label for="CameraName">Camera name: </label>
<input id="CameraName" name="camera_name" size="24" maxlength="36" value="Enter label for camera" />
<label for='CameraQuality'>Camera quality: </label>
<select id='CameraQuality' name='camera_quality'>
<option value='HIGH' selected='selected'>High</option>
<option value='MEDIUM'>Medium</option>
<option value='MOBILE'>Mobile</option>
</select>
...
<button type='submit' class='submit_camera' name='addcamera' value='Add'>Add</button>
<button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
</form>
</div>
<div id="cameraformaxis" title="Add an Axis camera">
<form id='AddCameraFormAxis' name='' method='post' action=''>
<label for="CameraName">Camera name: </label>
<input id="CameraName" name="camera_name" size="24" maxlength="36" value="Enter label for camera" />
<label for='CameraQuality'>Camera quality: </label>
<select id='CameraQuality' name='camera_quality'>
<option value='HIGH' selected='selected'>High</option>
<option value='MEDIUM'>Medium</option>
<option value='MOBILE'>Mobile</option>
</select>
...
<button type='submit' class='submit_camera' name='addcamera' value='Add'>Add</button>
<button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
</form>
</div>
</div>
jQuery code to show/hide the form on click:
jQuery('#cameraformwebcam').hide();
jQuery('#cameraformaxis').hide();
jQuery('.addwebcam').click(function(e) {
jQuery('#cameraformwebcam').show();
jQuery('#cameraformaxis').hide();
});
jQuery('.addaxiscam').click(function(e) {
jQuery('#cameraformaxis').show();
jQuery('#cameraformwebcam').hide();
});
Finally, my problem is the CSS code:
#AddCameraFormWebcam label,#AddCameraFormAxis label,
#AddCameraFormWebcam input,#AddCameraFormAxis input,
#AddCameraFormWebcam select,#AddCameraFormAxis select,
#AddCameraFormWebcam textarea,#AddCameraFormAxis textarea{
display: block;
float: left;
width: 200px;
margin-bottom: 1em;
margin-top: 0.5em;
}
#AddCameraFormWebcam select,#AddCameraFormAxis select{
width: 100px;
}
#AddCameraFormWebcam label,#AddCameraFormAxis label {
clear: both;
color: black;
width: 120px;
padding-right: 8px;
text-align: left;
white-space: nowrap;
}
#AddCameraFormWebcam label.error,#AddCameraFormAxis label.error {
float: none;
color: red;
}
#AddCameraFormWebcam button[type="button"],#AddCameraFormAxis button[type="button"]{
float: right;
width: 100px;
margin-left: 10px;
margin-top: 5px;
}
#AddCameraFormWebcam button[type="submit"],#AddCameraFormAxis button[type="submit"] {
float: right;
width: 100px;
margin-top: 5px;
}
#AddCameraFormWebcam button[name="cancel_changes"],#AddCameraFormAxis button[name="cancel_changes"] {
clear: both;
}
#AddCameraFormWebcam button[name="camera_status"] + label,#AddCameraFormAxis button[name="camera_status"] + label {
clear: none;
}
.dropshadow-add {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
width: 400px;
padding:15px 15px 15px 15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
background-color:#ffffff;
border: 1px solid #CCCCCC;
padding: 1px 15px 15px 15px;
}
See this fiddle to play around.
Click a button and you will see that form goes outside the div. How can I keep it in the div? If I change the buttons and the labels to float: inherit it does work but then the formatting is messed up. I want to put the form in the div and the buttons should be on the right (add button, then cancel button next to each other). Thanks in advance.
Replace your CSS with this
Fiddle: http://jsfiddle.net/K6FwH/2/
1.
Remove float: left;
2.
Remove float: right; and margin-left: 10px;
Fiddle: http://jsfiddle.net/K6FwH/2/
If you want to keep the buttons right aligned
Fiddle: http://jsfiddle.net/enve/K6FwH/3/