Section break and column break issues

1

Hello there,

at the moment, I have this:

image
image922×376 12.6 KB

I need this:

image
image915×368 12.5 KB

I can’t use Section Break, because it would make a new section, which would lead to problems with the collapsibility of the section.

In “pure” Bootstrap it would be just closing the row and opening a new one.

Any ideas?

Thank you in advance.

3 Likes
2

Firstly, in your doctype, shift the ‘float’ row before the column break so that it aligns right below the data row. Next, use jquery to select the css element i.e css selector for ‘float’ and apply a padding to it in the doctypes js file.

css-shift
css-shift1514×516 19.8 KB

For me the selector was something like this
css-shift-2
css-shift-21210×129 14.5 KB

I hope you get the idea.

3

Thank you. I think your approach is more a hack than a solution. I think there should be a fieldtype to start a new section body / section row.

My solution is different. I just built it with a seperate section break, as I would do without any hacks. Then I moved its contents via jquery to the other .section-body and deleted the empty section row.

It looks like the following:

	$form_section = $('[data-fieldname="one_source_fieldname"]').closest('.form-section');
	$form_section.find('.section-body').appendTo($('[data-fieldname="one_target_fieldname"]').closest('.section-body'));
	$form_section.remove();

I think its okay, but still a hack.

2 Likes
4

Hi, I know it’s an old issue, but I’d like to share my modification to @ci2016 answer, that didn’t work for me.

I created a function as follows:

function addRowBreak(source,target){
    var form_section = $('[data-fieldname="' + source + '"]').closest('.form-section');
    form_section.find('.section-body').appendTo($('[data-fieldname="' + target + '"]').closest('.section-body'));
    form_section.remove();
}

Then, in the refresh event of the form I wrote:

frappe.ui.form.on("doctype_name", {
    refresh: function(frm){
        addRowBreak('source_field_name1','target_field_name1');
        addRowBreak('source_field_name2','target_field_name2');
        ...
	}
});

With this logic you can easily add as many “row breaks” as you like.
It’s obviously still a hack and I would love to see a native implementation of row breaks as fields in doctypes.

On that note, is there a request done for that functionality? I tried to find it but couldn’t.

Hope this helps :blush:

1 Like
5

Nice Hack too!

6

EDIT: I had to add a condition to the function that tests if the source is already in the same form section as the target. That’s because the refresh event is triggered when saving the document but without reloading the page, so it broke the format.

function addRowBreak(source,target){
	var form_section1 = $('[data-fieldname="' + source + '"]').closest('.form-section');
	var form_section2 = $('[data-fieldname="' + target + '"]').closest('.form-section');
	if (form_section1.get(0) != form_section2.get(0)){
		form_section1.find('.section-body').appendTo($('[data-fieldname="' + target + '"]').closest('.section-body'));
		form_section1.remove();
	}
}
1 Like