1

I want the labels and description of the inputs to be to the left of a horizontally scrolling array of forms. Ideally all with their own submit buttons and a submit all button. I've experimented with a much smaller version of what I want. Here's what I've got right now in a fiddle:

https://jsfiddle.net/RedGoblin17/2r3hufpa/58/ .

I think I'm pretty close on the view model:

function FormViewModel(){
    var self = this;

  self.firstName = ko.observable("");
  self.lastName = ko.observable("");
  self.number = ko.observable();
  self.data = ko.computed(
    function(){
        return self.firstName() + " " + self.lastName() + " " + (typeof self.number() == "undefined" ? "" : self.number());
      }, this
    );
}

function AppViewModel(){
    var self = this;

  self.forms = new ko.observableArray([new FormViewModel()]);

  self.addForm = function(){
    self.forms.push(new FormViewModel());
  }
}

ko.applyBindings(new AppViewModel());

But I don't know how to put the labels in a separate div than the inputs and still line them up properly:

<div class="scroll-grid-container">
  <div class="frozelabels">
     <label for="fn">First Name</label> 
     <label for="ln">Last Name</label>
     <label for="nn">Number</label>
     <label for="fullN">Full Name:</label>
  </div>
  <div class="scrolling-wrapper" data-bind="foreach: forms">
  <div class="card" >
    <form class="form-group">
     <input id="fn" type="text" data-bind="textInput: firstName"/><br>
     <input id="ln" type="text" data-bind="textInput: lastName"/><br>
     <input id="nn" type="number" min="1" data-bind="value: number"/>
    </form>

    <p>

      <br /><strong id="fullN" data-bind="text: data"></strong>
    </p>
  </div>
</div>
</div> 

<button data-bind="click: addForm">Add New Form</button>

I can't get the labels to line up correctly with the inputs. I've got it scrolling and adding forms but it's pretty hackly put together, and doesn't look very good. I'm gonna keep working on it and I'll update this post if I figure it out. In the mean time here are some questions that would help me out:

Is there a way to align the labels with the inputs of the form? Is there a way to present a scrollable list of forms next to it? If I'm not too far off base can you point me to examples?

Thank you very much!

0 Answers0