Why drop down display first character in capital after dot

Problem

I make a drop down on pop up screen. I am able to make that drop down using jQuery mobile. I used dform plugin. Everything is working fine. But I have one issue my first character display in capital letter when I added bootstrap.min.css - why?

When I run my program without bootstrap.min.css, it works fine. But when I run with bootstrap.css, it give first letter capital after . . As I written in small. This problem is only in chrome browser. When I run in firefox it works perfectly.

Can you please explain why it is occurring?

Here is my code.

<!DOCTYPE html>
<html>
<head>


  <meta charset="utf-8">
  <title>JS Bin</title>

    <link href="  https://dl.dropboxusercontent.com/s/bbvcx2zc4ocuqzt/bootstrap.min.css?m=" rel="stylesheet" type="text/css" />
    <link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
    <link href=" https://dl.dropboxusercontent.com/s/hg36tk1m7rc4gnj/style.css" rel="stylesheet" type="text/css" />


    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="https://rawgit.com/daffl/jquery.dform/master/dist/jquery.dform-1.1.0.js"></script>




</head>
<body>

  <button id="test">test</button>
  <div data-role="popup" data-dismissible='false' data-transition="flip" id="tabbedPopup" data-theme="a"><a href="#"
                                                                                                          data-rel="back"
                                                                                                          data-role="button"
                                                                                                          data-theme="a"
                                                                                                          data-icon="delete"
                                                                                                          data-iconpos="notext"
                                                                                                          class="ui-btn-right  cross-border  cross-border closePopUp_h button circleClass" >Close</a>

    <div id="commandInfo"></div>
    <div id="commandInfoheader" class="comandinfoheader"></div>
    <div data-role="collapsible-set" data-theme="b" data-content-theme="b" id="tabbedSet" data-iconpos="left">


    </div>
</div>

</body>
<script type="text/javascript">

$(function () {

   $('#test').click(function(){
      createCommandPopUpTabs("tc_2-cmd_1_VoiceCallAudioMosMO");

      $("#tabbedPopup").popup("open");

   })

});


   function createCommandPopUpTabs(id) {
      var tabsHeader = ["InputParameter"];

  var header = "<h3 >hh</h3>";
  var commmand = "VoiceCallAudioMosMO";
  var button = '<button onclick="return submitCommand(&quot;' + id
      + '&quot;)" style="" class="donebtn common-button1">Save</button>';
  //$("#commandInfo").append(header);
  $("#commandInfo").append(button);

    $("#commandInfoheader").html(header);
  for ( var i = 0; i < tabsHeader.length; i++) {
    var headerId = tabsHeader[i] + "_tab" + commmand;
    var header = "<div data-role='collapsible' data-collapsed='false' id='"
        + headerId + "'><h3>hhh</h3></div>";
    var content = generateCommandTabContent(tabsHeader[i], id);
    $("#tabbedSet").append(header);
    $("#tabbedSet").find("#" + headerId).append(content);
    $("#tabbedSet").collapsibleset("refresh");



        $('input[name=direction]').parent().addClass('cleassr')

        $("#tabbedSet").children(":first").collapsible( "expand" );
  }
}

    function generateCommandTabContent(name, id) {

  var commandName = "VoiceCallAudioMosMO";

  if (name == "InputParameter") {
    var object = new window[commandName]();
    var map = object.generateInputRequirment();
    var formData = generateInputParamForm(map, id, status);
    var form = $("<form />");
    var dform = form.dform(formData);
    return dform;
  } 
  return null;
}
function VoiceCallAudioMosMO() {
    COMMAND_NAME = "VoiceCallMos";
    COMMAND_DISPLAY_NAME = "VoiceCallMOS";
    this.map = {};
}

VoiceCallAudioMosMO.prototype.generateInputRequirment = function () {
    if(typeof VoiceCallAudioMosMO.JSON!="undefined") {
        var inputs = VoiceCallAudioMosMO.JSON.input;
        for (var key in inputs) {
            var inputField = inputs[key];
            var inputParameterInfo = new InputParameterInfo();
            for (var inputKey in inputField) {
                inputParameterInfo[inputKey] = inputField[inputKey];
            }
            this.map[inputParameterInfo.name] = inputParameterInfo;
        }
        return this.map;
    }
};
function InputParameterInfo() {

}

