Develop Reference

How to fix select drop down menu on mobile

I have the following code snippet. I'm facing an issue on mobile device. The drop down menu doesn't work at all. I've tried adding classes, tried #media query css for smaller devices, and a number of other things that didn't work. I'm beginning to suspect that it could be because of the many layers of div elements that I have?
When I try to touch/tap the drop down menu on a mobile device, the options don't show up. It feels like the drop down menu is disabled or something, but it works perfectly on a desktop. I'm trying to find a solution that keeps the drag and drop/sorting feature implemented.
/** Add sortable/draggable function **/
$('.column').sortable({
connectWith: '.column',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui)
{
/** Increment or decrement value based on element position **/
$('.currentposition').each(function (i) {
let numbering = ++i + 4;
$(this).val(numbering);
});
/** Display ordering priority number **/
$('.current_position').each(function (i) {
let numbering = ++i + 4;
$(this).text(numbering);
});
}
}).disableSelection();
.column .dragbox{
margin:5px 2px 20px;
position: relative;
border:1px solid #946553;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox{
margin:0;
/*font-size:12px;*/
color:#fff;
border-bottom:1px solid #946553;
font-family:Verdana;
cursor:move;
padding:5px;
}
.dragbox-content{
margin:5px;
font-family:'Lucida Grande', Verdana;
font-size:0.8em;
line-height:1.5em;
}
.column .placeholder{
background: #EED5B7;
border:1px dashed #946553;
}
.opIcons
{
background-image: url('iconSpirite.gif')!important;
background-repeat: no-repeat;
float:right;
height:13px;
width:13px;
margin:0px 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div id="column1" class="column ui-sortable">
<div class="dragbox" id="item5">
<div class="dragbox-content"></div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Lastname:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95009][value]" data-form-type="address,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95009][priority]" value="5">
<label class="current_position">5</label>
</div>
<div style="clear:both;"> </div>
</div>
<div class="dragbox" id="item6">
<div class="dragbox-content"></div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Zipcode:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95010][value]" data-form-type="address,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95010][priority]" value="6">
<label class="current_position">6</label>
</div>
<div style="clear:both;"> </div>
</div>
<div class="dragbox" id="item7">
<div class="dragbox-content">
</div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Phone:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95011][value]" data-form-type="phone,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95011][priority]" value="7">
<label class="current_position">7</label>
</div>
<div style="clear:both;"> </div>
</div>
<div class="dragbox" id="item8">
<div class="dragbox-content"></div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Firstname:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95008][value]" data-dashlane-rid="dfa7f355a521619d" data-form-type="other">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95008][priority]" value="8">
<label class="current_position">8</label>
</div>
<div style="clear:both;"> </div>
</div>
</div>

It’s because of your Javascript. Please try to add this jquery file:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
I hope this works fine.

