this blog have implement select tags values. problem tags displaying in chrome browser.
but when open blog in mozilla browser stretches tags left right in below image can view it. how can make responsive mozilla firefox , browsers.
the below code.
<style>html { font-size: 14px; font-family: arial, helvetica, sans-serif; } .k-input { font-weight:bold !important; font-size:12pt !important; color: green !important; } ::-webkit-input-placeholder { color: green; } ::-webkit-input-placeholder { color: green; font-weight: 800; } :-moz-placeholder { /* firefox 18- */ color: green; font-weight: 800; } ::-moz-placeholder { /* firefox 19+ */ color: green; font-weight: 800; } :-ms-input-placeholder { color: green; font-weight: 800; } .container:hover{ background-color:#f0f2f3; } </style> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> <div class="container" style="overflow: hidden; border: 1px solid gray; width: 465px; margin-left: -180px; padding: 30px 70px 30px 170px;"> <div id="example" role="application" style="float:left;width:49%; margin-right:2%;margin-left: -32%;"> <div id="select" class="demo-section k-content"> <select id="size" placeholder="skills, designations...." style="width: 230px;border-width: 2px !important; border-color: #d8d3d3 !important;" > <option /> <option />to <option />code <option />way <option />always <option />easily </select> </div> </div> <div id="example1" role="application" style="float:left;width:49%;margin-right:0;margin-left: -5px;"> <div id="select" class="demo-section k-content"> <select id="size1" placeholder="location" style="width: 140px;border-width: 2px !important; border-color: #d8d3d3 !important;" > <option /> <option />delhi <option />bangalore <option />jammu , kashmir <option />ahmedabad <option />arunachal pradesh </select> </div> </div> <div id="example2" role="application" style=" float: right; margin-left: 95px; width: 49%; margin-right: 14px; margin-top: -47px;"> <div id="select" class="demo-section k-content"> <select id="size2" placeholder="exp(years)" style="width: 114px;border-width: 2px !important; border-color: #d8d3d3 !important; " > <option /> <option />0 year <option />1 <option />2 <option />3 <option />4 </select> </div> </div> <div id="example3" role="application" style="float:right;width:49%;margin-right:-102px;margin-top: -47px;"> <div id="select" class="demo-section k-content"> <select id="size3" placeholder="salary" style="width: 100px;border-width: 2px !important; border-color: #d8d3d3 !important; "> <option /> <option /><1 lac <option />2 <option />3 <option />4 </select> </div> </div> </div> <script> $(document).ready(function() { // create combobox input html element // create combobox select html element $("#size").kendocombobox(); $("#size1").kendocombobox(); $("#size2").kendocombobox(); $("#size3").kendocombobox(); var select = $("#size").data("kendocombobox"); var select = $("#size1").data("kendocombobox"); var select = $("#size2").data("kendocombobox"); var select = $("#size3").data("kendocombobox"); }); </script>
tested on firefox, removed inline styles. check media query resizing browser when open snippet.
you'll have click full page on snippet view responsiveness.
html { font-size: 14px; font-family: arial, helvetica, sans-serif; } .k-input { font-weight:bold !important; font-size:12pt !important; color: green !important; } .container { display: flex; justify-content: space-between; } ::-webkit-input-placeholder { color: green; } ::-webkit-input-placeholder { color: green; font-weight: 800; } :-moz-placeholder { /* firefox 18- */ color: green; font-weight: 800; } ::-moz-placeholder { /* firefox 19+ */ color: green; font-weight: 800; } :-ms-input-placeholder { color: green; font-weight: 800; } .container:hover{ background-color:#f0f2f3; } @media(max-width: 480px) { .container { flex-direction: column; align-items: flex-start; } }<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> <div class="container" style=""> <div id="example" role="application" style=""> <div id="select" class="demo-section k-content"> <select id="size" placeholder="skills, designations...." style="" > <option /> <option />to <option />code <option />way <option />always <option />easily </select> </div> </div> <div id="example1" role="application" style=""> <div id="select" class="demo-section k-content"> <select id="size1" placeholder="location" style="" > <option /> <option />delhi <option />bangalore <option />jammu , kashmir <option />ahmedabad <option />arunachal pradesh </select> </div> </div> <div id="example2" role="application" style=""> <div id="select" class="demo-section k-content"> <select id="size2" placeholder="exp(years)" style="" > <option /> <option />0 year <option />1 <option />2 <option />3 <option />4 </select> </div> </div> <div id="example3" role="application" style=""> <div id="select" class="demo-section k-content"> <select id="size3" placeholder="salary" style=" "> <option /> <option /><1 lac <option />2 <option />3 <option />4 </select> </div> </div> </div> <script> $(document).ready(function() { // create combobox input html element // create combobox select html element $("#size").kendocombobox(); $("#size1").kendocombobox(); $("#size2").kendocombobox(); $("#size3").kendocombobox(); var select = $("#size").data("kendocombobox"); var select = $("#size1").data("kendocombobox"); var select = $("#size2").data("kendocombobox"); var select = $("#size3").data("kendocombobox"); }); </script>
Comments
Post a Comment