Increase width of ticket checklist label

Moderator: crythias

Locked
sgshp
Znuny newbie
Posts: 8
Joined: 24 Sep 2019, 17:10
Znuny Version: 6.0.5
Real Name: Heiko
Company: SGS Griep Meerwinck GmbH

Increase width of ticket checklist label

Post by sgshp »

Hello,

we recently started using a helpful plugin for OTRS called the TicketChecklist (see https://opar.perl-services.de/dist/Tick ... list-0.6.2).

It is working as intended but if possible we would like to change the ratio between label and value. If you look at this screenshot:

Image

You can see that the labels have very little space and go over multiple rows while our dropdown values need a lot less space than they currently have.

Does anyone know this plugin and can help us to increase the width of the labels so that it gets a bit more readable?

Any help would be greatly appreciated!
zzz
Znuny superhero
Posts: 914
Joined: 15 Dec 2016, 15:13
Znuny Version: All
Real Name: Emin
Company: Efflux GmbH
Contact:

Re: Increase width of ticket checklist label

Post by zzz »

Hey,

I'd like to refer to this German Topic from a couple of days ago.

viewtopic.php?f=35&t=41665&p=168403#p168403

— Emin
Professional Znuny and OTRS services: efflux.de | efflux.de/en/

Free and premium add-ons: German | English
sgshp
Znuny newbie
Posts: 8
Joined: 24 Sep 2019, 17:10
Znuny Version: 6.0.5
Real Name: Heiko
Company: SGS Griep Meerwinck GmbH

Re: Increase width of ticket checklist label

Post by sgshp »

Hello Emin,

sorry for my late reply. I'm afraid I did not explain correctly what we actually wanted to achieve.

We want to swap the sides of label and content. So we would like to have the dropdown part on the left side while the title is on the right side. But we only want to do this for the checklist widget, not in general. If possible we would like the other widgets to remain unchanged.

There is this part in the TicketChecklistWidget.tt that we tried to modify.

Code: Select all

[% RenderBlockStart("Item") %]
[% RenderBlockStart("TitleLink") %]
                <label>
                    <a href="javascript:void(0)" onclick="PS.TicketChecklistWidget.GotoArticle('[% Data.ArticleID | uri %]')">[% Data.Title | html %]</a>:
                </label>
[% RenderBlockEnd("TitleLink") %]
[% RenderBlockStart("TitlePlain") %]
                 <label>[% Data.Title | html %]:</label>
[% RenderBlockEnd("TitlePlain") %]
                          <p class="Value" title="[% Data.Title | html %]">
                            <span style="background-color: [% Data.Color | html %]" id="ItemFlag_[% Data.Position | html %]">
                              &nbsp;&nbsp;&nbsp;&nbsp;
                            </span>
                            <input type="hidden" id="ItemID_[% Data.Position | html %]" value="[% Data.ID | html %]" />&nbsp;
                            [% Data.StatusSelect %]
                          </p>
                        <div class="Clear"></div>
[% RenderBlockEnd("Item") %]
We tried to swap the <label> part with the <p class="Value" ...> part but unfortunately that did not work for us.

Maybe you have another idea what we could try or if it is even possible to change?
zzz wrote: 06 May 2020, 14:33 Hey,

I'd like to refer to this German Topic from a couple of days ago.

viewtopic.php?f=35&t=41665&p=168403#p168403

— Emin
sgshp
Znuny newbie
Posts: 8
Joined: 24 Sep 2019, 17:10
Znuny Version: 6.0.5
Real Name: Heiko
Company: SGS Griep Meerwinck GmbH

Re: Increase width of ticket checklist label

Post by sgshp »

Hello Emin,

sorry for my late reply. I'm afraid I did not explain correctly what we actually wanted to achieve.

We want to swap the sides of label and content. So we would like to have the dropdown part on the left side while the title is on the right side. But we only want to do this for the checklist widget, not in general. If possible we would like the other widgets to remain unchanged.

There is this part in the TicketChecklistWidget.tt that we tried to modify.

Code: Select all

[% RenderBlockStart("Item") %]
[% RenderBlockStart("TitleLink") %]
                <label>
                    <a href="javascript:void(0)" onclick="PS.TicketChecklistWidget.GotoArticle('[% Data.ArticleID | uri %]')">[% Data.Title | html %]</a>:
                </label>
[% RenderBlockEnd("TitleLink") %]
[% RenderBlockStart("TitlePlain") %]
                 <label>[% Data.Title | html %]:</label>
[% RenderBlockEnd("TitlePlain") %]
                          <p class="Value" title="[% Data.Title | html %]">
                            <span style="background-color: [% Data.Color | html %]" id="ItemFlag_[% Data.Position | html %]">
                              &nbsp;&nbsp;&nbsp;&nbsp;
                            </span>
                            <input type="hidden" id="ItemID_[% Data.Position | html %]" value="[% Data.ID | html %]" />&nbsp;
                            [% Data.StatusSelect %]
                          </p>
                        <div class="Clear"></div>
[% RenderBlockEnd("Item") %]
We tried to swap the <label> part with the <p class="Value" ...> part but unfortunately that did not work for us.

Maybe you have another idea what we could try or if it is even possible to change?
zzz wrote: 06 May 2020, 14:33 Hey,

I'd like to refer to this German Topic from a couple of days ago.

viewtopic.php?f=35&t=41665&p=168403#p168403

— Emin
zzz
Znuny superhero
Posts: 914
Joined: 15 Dec 2016, 15:13
Znuny Version: All
Real Name: Emin
Company: Efflux GmbH
Contact:

Re: Increase width of ticket checklist label

Post by zzz »

By pointing to the thread, I wanted to imply that you can do that with CSS (the soon releasing add-on would also ensure that changes will stay intact after an update).

The screenshot shows that you already made some experience by increasing the width of the sidebar.
If you only want more space for the label, you can add this CSS:

Code: Select all

/* For the checkbox label */
fieldset.TableLike.FixedLabelSmall.TicketChecklist label {
	width: 230px;
	padding-right: 10px;
}

/* For the checkbox input field */
fieldset.TableLike.FixedLabelSmall.TicketChecklist input {
	max-width: 100px;
}
Widget.PNG
If you want to swap the position of the label and the input field, you additionally have to change the floats.
No .tt changes are needed

Best regards
Emin
You do not have the required permissions to view the files attached to this post.
Professional Znuny and OTRS services: efflux.de | efflux.de/en/

Free and premium add-ons: German | English
Locked