Im using the following code to put 3 button next to each other and this is working
Ok when I use it like following, but the problem is when I reduce the size of browser page slowly the detailes button is become on top the delete button,
the edit and delete are not changing,how can I make also the details button to be responsive?
#if (ViewBag.condition)
{
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.ID }) |
</td>
<td style="position:relative; right: 60px ">#Html.ActionLink("Details", "Details", new { id = item.ID })</td>
}
else
{
<td>#Html.ActionLink("Details", "Details", new { id = item.ID })</td>
}
There's not a lot of code to work with, and I don't know much about bootstrap. But typically on mobile devices I set td's display to block. However your doctype declaration can determine whether or not that will work (I belive you have to be in standards mode). Try adding this to your CSS and/or media query if you have access to it:
#media screen and (max-width: 480px){
td{
display: block; /* or inline-block */
}
}
You could alternatively test with inline style on your td elements by adding:
style="display:inline-block;"
Good luck!
Related
I am trying to increase the width of an Html.TextBoxFor control in an ASP.NET MVC 5 View page using razor syntax. I am using Visual Studio 2017. I created a css style (.textboxfor-width) to increase the control's width as shown below but it is not working.
/* *** Remove this comment line if trying to use in Visual Studio */
#using rgmsite.Models
#model LoginTestViewModel
#{
ViewBag.Title = "Log in";
}
<style type="text/css">
.textboxfor-width {
width: 700px;
}
</style>
<h2>SimpleTest</h2>
<section id="loginForm">
#using (Html.BeginForm("Login", "Account",
new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post,
new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<div class="form-group">
#Html.TextBoxFor(m => m.Email,
new { #class = "form-control textboxfor-width",
placeholder = "Enter email address to be used as your user name"
})
</div>
}
</section>
*** Remove this comment line if trying to use in Visual Studio */
Here is the view model (LoginTestViewModel) I am using for the form:
/* *** Remove this comment line if trying to use in Visual Studio */
public class LoginTestViewModel
{
public string Name { get; set; }
public string Email { get; set; }
}
*** Remove this comment line if trying to use in Visual Studio */
Using a smaller width value such as 40px in the css works. But there seems to be some limit imposed on the control preventing it from being wider (such as 700px) than the default. Flushing the Chrome cache and doing a hard reload is not fixing the problem for me. What needs to be done to make the TextBoxFor control wider than the default?
Thanks in advance.
That css is not working because you missed the . in css selector. Try this:
.textboxfor-width {
width:600px;
}
And it should work.
I've never worked with MVC 5. However, if MVC 5 sets a default max-width value it could be interfering with your code. You may be able to bypass this by using !important at the end of your width or max-width tag:
width: 600px !important;
Hope this helped.
I have created a simple MVC 5 app and added the snipped code and it works fine.
This is the element:
#Html.TextBoxFor(v => v.prop, "", new { #class ="form-control textboxfor-width", placeholder ="Enter email address to be used as your user name"})
With styling:
.textboxfor-width {
width: 400px;
}
After changing the css I had to empty the cache by doing a hard reload.
Please open google console by right clicking the page and click on inspect.
Once you have opened the console - right click on the reload page and click on
Empty cache and hard reload.
The . notation is required as you have defined a new class textboxfor-width.
I found something that works for my ASP.NET MVC 5 project but I'm not sure it is needed for other versions of ASP.NET MVC.
The maximum length for the TextBoxFor control is defined in an MVC 5 Project Template file called sites.css which is located in the root of the Content folder of the project.
In there at the bottom is the following:
/*
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 600px;
}
*/
The reason my defined style in my MVC View file would not work was because the max-width in the sites.css file was originally set to 280px; In the above example, I have already increased the max-width to a value of 600px; This is strange as I can only set the max width here and not in my own created style tags within my view page. However, I am able to set a lower width with my own defined style in my MVC View. It does not say it includes a TextBoxFor control but it works on it. I just leave this set to 600px for now. For other cases where I need the TextBoxFor control width to be less I provide my own style width setting on my MVC 5 View page such as the following:
/*
<style type="text/css">
.textboxfor-width {
width: 400px;
}
</style
*/
Then I use my defined style (textboxfor-width) with the smaller width in my MVC 5 View as shown below:
/*
#Html.TextBoxFor(m => m.Email, new { #class = "form-control textboxfor-width",placeholder = "Enter email address to be used as your user name"})
*/
try with this,
#Html.TextBoxFor(model => model.Email, new { htmlAttributes = new { #class =
"form-control textboxfor-width", #type = "text",#placeholder = "Enter email
address to be used as your user name" } })
How to change text area width in ASP.NET MVC View? I read questions about this problem here, but nothing helped.
#Html.TextAreaFor(m => m.Suggestions, new { #class = "text-area", placeholder = "Unesite svoje prijedloge..." })
CSS:
.text-area {
width:50%;
height:100px;
color:#3A3A3A;
font-weight:bold;
font-style:italic;
}
All styles are applied except this for text area width.
I also tried this:
#Html.TextAreaFor(m => m.Suggestions, new { rows = "7", cols = "70", #class = "text-area", placeholder = "Unesite svoje prijedloge..." })
But no result.
Open developer tools and find the input element in your browser. Look to see if there is a max-width property set on your TextArea element. If so then all you need to do is us the following code to overwrite it.
-- You can use this code if you are only binding a single model to your view
#Html.TextArea("NameOfElement", Model.propertyName, new {style = "max-width:100% !important;"})
--- OR ---
--- Use this code is you are binding a model from a list of models
#Html.TextAreaFor(m => m.propertyName, new {style="max-width:100%", #id = "ElementId"})
Note:
1) If you use the above value for the max width it will inherit from the parent container.
2) The first parameter in the TextArea help is the name of the element. It also assigns the name as the elementID. In the TextAreaFor you have to explicitly assign the elementID as shown above.
HTML:
<form id="myform">
<textarea value="">
</textarea>
</form>
CSS:
#myform textarea{
Width: 50%;
height: 100px;
}
Try using form-control-full property:
#Html.TextAreaFor(model => model.Value, new { #class = "form-control form-control-full", rows = 8})
I found this:
in site.css line 19
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
remove textarea in this.
Here's my CSS:
<style type="text/css">
.leftRightBorder select,
.leftRightBorder textarea,
.leftRightBorder input[type=text]
{
width: 150px;
margin-bottom: 5px;
}
</style>
Here's the top portion of my page as an image:
The CSS styles/spaces/lengths (is that a word) everything on the page beautifually, but this top section is still weird, the maturity date two dropdowns, and value date is a little weird too. Here is the ASP for this top section:
<tr id="tr14">
<td id="td15">
<%= Html.LabelFor(m => m.MaturityDate) %>
</td>
<td id="td16" style="width: 150px;">
<%= Html.TextBox("MaturityDate", Model.MaturityDate.HasValue ?
Model.MaturityDate.Value.ToString("dd-MMM-yyyy") : "",
new { #class = "economicTextBox", propertyName = "MaturityDate",
onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
<%= Html.DropDownListFor(m =>
m.AmortizationComponent.MaturityBusinessDayConvention,
DropDownData.BusinessDayConventionList(), "",
new { propertyName =
"AmortizationComponent.MaturityBusinessDayConvention",
onchange = "UpdateField(this);" })%>
</td>
<td id="td17" style="width: 76px">
Value Date
</td>
<td id="td18" style="width: 150px">
<%= Html.TextBoxWithPermission("RateTimeStamp",
Model.RateTimeStamp.HasValue ?
Model.RateTimeStamp.Value.ToString("dd-MMM-yyyy") : "",
new string[] { PERMISSIONS.hasICAdvanced },
new { #class = "economicTextBox", propertyName = "RateTimeStamp",
onchange = "parseAndSetDt(this);", dataType = "Date" })%>
<br />
<%= Html.CheckBoxForWithPermission(m => m.Current,
new string[] { PERMISSIONS.hasICAdvanced },
new { #class = "economicTextBox", propertyName = "Current",
onchange = "UseCurrent();UpdateField(this);" })%>
Current
</td>
</tr>
Why isn't this part being styled effectively?
CSS doesn't work on every input element the same way in every browser. In IE, most of the inputs are still drawn by Windows Forms so they are not quite CSS compliment. But in Chrome and Firefox everything works for the most part, but you may have to tweak the margins and size specifically for the select element.
And if you want to support the Mac, you really need to forget about the sizing, because the Apple OS decides to do it's own thing regardless of settings, sort of the same problem I mentioned above with IE.
Don't become overly anal about this, because at this point in history you can't control every aspect of the input in the same way, and you are going to drive you self crazy if you try to. Things are getting better with the browsers specifically IE 9, but don't hold your breath that they will work how you want.
Note I also have assumed it is in oversight, but leftRightBorder doesn't show up anywhere in the code you posted. I am making the assumption the problem you are posting about isn't as simple as forgetting the class.
So I have CSS to regulate the size of all the input types on the page. However I still notice some not being regulated in terms of length. The CSS I am using is this:
.leftRightBorder select,
.leftRightBorder textarea,
.leftRightBorder input[type=text]
{
width: 150px;
}
Here is a picture of the page using the above CSS:
As you can see there are still some minor length issues. But the main question I have is, the 'Payment Day' and 'Roll Day' fields on each component are within the same table cell so even if I put a between them the spacing doesn't equal the vertical spacing between everything else on the page. How do I regular vertical spacing between everything on the page?
EDIT:
Here is the ASP.NET Code:
<tr id="tr63">
<td id="td64">
Payment Day
</td>
<td id="td65" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.PaymentDay", onchange = "UpdateField(this);" })%>
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);" })%>
</td>
<td id="td66" />
<td id="td67">
Payment Day
</td>
<td id="td68" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.PaymentDay", onchange = "UpdateField(this);", disabled="disabled" })%>
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);", disabled="disabled" })%>
</td>
</tr>
I want spacing BETWEEN the HTML Helpers to equal the spacing between everything else on the page. Hope this helps.
Try adjusting the margin instead of padding. input{margin-bottom: 5px;} padding is inside the border, margin is outside the border.
It be helpful if you could post the html for this. One approach you could use is to add padding to the fields. What is happening is that you have an invisible table border creating your spacing between all of your other fields (I think). Then when you have 2 form fields in the same table field you don't have the border.
Easiest solution would be to make them separate fields. You can make your "Roll Day" field rowspan="2" if you need it to appear floating between the 2 fields. Alternatively you could add a line to your css like:
input{margin-bottom: 2px;}
That would, of course, affect any input and probably isn't the best route, though.
I can't set my table row as link to something. I can use only css and html. I tried different things from div in row to something another, but still can't make it works.
You have two ways to do this:
Using javascript:
<tr onclick="document.location = 'links.html';">
Using anchors:
<tr><td>text</td><td>text</td></tr>
I made the second work using:
table tr td a {
display:block;
height:100%;
width:100%;
}
To get rid of the dead space between columns:
table tr td {
padding-left: 0;
padding-right: 0;
}
Here is a simple demo of the second example: DEMO
I made myself a custom jquery function:
Html
<tr data-href="site.com/whatever">
jQuery
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
Easy and perfect for me. Hopefully it helps you.
(I know OP want CSS and HTML only, but consider jQuery)
Edit
Agreed with Matt Kantor using data attr. Edited answer above
If you're on a browser that supports it you can use CSS to transform the <a> into a table row:
.table-row { display: table-row; }
.table-cell { display: table-cell; }
<div style="display: table;">
<a href="..." class="table-row">
<span class="table-cell">This is a TD... ish...</span>
</a>
</div>
Of course, you're limited to not putting block elements inside the <a>.
You also can't mix this in with a regular <table>
If you have to use a table, you can put a link into each table cell:
<table>
<tbody>
<tr>
<td>John Smith</td>
<td>123 Fake St</td>
<td>90210</td>
</tr>
<tr>
<td>Peter Nguyen</td>
<td>456 Elm Ave</td>
<td>90210</td>
</tr>
</tbody>
</table>
And make the links fill up the entire cells:
table tbody tr td a {
display: block;
width: 100%;
height: 100%;
}
If you are able to use <div>s instead of a table, your HTML can be a lot simpler, and you won't get "gaps" in the links, between the table cells:
<div class="myTable">
<a href="person1.html">
<span>John Smith</span>
<span>123 Fake St</span>
<span>90210</span>
</a>
<a href="person2.html">
<span>Peter Nguyen</span>
<span>456 Elm Ave</span>
<span>90210</span>
</a>
</div>
Here is the CSS that goes with the <div> method:
.myTable {
display: table;
}
.myTable a {
display: table-row;
}
.myTable a span {
display: table-cell;
padding: 2px; /* this line not really needed */
}
The usual way is to assign some JavaScript to the onClick attribute of the TR element.
If you can't use JavaScript, then you must use a trick:
Add the same link to each TD of the same row (the link must be the outermost element in the cell).
Turn links into block elements: a { display: block; width: 100%; height: 100%; }
The latter will force the link to fill the whole cell so clicking anywhere will invoke the link.
Answer from sirwilliam fits me best. I improved the Javascript with support for hotkey Ctrl + LeftClick (opens page in new tab). Event ctrlKey is used by PC's, metaKey by Mac.
Javascript
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
window.open(url, '_blank');
window.focus();
}
else if(click == 1){
window.location.href = url;
}
return true;
}
});
Example
http://jsfiddle.net/vlastislavnovak/oaqo2kgs/
You can't wrap a <td> element with an <a> tag, but you can accomplish similar functionality by using the onclick event to call a function. An example is found here, something like this function:
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
And add it to your table like this:
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
I know this question is already answered but I still don't like any solution on this page. For the people who use JQuery I made a final solution which enables you to give the table row almost the same behaviour as the <a> tag.
This is my solution:
jQuery You can add this for example to a standard included javascript file
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 1){
window.location.href = url;
}
else if(click == 2){
window.open(url, '_blank');
window.focus();
}
return true;
}
});
HTML Now you can use this on any <tr> element inside your HTML
<tr url="example.com">
<td>value</td>
<td>value</td>
<td>value</td>
<tr>
When i want simulate a <tr> with a link but respecting the html standards, I do this.
HTML:
<table>
<tr class="trLink">
<td>
Something
</td>
</tr>
</table>
CSS:
tr.trLink {
cursor: pointer;
}
tr.trLink:hover {
/*TR-HOVER-STYLES*/
}
tr.trLink a{
display: block;
height: 100%;
width: 100%;
}
tr.trLink:hover a{
/*LINK-HOVER-STYLES*/
}
In this way, when someone go with his mouse on a TR, all the row (and this links) gets the hover style and he can't see that there are multiple links.
Hope can help someone.
Fiddle HERE
This saves you having to duplicate the link in the tr - just fish it out of the first a.
$(".link-first-found").click(function() {
var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
//Style
.trlink {
color:blue;
}
.trlink:hover {
color:red;
}
<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>
Something along these lines perhaps? Though it does use JS, but that's only way to make a row (tr) clickable.
Unless you have a single cell with an anchor tag that fills the entire cell.
And then, you shouldn't be using a table anyhow.
After reading this thread and some others I came up with the following solution in javascript:
function trs_makelinks(trs) {
for (var i = 0; i < trs.length; ++i) {
if (trs[i].getAttribute("href") != undefined) {
var tr = trs[i];
tr.onclick = function () { window.location.href = this.getAttribute("href"); };
tr.onkeydown = function (e) {
var e = e || window.event;
if ((e.keyCode === 13) || (e.keyCode === 32)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
this.click();
}
};
tr.role = "button";
tr.tabIndex = 0;
tr.style.cursor = "pointer";
}
}
}
/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));
To use it put the href in tr/td/th that you desire to be clickable like: <tr href="http://stackoverflow.com">.
And make sure the script above is executed after the tr element is created (by its placement or using event handlers).
The downside is it won't totally make the TRs behave as links like with divs with display: table;, and they won't be keyboard-selectable or have status text. Edit: I made keyboard navigation work by setting onkeydown, role and tabIndex, you could remove that part if only mouse is needed. They won't show the URL in statusbar on hovering though.
You can style specifically the link TRs with "tr[href]" CSS selector.
I have another way. Especially if you need to post data using jQuery
$(document).on('click', '#tablename tbody tr', function()
{
var test="something";
$.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){
window.location.href = "http://somepage";
});
});
Set variable sets up variables in SESSIONS which the page you are going to can read and act upon.
I would really like a way of posting straight to a window location, but I do not think it is possible.
Thanks for this. You can change the hover icon by assigning a CSS class to the row like:
<tr class="pointer" onclick="document.location = 'links.html';">
and the CSS looks like:
<style>
.pointer { cursor: pointer; }
</style>
This method is here to give you a choice. Old css trick: filling the parent with position absolute.
<table>
<tr style=position:relative>
<td><a href=# style=position:absolute;inset:0></a>some
<td>cells
<td>in
<td>a row
</table>
inset:0 is a shorthand for top:0;right:0;bottom:0;left:0
we put <a> inside first <td> because this is a good chance to keep validity: only <td> can be a child of <tr>. But you can place it anywhere in the table and it will work.
Can you add an A tag to the row?
<tr><td>
</td></tr>
Is this what you're asking?