Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
  <head>
    <!-- Twitter bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet">
​
    <!-- apiCheck is used by formly to validate its api -->
    <script src="//rawgit.com/kentcdodds/api-check/master/dist/api-check.js"></script>
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    
    <!-- This is the current state of master for formly core. -->
    <script src="//rawgit.com/formly-js/angular-formly/latest/dist/formly.js"></script>
    <!-- This is the current state of master for the bootstrap templates -->
    <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script>
​
    <!-- additional dependencies go here -->
    
    <title>Angular Formly Question</title>
  </head>
​
  <body ng-app="formlyQuestion" ng-controller="MainCtrl as vm">
    <p>Trying to create the following markup where the label and input field are on the same line for desktop but stacked for mobile. To do this I want to use Twitter Bootstrap classes wrapped around each individually. </p>
    <p>The model below has two lines <strong>in bold</strong> to show what I would like to achieve</p>
​
      <form action="" class="form">
        
        <div class="form-group">
          <div class="col-xs-12 col-sm-6">
            <label for="">Name</label>
          </div>
          <div class="col-xs-12 col-sm-6">
            <input type="text" placeholder="Name">
          </div>
        </div>
        <div class="form-group col-xs-12">
          <button class="btn" type="submit">Submt</button>
        </div>
        
      </form>
    
    <p>Here's my model:</p>
    
    <pre>
      
      module.exports = [
  {
    "key": "name",
    "type": "input",
    "defaultValue": "My  App",
    <b>"className" : "col-xs-12 col-sm-6",</b>
    "templateOptions": {
      "label": "Name",
      <b>"className" : "col-xs-12 col-sm-6",</b>
      "placeholder": "Enter your Application's Name...",
      "required": true
    }
  },
  {
    "key": "flavor",
    "type": "select",
    "defaultValue": "typical",
    "templateOptions": {
      "label": "Flavor",
      "required": true,
      "options": [
        {"name": "Compact", "value": "compact"},
        {"name": "Small", "value": "small"}
      ]
    }
  },
  {
    "key": "environment_name",
    "type": "select",
    "defaultValue": "dev",
    "templateOptions": {
      "label": "Environment name",
      "required": true,
      "options": [
        {"name": "Development", "value": "dev"},
        {"name": "Staging", "value": "staging"},
        {"name": "Production", "value": "production"}
      ]
    }
  }
]
​
    </pre>
​
  </body>
​
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alexhobdaypro
0viewers