Thread Details
  • State Not Answered
  • Replies 3 replies
  • Subscribers 354 subscribers
  • Views 659 views
  • Users 0 members are here
Forum Actions
Related

How to separate the label and the input element.

Benjie Monterde

Hello,

Anyone know how we can change 

This 

into something like this

P.S This is on Details or Record view.

Parents
  • 0

    I didn't like that styling either, but got used to it over time, I think you should consider whether the trouble of customizing it is worth it.

    If you do decide to go ahead with it, you will find that the dotted line and plus sign are just a class that's added "label-pill".

    This needs more work and thorough testing, but it's a starting point if you are convinced you want to do this, you can remove the label-pill style from everything by overriding the setCellStyle function in record-decor/record-decor.js in your custom directory.

        /**
     * Sets or removes class on the record cell
     * @param style
     */
    setCellStyle: function(style) {
        var $cell = this.getRecordCell();
        if ($cell.length === 0) {
            return;
        }
    // take away the pill style by always removing the label-pill class.
       // if (style === 'pill') {
       //     $cell.addClass('label-pill');
       // } else {
            $cell.removeClass('label-pill');
       // }
    },

    FrancescaS

Reply
  • 0

    I didn't like that styling either, but got used to it over time, I think you should consider whether the trouble of customizing it is worth it.

    If you do decide to go ahead with it, you will find that the dotted line and plus sign are just a class that's added "label-pill".

    This needs more work and thorough testing, but it's a starting point if you are convinced you want to do this, you can remove the label-pill style from everything by overriding the setCellStyle function in record-decor/record-decor.js in your custom directory.

        /**
     * Sets or removes class on the record cell
     * @param style
     */
    setCellStyle: function(style) {
        var $cell = this.getRecordCell();
        if ($cell.length === 0) {
            return;
        }
    // take away the pill style by always removing the label-pill class.
       // if (style === 'pill') {
       //     $cell.addClass('label-pill');
       // } else {
            $cell.removeClass('label-pill');
       // }
    },

    FrancescaS

Children