angular-autoFields-bootstrap icon indicating copy to clipboard operation
angular-autoFields-bootstrap copied to clipboard

how to multiple columns

Open GoNode5 opened this issue 9 years ago • 2 comments

I wonder this is possible with autoFields. I hope I make myself clear. THe blue line is the path for input when using TAB next field

gridedit2

GoNode5 avatar May 07 '15 12:05 GoNode5

This is an interesting problem. You might be able to do it with a Mutator as this is essentially another layout. Take a look at how bootstrap's Horizontal Layout was implemented. That should give you some ideas. If you're still at a loss, let me know what you've tried and I'll try to lend a hand.

JustMaier avatar May 07 '15 16:05 JustMaier

I tried something with no succes. When trying to force the next column the endresult gets a extra closing div making it useless:

    $autofieldsProvider.settings.columns = {
        formColumns: 2,
        currentColumn: 1,           
    };

    var rowCount=0
    function getRowCount() {
      return rowCount++;
    }
    function resetRowCount() {
      rowCount=0
    }



    $autofieldsProvider.registerMutator('columnsForm', function(directive, field, fieldElements){
        var currentRow=getRowCount();
        var htmlColumnGrid='<div class="col-sm-XX">'

        htmlColumnGrid=htmlColumnGrid.replace('XX',12/directive.options.columns.formColumns)


        if (currentRow===1) {
            directive.container.prepend(htmlColumnGrid)             
        };  
        //force new column for demo
        if (currentRow===4) {                       
          directive.container.append('</div>'+htmlColumnGrid)             
         resetRowCount();
        }
        return fieldElements;
    }, {require:'helpBlock'});

GoNode5 avatar May 17 '15 09:05 GoNode5