VoiceCallAudioMosMO.JSON = {
    "commandName": "VoiceCallAudioMosMO",
    "input": {
        "refFileName": {
            "displayDetail": "The reference file name to play in case of uplink channel",
            "displayName": "Ref File Name",
            "inputType": "SWITCH",
            "name": "refFileName",
            "inputValues": {

                "USAReference.wav": "USAReference.wav",
                "Reference.wav": "Reference.wav"
            },
            "value": "",
            "unit": "NONE",
            "required": false,
            "visible": true
        }

       }

};

function generateInputParamForm(map, id, status) {
  var formId = "form_" + id;

  var formdata = {
    elements : []
  };
  formdata.id = formId;
  formdata.name = formId;
  formdata.method = "post";

  var div = {
    html : []
  };
  div.type = "div";
  div.class = "inputDiv";
  div.caption = "<h3>Input Parameters</h3>";

  var tabIndex = 1;

  var arr = id.split("-");
  var data = null;


  for ( var key in map) {

    var inputObj = map[key];
        if (inputObj.visible==false && inputObj.required==false) {

            continue;

        }else {
            var obj = createFormObject(inputObj);
        }
    //var obj = createFormObject(inputObj);
        if(typeof data=="undefined"){
            obj.value = inputObj["value"];
        }else if (data != undefined && data.hasOwnProperty(inputObj["name"])) {
            obj.value = data[inputObj["name"]];
        }

    /*if (data != undefined && data.hasOwnProperty(inputObj["name"])) {
      obj.value = data[inputObj["name"]];
    } else if (inputObj.hasOwnProperty("value")) {
      obj.value = inputObj["value"];
    }*/

    if (status == "view") {
      obj.readonly = "true";
      obj.disabled = "disabled";
    }

    obj.tabindex = tabIndex;
    var objName = "VoiceCallAudioMosMO";
    obj.onblur = "validateElement('" + objName + "', '" + formId + "','"
        + obj.name + "')";

    var unit = {};

    var fieldset = {
      html : []
    };
    fieldset.type = "fieldset";
    fieldset.caption = inputObj["displayName"];
    fieldset.html.push(obj);


        $("div > fieldset legend:contains('*')").each(function () {
            $(this).html($(this).html().replace("*", "<span class='red'>*</span>"));
        });



    div.html.push(fieldset);
    tabIndex++;
  }

  formdata.elements.push(div);

  return formdata;
}

function createFormObject(inputObj) {


  var obj = {};
  if (inputObj.hasOwnProperty("inputType")) {
    if (inputObj["inputType"] == "LIST") {
      var list = inputObj["inputValues"];
      obj.type = "select";
      obj.options = list;
    } else if (inputObj["inputType"] == "NUMBER") {
      obj.type = "text";
    } else if (inputObj["inputType"] == "SWITCH") {
      var list = inputObj["inputValues"];
      obj.type = "select";
      obj.options = list;
    } else {
      obj.type = "text";
    }
  } else {
    obj.type = "text";
  }

  if (!inputObj.hasOwnProperty("displayName")) {
    obj.type = "hidden";
  }

  obj.id = inputObj["name"];
  obj.name = inputObj["name"];
  obj.required = inputObj["required"];
    obj.placeholder = inputObj["placeholder"];
    obj.classes = inputObj["class"];
    obj.className = inputObj["class"];
    obj.class = inputObj["class"];


    obj.title= inputObj["displayDetail"];

  return obj;
}


</script>
</html>

It display a drop down when you click button.Drop down Value USAReference.wav.here I written "w" in small but it display in capital.but when I remove this css https://dl.dropboxusercontent.com/s/bbvcx2zc4ocuqzt/bootstrap.min.css?m=" rel="stylesheet" type="text/css" /> it show in small letter ? why ?

Problem courtesy of: user944513

Solution

After a long research I found the solution own .there is a property text-transform: capitalize written on 247 line Number bootstrap.css file.I remove that property.I am able to solve my problem

Solution courtesy of: user944513

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.