Sounds oddly similar to a problem I had when trying to display my embedded audio file I put into my post.
I copied the code from my Google Drive Account (after I clicked on the menu tab to get the javaS code, went to the code editor of an article post I had there.
To my dismay, I was trying to get it to play, but noticed I couldn't get the play button to work.
Like you I was frustrated, so I went back into code editor mode (HTML) and started tinker around with the code itself, I thought it might be a certain or maybe some "whitespace" in the code that could have been interfering with the functionality of the code itself.
And come to find out it was neither!
The problem I was having was a "size-display issue" that was affecting the audio player's ability to play; I caught onto to the issue and went back into my HTML Editor and simply "adjusted the width and height" of the player itself.
Audio File (size adjustment trick helped me fix) which allow the display size of my audio player properly
Audio Player (displayed correctly and now playable after adjusting the pixel size - width and height)
And sure enough, I was able to access the play button clicking it on and off properly without further issues.
That might be your issue, maybe if you adjusted the width, height, or both in terms of size - it may be an tag source code that may also hold a clue to your issue.
The auto player on my site is coded this way --
I'm just trying give a clue to what might be the problem, and it may give you a bit more insight to finding a notable solution.
I hope this will be helpful to you! :D

jQuery get area to modify by ID then by ID of componet

Hey all I can not seem to get this to work in jQuery even though I know that it can:
my HTML code:
<div class="cd-panel from-right" id="va">
<header class="cd-panel-header" style="max-width: 600px;">
<h1 style="margin-top: 5px;" id="panHeading"></h1>
</header>
<div class="cd-panel-container" style="max-width: 600px; width: 600px;">
[more html code here...]
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="col-sm-10">
<input name="RequestID" disabled="True" class="form-control input-sm"
id="RequestID" style="width: 520px; max-width: 520px;" type="text">
</div>
</div>
[more html code here...]
</div>
<div class="cd-panel from-right" id="VDA">
<header class="cd-panel-header" style="max-width: 600px;">
<h1 style="margin-top: 5px;" id="panHeading"></h1>
</header>
<div class="cd-panel-container" style="max-width: 600px; width: 600px;">
[more html code here...]
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="col-sm-10">
<input name="RequestID" disabled="True" class="form-control input-sm"
id="RequestID" style="width: 520px; max-width: 520px;" type="text">
</div>
</div>
[more html code here...]
</div>
And this is my jQuery code:
if (responce["personData1"][0].RequestID != 1) {
$('#va > #RequestID').val(responce["personData1"][0].RequestID);
}
But it never puts the value inside that RequestID text box for VA even though it does have a value for RequestID. If I do this:
$('#RequestID').val(responce["personData1"][0].RequestID);
Then it has the value inside the text box.
What would I be missing?

You need to use, get rid of > it looks for immediate child and RequestID is not the child of va element.
$('#va #RequestID').val(responce["personData1"][0].RequestID)
Also note Identifiers in HTML must be unique. You can assign a class and then use it like
<input name="RequestID" disabled="True" class="form-control input-sm RequestID" style="width: 520px; max-width: 520px;" type="text">
and then
$('#va .RequestID').val(responce["personData1"][0].RequestID)

Try this:
$("#va [name='RequestID']").val(responce["personData1"][0].RequestID);
I think the problem is that you're trying to get an ID child of an ID, which should be unique, but you're using "RequestID" as ID on multiple elements.

ID are designed to be a unique selector on the page. So the search would stop after the first match
If you'd like to select multiple elements on the page based on a common pattern you should go for class selectors.
Now, to answer your question :
HTML:
<input name="RequestID" disabled="True" class="some-input-class form-control input-sm" id="RequestID" style="width: 520px; max-width: 520px;" type="text">
and JS:
if (responce["personData1"][0].RequestID != 1) {
$('#va .some-input-class').val(responce["personData1"][0].RequestID);
}
jsFiddle example here
References:
W3C docs
Is selecting by class or id faster than selecting by some other attribute?

Dynamic width for a disabled input data

First of all I already did try researching how to make my input to be dynamic based from the from the width of its data but all answers that I could see is from the input which is not disabled. Its trigger is from key up or onclick which is not applicable to mine since my input is disabled.
This is the screenshot of my problem. As you can see my amount in words in Pesos is cut and is not dynamically expanding.
This is my html:
<table width="100%">
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabelBold">Check Number:</div>
<div style="float:left">
<input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
</div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Check Date:</div>
<div style="float:left">
<input name="checkDate" class="checkDate text ui-widget-content ui-corner-all" style="width:250px;" readonly /></div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Client Name:</div>
<div style="float:left"><input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly /> </div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Amount:</div>
<div style="float:left"><input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/></div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Pesos:</div>
<div style="float:left"><input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all"
style="min-width:250px;" readonly /></div>
</div>
</td>
</tr>
</table>
Question:
Is it really possible to be dynamic even though my input is disabled? If yes how? if no why?
Requirements:
The minimum width of my input Pesos should be 250px because it needs to be aligned to other input.
My problem is only with the input of Pesos
HTML, CSS or Javascript solution is accepted.
I think I don't need to include my css styles anymore since it would not be needed. If css is the solution just add a new class.
I prepared a jsfiddle here

Using only CSS, one cannot make an <input> expand its size based on content. It is possible via Javascript, though (see Rayon Dabre's solution).
But the simple answer here would be to use an element that naturally expands to show its content, like a <span>, and style it to look like an input:
From your picture, I'm approximating something close to :
span.disabledInput {
display: inline-block;
background-color: #F0F0F0;
border-radius: 6px;
border: 1px solid #EEE;
}
You can even make it editable. Here's a more convincing example:
.form-control.disabledInput {
height: initial;
background-color: #eee;
border: 1px solid #ccc;;
display: inline-block;
clear: left;
width: auto;
color: #666;
box-sizing: border-box;
}
.form-control.disabledInput:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-group.col-xs-12 label {
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="form-group col-sm-6">
<label for="checkNumber">Check Number:</label>
<input type="password" class="form-control" name="checkNumber" id="checkNumber">
</div>
<div class="form-group col-sm-6">
<label for="checkDate">Check Date:</label>
<input type="text" class="form-control" name="checkDate" id="checkDate" readonly>
</div>
<div class="form-group col-sm-6">
<label for="clientName">Client Name:</label>
<input type="text" class="form-control" name="clientName" id="clientName" readonly>
</div>
<div class="form-group col-sm-6">
<label for="amount">Amout:</label>
<input type="text" class="form-control" name="amout" id="amount" readonly>
</div>
<div class="form-group col-xs-12">
<label>Pesos:</label>
<span type="text" tabindex="0" contenteditable="true" class="form-control disabledInput">To make this <code>span</code> not editable, remove the <code>contenteditable</code> attribute... <br />Don't forget to resize your browser!</span>
</div>
</div>
If you want to match the exact styling, you should inspect the disabled <input>. Pay close attention to line-height, font-size, padding and margin properties. Also, don't forget to add the tabindex attribute so it can be :focus-ed, like the real <input>s in the page.
Now, because your input is disabled, that's about all you need to do.
However, if your fake "input" wasn't disabled you'd have to add contenteditable="true" to it. And if it had to be part of your form on submission, you'd also have to add an <input type="hidden"> that would change its value to match the .text property of your <span>. Again, resorting to JavaScript.

Consider static constant as the width of the character Which can not be accurate by the way as H and I can not consume same space.
Try this:
document.getElementById('amountInWords').style.width = document.getElementById('amountInWords').value.length * 7 + 'px'
<table width="100%">
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabelBold">Check Number:</div>
<div style="float:left">
<input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
</div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Check Date:</div>
<div style="float:left">
<input name="checkDate" class="checkDate text ui-widget-content ui-corner-all" style="width:250px;" readonly />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Client Name:</div>
<div style="float:left">
<input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly />
</div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Amount:</div>
<div style="float:left">
<input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Pesos:</div>
<div style="float:left">
<input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all" style="min-width:250px;" value="One Thousand Nine Hundred Forty Nine Pesos only and this is fake msg" readonly />
</div>
</div>
</td>
</tr>
</table>

It is not expanding because it’s a part of your first column. It just cannot go on the second one.
To fix it, add
<td colspan='2'>
on your last TD (To indicate it to take space of both columns)
Example : http://reference.sitepoint.com/html/th/colspan/demoframe

How to show the text in the corner of border of a div?

I want to show a text like below in the html page, how to do this?
This is what I tried up to now.
<div class="filterleft" style="display: inline-block;">
<div id="filterleft_border" style="border-style:solid; border-width:1px;" >
<label class="category-label" for="category">Filter: </label>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="filterValue" style="width: 50px"/>
</div>
</div>
I created a fiddle for this,
http://jsfiddle.net/KendoDev/kzf6257h/
But what I want is,

You'll have to use HTML <fieldset> and <legend> to make that work.Its really simpler to use it..See more about this in W3Schools
See the
fiddle
HTML
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px;" >
<legend>Filter: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 50px"/>
</fieldset>
</div>

If you dont want to use fieldset use it like below.
.category-label
{
position:absolute;
top:0px;
left:12px;
padding-left:3px;
padding-right:3px;
background:white;
}
DEMO

If you wanted it to be specifically the label that was positioned like the legend you could do:
http://jsfiddle.net/ahallicks/kzf6257h/5/
#filterleft_border {
padding: 10px;
position: relative;
}
.category-label {
background: #FFF;
left: 5px;
position: absolute;
top: -10px;
}
Note, the relative positioning will keep the label within the confines of the border in cae you needed to use it more than once.

It's a fieldset. I tried to change your code a little bit. Check it out.
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px; border-radius:6px;" >
<legend style="font-family:Tahoma;font-size:11px;font-weight:bold">Filters: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 150px"/>
</fieldset>
</div>
Here is the document in W3schools

How to append Html.Action to view by using javascript

I am trying to add new row by clicking add new button. Row contains below
<div class="col-sm-12" id="totalRow" cnt="1">
<div class="col-sm-6" style="margin-top: 10px; float: left; padding-left: 0;">
<label for="reg_input">Masrafın Türü</label>
<select id="s2_basic_masrafbutce" name="masrafTuruId">
<option value=""></option>
<optgroup label="Masraf Türleri">
#Html.Action("_MasrafTurleriniGetir", "Ortak", new { ID = 0 })
</optgroup>
</select>
</div>
<div class="col-sm-3" style="margin-top: 10px; float: right; padding-right: 0px;">
<label for="reg_input">Masrafın Tutarı</label>
<input type="text" id="#Html.IdFor(x => x.tutar)" class="form-control" name="tutar">
</div>
<div class="col-sm-3" style="padding-right: 0; margin-top: 10px; float: right">
<label for="reg_input">Fiş No</label>
<input type="text" id="#Html.IdFor(x => x.fis_no)" class="form-control" name="fis_no">
</div>
<div class="col-sm-6" style="margin-top: 20px; float: left; padding-left: 0">
<label for="reg_input">Açıklama</label>
<textarea name="MasrafAciklama" class="form-control" style="resize: none;"> </textarea>
</div>
</div>
How can I append
#Html.Action("_MasrafTurleriniGetir", "Ortak", new { ID = 0 })
into div by using javascript ?
I tried
$("#myDiv").append('<%=Html.Action("_MasrafTurleriniGetir", "Ortak", new { ID = 0 })');
but it's not working.

You are apparently using the Razor view engine, so this should work
$("#myDiv").append('#Html.Action("_MasrafTurleriniGetir", "Ortak", new { ID = 0 })');
Also make sure the javascript is part of a cshtml file, not an external JavaScript file.