Forums

I know this sounds silly, but I am constantly accidentally hitting the DELETE button (red "X") on fields and actions when I mean to click on the EDIT button. It would be great if the spacing could be increased between the two. Or, better yet, add a verification pop-up before deleting. Then again, I might be the only idiot doing this!! 🤣

Hi Rick,

Here's some experimental CSS that you can try at the end of administrator/components/com_chronoforms/css/formwizard.css if you like:

/* Bob's fixes */
img.delete_element {
	padding-left:5px;
	float:right;
}
.droppable .element_tools_visible {
	width: 60px;
	top: 6px;
	margin: 2px;
}
label.action_label {
	margin:2px;
}
.form_event {
	margin: 6px;
	padding:3px;
}
.form_action {
	padding-bottom:2px;
}
.wizard_element {
	margin: 2px;
}
.elements_list .dragable {
	padding: 3px;
}
.actions_accordion_pane {
	max-height: none;
}

This moves the x to the right, generally tightens up the spacing and removes the double slider that sometimes comes up at the left.

Bob

Nice!! That helps a bunch. Thanks! Any chance Max can get your changes integrated?

Hi,

I will try to add this in the new release, or may add a JS confirmation when trying to delete any action.

Regards,
Max

Hi Rick & Max,

I extended my 'tight' additions to the Wizard CSS a bit more today, fixes some odd bugs and extends the tight code into the modal window.

/* Bob's fixes */
img.delete_element {
	padding-left:5px;
	float:right;
}
.droppable .element_tools_visible {
	width: 60px;
	top: 6px;
	margin: 2px;
}
label.action_label {
	margin:2px;
}
.form_event {
	margin: 6px;
	padding:3px;
}
.form_action {
	padding-bottom:2px;
}
.wizard_element {
	margin: 2px;
}
.elements_list .dragable {
	padding: 3px;
}
.actions_accordion_pane {
	max-height: none;
}
div#sbox-content .small-message {
    color: #333;
    font-style: normal;
}
div#sbox-content label {
    font-weight: bold;
    padding-right: 6px;
    text-align: right;
}
div#sbox-content .ccms_form_element {
	padding-bottom: 0px;
	margin-bottom: 0px;
}
#sbox-btn-apply {
	text-align: right;
}
div#sbox-content input[type="radio"], div#sbox-content input[type="checkbox"] {
	width: 20px !important;
}
div#sbox-content .tabs a {
    padding: 2px 1.5em;
    text-decoration: none;
}

Unfortunately the label for a 'big input' is now misplaced :-(

Bob

Hi Bob,

Thank you, I will try to get it fully working and add to the new release!🙂

Best regards,
Max