JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://dev.igniteui.local/17-1/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://dev.igniteui.local/17-1/IgniteUI/js/infragistics.core.js"></script>
<script src="http://dev.igniteui.local/17-1/IgniteUI/js/infragistics.lob.js"></script>
<link href="http://dev.igniteui.local/17-1/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://dev.igniteui.local/17-1/IgniteUI/css/structure/infragistics.css" rel="stylesheet"></link>

<div id="container">
  <div id="formContainer">
    <input id="editor" type="text" name="client" />
  </div>
</div>

CSS

#container
        {
            width: 100%;
            min-width: 900px;
            max-width: 900px;
            display: inline-block;
        }

        #formContainer
        {
            top: 0px;
            left: 0px;
            height: 500px;
            width: 750px;
            padding-top: 15px;
            float: left;
            margin-left: 20px;
        }

        .element
        {
            width: 200px;
            float: left;
        }

        input, label
        {
            display: inline-block;
        }

        #total
        {
            font-weight: bold;
            font-size: large;
            text-align: right;
        }

        #successMessageDiv
        {
            position: relative;
            bottom: 0;
            text-align: center;
            font-size: larger;
            color: green;
        }

        #client
        {
            margin-top: 85px;
        }

        #delivery
        {
            margin-top: 145px;
        }

        #submitPurchase{
            float:right;
            margin-right:75px;
            margin-top:10px;
        }

        #mainInfo
        {
            margin-bottom: 80px;
            margin-top: 25px;
        }

        @media only screen and (max-width: 780px)
        {
            #container
            {
                height: 600px;
            }

            .element
            {
                float: none;
                margin: 10px 0 10px 0 !important;
            }

            #client
            {
                margin-top: 0;
            }

            #delivery
            {
                margin-top: 0;
            }

            #priceContainer
            {
                margin-top: 0;
                margin-left: 0;
            }

            #mainInfo
            {
                margin-bottom: 0;
            }

            #successMessageDiv
            {
                text-align: unset;
                position:absolute;
            }
  ...

JavaScript

$(function () {
	var frozen = false,
  		items = ["Freeze Panes", "Freeze First Row", "Freeze First Column"],
			$editor = $('#editor').igTextEditor({
            placeHolder: "Freeze Panes",
            readOnly: true,
            dropDownOnReadOnly: true,
            listItems: items,
            focus: function (e, ui) {
            	ui.owner.showDropDown();
            },
            valueChanged: function (e, ui) {
              if (ui.owner.selectedListIndex() === 0) {
              	frozen = !frozen;
              } else {
                 frozen = true;
              }
              items[0] = frozen ? "Unfreeze Panes" : "Freeze Panes";
              $editor.igTextEditor("option", "listItems", items);
              //$editor.igTextEditor("value", ui.newValue);
            }
        });
});