I'm having problems with the dropdownlist button.. the buttons looks weird..
Here is the image: http://imgur.com/9zHNM
HTML markup:
<td class="style 4">
<select name="ctl00$ContentPlaceHolder1$ucPromotions1$ddlCompany"
id="ctl00_ContentPlaceHolder1_ucPromotions1_ddlCompany"
style="height:25px;width:167px;">
</td>
CSS markup:
.style4
{
width: 185px;
}
What could be the problem?
Edit: problem resolved, it was the padding of the select in one my CSS
i have resolved it with this style
<td class="style 4">
<select name="ctl00$ContentPlaceHolder1$ucPromotions1$ddlCompany"
id="ctl00_ContentPlaceHolder1_ucPromotions1_ddlCompany"
style="height:25px;width:167px;padding:0 0;padding-top:0;paddingright-:0;padding- bottom:0;padding-left-value:0; ">
</td>
It's kinda hard to help you without a living demo but, what if you adjust the same style on the class .style4 and the style of the select?
Set them both at width: 185px; for example.
Hope it helps!
Your CSS properties in .style4 will not have any effect, because you've set the class attribute value to style 4. Remove the whitespace :)
Btw.: Your HTML has some errors.
Here is the valid one:
<td class="style4">
<select name="ctl00$ContentPlaceHolder1$ucPromotions1$ddlCompany" id="ctl00_ContentPlaceHolder1_ucPromotions1_ddlCompany" style="height:25px;width:167px;">
<option value="one">ONE</option>
<option value="two">TWO</option>
<option value="three">THREE</option>
</select>
</td>
Numbers only for CSS classes and IDs are not allowed.
Related
I have a select dropdown menu containing a list of states. I have restricted the visible options after clicking the dropdown via this stackoverflow solution as can be seen in my code below:
<div>
<label asp-for="Venture.Location" class="form-label">Venture Location</label>
<select asp-for="Venture.Location" class="form-input form-select" required onmousedown="this.size=9" onblur="this.size=0" onchange="this.size=0">
<option disabled selected value="">select an option</option>
#foreach(var location in Model.Locations)
{
<option value="location">#location</option>
}
</select>
</div>
However, clicking the dropdown, I will see a cuttoff option thus showing more than 9 options. How can I make sure to only show the correct amount of options via the size? How can I get rid of the cutoff option?
The problem (as it has been written inside of one of the comments of the answers you copied code from is that this crashes from IE11).
You can simply fix this with size attribute onto select tag:
<select id="vehicles" size="2" >
<option value="Location1">Location1</option>
<option value="Location2">Location2</option>
<option value="Location3">Location3</option>
</select>
This will result in showing only Location1 and Location2
The answer to this is that the padding on the select element was causing the issue. I have removed padding once the mousedown event has occured.
Try to use in css
.form-input {
margin: 10px 0px;
padding: 15px;
overflow: auto; /* This option can helpyou!*/
}
I'm Trying to open popup through jquery containing html syntax.but not getting proper idea.I have open an alert as shown below ex but how to open this HTML.The example code which i have shared gets data dynamically in mvc and on clicking that hyperlink i want to open an html page which should also contain dynamically data 'Html' code is given below.Any idea would be appreciated.
HTML
<body>
<table>
<tr>
<td>zone</td><td>Date</td>
</tr>
<tr>
<td>CreatedBy</td><td>CreatedDate</td>
</tr>
<tr>
<td>ClosedBy</td><td>ClosedDate</td>
</tr>
<tr>
<td>Pririty</td><td>IssueType</td>
</tr>
<tr>
<td>Branch/Location</td><td>IssueDescription</td>
</tr>
</table>
<select>
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
<textarea>Description</textarea>
<select>
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
<textbox>Attachment</textbox>
<input type="submit" value="submit"/>
</body>
asp.net mvc
<td id="statusdiv_#item.EscId" class="statusdiv">#Html.ActionLink(#Html.DisplayFor(model => item.Status).ToString(), "Escalation")</td>
jquery
$('.statusdiv').click(function () {
alert('hello');
});
This code is from http://jsfiddle.net/EuyB8/
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#TemplateRow { display:none; }
table, tr, td, th { border: solid thin black; padding: 5px; }
</style>
<script type="text/javascript">//<![CDATA[
$(function() {
//attach the a function to the click event of the "Add Box Attribute button that will add a new row
$('#AddAttr').click(function() {
//clone the template row, and all events attached to the row and everything in it
var $newRow = $('#TemplateRow').clone(true);
//strip the IDs from everything to avoid DOM issues
$newRow.find('*').andSelf().removeAttr('id');
//add the cloned row to the table immediately before the last row
$('#BoxTable tr:last').before($newRow);
//to prevent the default behavior of submitting the form
return false;
});
//attach a remove row function to all current and future instances of the "remove row" check box
$('#DeleteBoxRow').click(function() {
//find the closest parent row and remove it
$(this).closest('tr').remove();
});
//finally, add an initial row by simulating the "Add Box Attribute" click
$('#AddAttr').click();
});
//]]>
</script>
</head>
<body>
<table id="BoxTable">
<tbody><tr>
<th>Name</th>
<th>Nationality</th>
<th>Relationship</th>
<th>Date of Birth</th>
</tr>
<tr id="TemplateRow">
<td>
<select name="BoxName" id="BoxName">
<option selected="selected" value="attr1">attr1</option>
<option value="attr2">attr2</option>
<option value="attr3">attr3</option>
</select>
</td>
<td>
<select name="BoxComparison" id="BoxComparison">
<option selected="selected" value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
<option value="Like">Like</option>
<option value="!=">!=</option>
</select>
</td>
<td>
<input name="BoxVal" id="BoxVal" type="text">
</td>
<td>
<input id="DeleteBoxRow" name="DeleteBoxRow" type="checkbox">
</td>
</tr>
<tr>
<td colspan="4">
<input name="AddAttr" value="Add Box Attribute" id="AddAttr" type="submit">
</td>
</tr>
</tbody></table>
</body>
How can I get all the values of all the generated rows and put them in a c# array?
I have a solution for you but in my oppinion its a bit hacky. Since you are mentioning c# I assume you are working on a ASP.NET application. If that's right here is one way to do it:
First place a invisible textbox control on your page. The important thing here is that you hide it by css. If you set the visible property to false it wont be on your page and you cant sore anything in it.
Once the textbox is added you make a new jquery function which adds the value of your rows into the hidden textbox control. You can eiter do it with a mousedown event on your 'submit'-button or you can do it on the go with a 'changing'-event.
The last thing you have to do is that you have to add separators to the row values that you can split them back into an array in c#.
The value of the textbox control will look like this in the end:
ValueRow1|ValueRow2|ValueRow3
Back in c# its easy to split the value into an array:
string[] myArr = textbox1.Text.Split('|');
Javascript
var form = document.getElementById('date_budget');
pop('', 'exp_upd', '95', '80');
form.action = "test.aspx";
form.target = 'exp_upd';
form.submit();
HTML
<form id="date_budget" name="date_budget" method="post">
<table>
<tr>
<!--#include file="zone.inc" -->
<td id='mlodg_loc'><select name="loc" id="loc">
<option value="Select Location">Select Location</option>
</select></td>
<td>
<select name="month" id="month">
<option value="1">1</option>
</select>
</td>
<td>
<select name="year" id="year">
<option value="2013">2013</option>
</select>
</td>
</tr>
</table>
</form>
The above code opens a popup window, but when I change the html by adding the runat attribute, I am getting “Validation of viewstate MAC failed”, and some extra junk. the modified html is below
<form id="date_budget" name="date_budget" method="post" runat="server">
<table>
<tr>
<!--#include file="zone.inc" -->
<td id='mlodg_loc'><select name="loc" id="loc" runat="server">
<option value="Select Location">Select Location</option>
</select></td>
<td>
<select name="month" id="month" runat="server">
<option value="1">1</option>
</select>
</td>
<td>
<select name="year" id="year" runat="server">
<option value="2013">2013</option>
</select>
</td>
</tr>
</table>
</form>
Is there any workaround to use both the runat server and using the same element in JS, without using those asp tags something like <%= hidBT.ClientID %> I don't want that any other way.
Try to add this <pages enableViewStateMac="false"> in your web.config (or)
Try to Change this <form id="date_budget" name="date_budget" method="post"> to
this <form id="date_budget" name="date_budget" runat="server">
It shouldn't specify method or action
You can try setting the ClientIDMode="Static" on the control or in the #Page directive. That will keep the id of the form as "date_budget".
Otherwise if you don't need the ViewState on the page, then you can disable it in the #Page directive using EnableViewState="false".
This is what I should have posted in the first place.
This code displays an number of li inside an ol. Each li is represented on the page with a number(1 thru ...). Is there any way that I can access the current li number value with HTML, C#, Razor or JavaScript so that I can display it myself elsewhere on the page?
<div id="movieslist">
<ol>
#foreach(var row in data)
{
<li>
<table>
<tr>
<td width="950px" valign="baseline">#row.Name, #row.ReleaseYear, #row.Genre</td>
<td align="right" width="50px">
#{displayCount++;#displayCount;}
</td>
<td>
<select style="background-color:ThreeDFace">
<option>Choose Action</option>
<option onclick="window.location='dataMovies.cshtml?id=#row.id'">Google it</option>
<option onclick="window.location='EditMovie.cshtml?id=#row.id'">Edit Movie</option>
<option onclick="window.location='DeleteMovie.cshtml?id=#row.id'">Delete Movie</option>
</select>
</td>
</tr>
</table>
</li>
}
</ol>
I assume you mean the numbering that is automatically allied by the browser when ol or Ordered List is used.
With JQuery you could use .index()
In CSS3 you can use the nth-child pseudo-selector to style specific elements:-
http://reference.sitepoint.com/css/pseudoclass-nthchild
If you want to display it yourself, use ul and a counter. However, you can slightly modify the automatically displayed numbers as well.
This post will help you to achieve this.