Studio> filler field is adding a newline

💬 General Discussion
1

I am trying to right align fields in studio, by using a field ‘filler’ in the first column. This seems to be ignored though and the field i want to align is moved to a new line and placed in the first column.

I can see that the ‘filler’ field has a div tag with ‘class= col-xs-12 col-sm-6 detail-view-row-item’ - however immediately after that there is a div with a ‘clear’ class.

This second ‘clearing’ div is causing the issue - by deleting it in chrome dev tools the field correctly moves to the right.

Where can i find the code to prevent this clearing div from being added to the layouts?

many thanks

2

This should really just work, maybe you’re better off trying to find the bug than tweaking code.

What version of SuiteCRM is this? And have you tried it on other browsers, or just one?

I have an installation of 7.8.x where I have a Contact’s photo on the left, and because it takes up 4 rows, I keep three rows with nothing on the left, it looks like this in Studio:


PHOTO field1
filler       field2
filler       field3
filler       field4

and looks like this live:


PHOTO field1
PHOTO field2
PHOTO field3
PHOTO field4

I only tweaked the photo’s “position:absolute” CSS property.

Anyway, it should work for you too. Can you post screenshots (or schemes like mine) to show what you get in Studio, and what you get on the displayed screens?

3

I found a solution to this problem.

@pgr, I am also having this issue as of SuiteCRM 7.10.1

All you have to do to duplicate the issue is go into studio and add a filler on the left, field on the right in a single row and then publish that. The field won’t be on the right, instead it will be on the left with weird spacing because of a div with the ‘clear’ class.

You can fix this issue by going to themes/SuiteP/include/DetailView/tab_panel_content.tpl

Look for this (around lines 204-206 as of 7.10.1):

{{if $fieldCount==0}}
        <div class="clear"></div>
{{/if}}

Commenting out this code seems to fix the issue. I tried to put this in the custom directory, but it didn’t work for me, not sure if developer mode is properly clearing the cache or if this file isn’t customizable.

Be wary though, because I think the intention was to make it so that if there is fillers on both the left and right side that it would add a clear class to both sides (my guess at least).

4

So if I understand correctly (maybe some screenshots would help) this isn’t working well when you start your screen with a filler, is that right?

So fillers on the left only work if they are not in the first position?

Maybe you can open a bug report with your findings and your solution, it’s easier to post screenshots there :slight_smile:

https://github.com/salesagility/SuiteCRM/issues

5

Issue submitted here if you want to see the screenshots:

https://github.com/salesagility/SuiteCRM/issues/5477

1 Like