Loading...
 
Skip to main content

Features / Usability

Forum List Topic List

Forums » Features / Usability » Plugin List - how can column width be set?
 
Thread actions
Print this page
  • Print all pages

    • Plugin List - how can column width be set?

    Posted by Mike Finko posts: 228 Ukraine

    Hi,

    I'm trying to duplicate the following CSS for setting a fixed column width in Plugin List, which is available for Plugin Tracker List:

    Copy to clipboard
    .field2 { width: 500px;}

    which is here https://doc.tiki.org/PluginTrackerList#How_to_make_columns_larger_via_CSS

    It's for a Date field which gets 'stacked' into three lines (less user friendly) when nearby Text Areas get bigger. I tried using the permanent name (instead of field number) in the Custom CSS area of Look & Feel but most likely I did not correctly configure it to account for this (tried parenthesis, brackets, etc.).

    Also reviewed the 'Display Control Block' but no information about adding CSS to a column to display.

    Thanks,
    Mike

    Reads: 1149
    Posted by Mike Finko posts: 228 Ukraine

    I've discovered that TableSorter gets in the way of the code above and does not allow setting any column widths - this is for both PluginTrackerList and PluginList.

    So without TableSorter, setting individual column width does work for PluginTrackerList, but could not get it work work with PluginList. I tested by replacing the field number with the permanent name, did not seem to work.

    Has anyone set column widths in PluginList? I went through all the Doc pages again and could not find any references. My guess is that html/css knowledge is necessary...

    br,
    Mike

    Posted by Mike Finko posts: 228 Ukraine

    Hi,
    Any chance anyone could shed some light on setting fixed column width (px or %) for Plugin List?

    I put in a considerable amount of effort into using Plugin List for a project but at the end of the day, ended up using Plugin Tracker List as column width was a necessity.
    However, going forward i am hitting the limitations of Plugin Tracker List, so have no choice.

    Any help would be hugely appreciated,
    Thanks,
    Mike

    Posted by Bernard Sfez / Tiki Specialist posts: 8654 France
    Mike Finko wrote:

    Hi,
    Any chance anyone could shed some light on setting fixed column width (px or %) for Plugin List?

    I put in a considerable amount of effort into using Plugin List for a project but at the end of the day, ended up using Plugin Tracker List as column width was a necessity.
    However, going forward i am hitting the limitations of Plugin Tracker List, so have no choice.

    Any help would be hugely appreciated,
    Thanks,
    Mike


    I'll be glad to help, but something is missing... The plugin List doesn't manage the width of a col.
    It is your output block and eventually a template.
    Can you show us (me) more ?

    Posted by Mike Finko posts: 228 Ukraine

    Hi Bernard,
    It's a pretty standard list displaying all open/pending Tracker items (currently in Plugin Tracker List), so standard columns like 'First Name', 'Last Name', 'Age', etc.
    So just like this one https://doc.tiki.org/PluginList-output-control-block#Format_parameters

    I did not find any explanations in the Plugin List Docs about using a template to display a list, just to display a List in Table format:

    {CODE(colors="tiki" theme="default")}{OUTPUT(template="table")}{CODE}

    Maybe I just need to add a "width = "50%"" parameter in the column? Like:

    Copy to clipboard
    {column sort="title" label="Title" translatelabel="y" field="title_link" mode="raw"}


    br,
    Mike

    Posted by Jonny Bradley posts: 126892 United Kingdom

    Hi @Mike -UA

    I think the best you can do is to use the class parameter on the {columns} and set up some classes in the custom css to suit, e.g.

    Copy to clipboard
    {column sort="title" label="Title" translatelabel="y" field="title_link" mode="raw" class="50percent"}

    and in custom css (in the Look and Feel Control Panel)

    Copy to clipboard
    .50percent {
  width: 50%;
}
    Posted by Mike Finko posts: 228 Ukraine

    That looks simple enough! Definitely will give it a go -
    Thanks, Jonny!
    p.s. and HUGE thanks for the 2000+ NLAW's which will sure make them think twice 😀

    Posted by Mike Finko posts: 228 Ukraine

    ok, tested, didn't want to work. tried a bunch of variations, checked my Settings (though maybe 'class' needed to be activated, but did not find), Cleared all my 'Custom CSS', though something could be conflicting, not that. Tried on a clean, super minimal Plugin List, nothing.

    Then I remembered in Python, a variable cannot start with a number. Hmm, is this a variable in CSS? Worth a try, so I changed to:

    Copy to clipboard
    .fifty_percent {
  width: 50%;
}


    And it worked!
    br,
    Mike

    Posted by Jonny Bradley posts: 126892 United Kingdom

    Hi Mike

    Nice catch, sorry about that, you are correct - as confirmed here

    Hope everything works out ok over there, good luck!

    Posted by Bernard Sfez / Tiki Specialist posts: 8654 France

    {CODE()}
    {OUTPUT(template="table")}
    {CODE}

    Was missing to answer, but Jonny gave a simple good option (I would have use bootstrap col- classes).

    Note that (I experienced it a lot), if the problem was avoiding word wrap you can also use the bootstrap class: "text-nowrap"

    https://getbootstrap.com/docs/4.3/utilities/text/