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.
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.
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!
I have a very general web page where I display information. I have this code in my .cshtml:
<div style="text-align: left">
Test <p style="color: #1e83ca;"> #Html.Label(Model.MemberName) </p>
Beruf #Html.Label(Model.ProfessionName)
Datum #Html.Label(Model.TestTakenDate.ToString())
</div>
I want differentiate the text that I display reading from the database from what is the fixed text. I am using the helper Label and there is no difference. I get all black text. How do I make only what is in the #Html.label in different color? OR what else can I use to make them look different.
I just did the following and it worked for me:
#Html.Label("This is a label", new { style = "color:#ff0000"})
As mentioned in my comments, try to use <span>. That will work !
#Html.Label(Model.ProfessionName, new {#class = "mylabel" })
in css
.mylabel
{
color: green;
}
Try giving your #Html.Label classes.
so in your css :
.database { color: #1e83ca; }
and in your cshtml
#Html.Label(Model.MemberName, new { #class = "database"} )
Can you specify the HTML attributes by supplying an additional parameter to the Label HTMLHelper?
Something like:
<%= Html.Label("This is a label", new { style : "color:#FF0000;" } ) %>
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.