current position:Home>Fastadmin modifies the list width (limit the list width, support CSS writing), and the width limit. It is too large or useless.

Fastadmin modifies the list width (limit the list width, support CSS writing), and the width limit. It is too large or useless.

2022-04-29 13:50:28A limbed ape

1、 Limit the minimum width

Because what is generated is td, It's an inline style ( Not block Elements ), Even if you write width, The content exceeds the width , Same beyond , Depending on the situation, use

 {
field: 'files', 
title: __('Files'), 
operate: false, 
width: '120',// Limit the minimum width , Not a fixed width 
events: Table.api.events.image, 
formatter: Table.api.formatter.images
},

2、 Limit character length

Because what is generated is td, It's an inline style ( Not block Elements ), Even if you write width, The content exceeds the width , Same beyond , Depending on the situation, use

 {
field: 'files', 
title: __('Files'), 
operate: false, 
formatter: function(value){return value.toString().substr(0, 10)} // Display only 10 character 
events: Table.api.events.image, 
formatter: Table.api.formatter.images
},

3、CSS Style control ( Color width, size, omission, etc , Good experience )

{field: 'outlink', title: __('Outlink'),  operate: 'LIKE',
 cellStyle : function(value, row, index, field){
        return {
            css: {
                "white-space": "nowrap",// Single line ellipsis required 
                "text-overflow": "ellipsis",// Single line ellipsis required 
                "overflow": "hidden",// Single line ellipsis required 
                "color": "#3172a6",
                "width":"200px"
            }
        };
    }

},

The effect is as follows :

fastadmin List mouse hover prompt information _ The blog of the four legged ape -CSDN Blog {field: 'profession_needs', title: __('profession'), operate: 'LIKE',width: '100',formatter : function(value, row, index, field){ if(row.profession_needs){ return "<span style='display: block;overflow: hidden;text-overflow: ell...https://blog.csdn.net/weixin_39921970/article/details/124430132

copyright notice
author[A limbed ape],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291203479435.html

Random recommended