I am struggling to change the font size for MVC TextBoxFor?
I can change the font size when using:
input, textarea {}
But this changes all my input size's. I also tried to then add a css class to my TextboxFor:
#Html.EditorFor(model => model.UserName, new { #Class = "Mytextarea" })
css
.Mytextarea {
font-size: 0.85em !important;
height: 14px !important;
color: #333 !important;
/*font-family: inherit;*/
width: 300px;
}
This has had no affect.
My TextBoxFor's are huge and bulky and i have no way to change them, If possible i would like to set styling to change them all at once.
Edit:
So, you start your question off asking about TextBoxFor, but your actual code references EditorFor.
When using the EditorFor extension, you need to write a custom editor template to describe the visual components. If you don't, it will use the default template, which is where "text-box single-line" is coming from.
See this answer for a quick explanation on how to build a template that you can assign to the EditorFor helper. Or just use TextBoxFor like this.
#Html.TextBoxFor(model => model.UserName, new { #Class = "Mytextarea" })
Related
So I've been trying to find a way to tell Prettier to keep line breaks between attributes in HTML, for keeping code clear, but I'm coming up empty. I'm working in TypeScript React with Styled Components, don't know if that makes a difference for the answer. I've been wondering if this is a job for Beautify, but since I'm using prettier to auto-format files on commit I'm worried using both might get very messy.
Here is what I'm talking about:
<CustomInput
value={whatever}
width="100px"
height="32px"
background="#333"
borderColor="sandybrown"
onFocus={handleFocus}
onBlur={handleBlur}
onChange={evt => setWhatever(evt.target.value)}
/>
Notice the empty lines separating the different "categories" of attributes. Prettier automatically removes these. Is this possible to achieve?
Prettifiers aught to remove empty lines in my opinion
Perhaps you can use HTML comments
<CustomInput
value="{whatever}"
<!-- formatting -->
width="100px"
height="32px"
background="#333"
borderColor="sandybrown"
<!-- event handlers-->
onFocus={handleFocus}
onBlur={handleBlur}
onChange={evt => setWhatever(evt.target.value)}
/>
Or just do what is recommended:
const handleFocus = () => {}
const handleBlur = () => {}
window.addEventListener("load", function() {
const inp = document.querySelector("CustomInput");
inp.addEventListener("focus", handleFocus);
inp.addEventListener("blur", handleBlur);
inp.addEventListener("change", evt => setWhatever(evt.target.value));
});
CustomInput {
display: block;
width: 100px;
height: 32px;
background: #333;
border-color: sandybrown;
color: white;
}
<CustomInput value="{whatever}">Text</CustomInput>
It's indeed supposed to work the way you expect (just like it works in object literals). This is simply not implemented yet. There is an open pull request, but it seems to be abandoned.
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" } })
I'm trying to add a font awesome icon into a kendo UI ASP.NET Menu. Unfortunately I can't find an example at Kendo on how to do it. The code is as follows:
#(Html.Kendo().Menu()
.Name("PreferencesMenu")
.HtmlAttributes(new { style = "width: 125px; height:900px; border:0px;" })
.Direction("down")
.Orientation(MenuOrientation.Vertical)
.Items(items =>
{
items.Add()
.Text("Account");
items.Add()
.Text("Notification")
.Items(children =>
{
children.Add().Text("Email");
});
items.Add()
.Text("Theme");
})
)
Does anyone know how I could add a font-awesome icon before the .Text("Account"); ?
This seemed to work for me with a sample project.
If you change the .Text("Account")
To this
.Text("<span class=\"fa fa-arrow-up\"></span> Account").Encoded(false)
That should then show an arrow up next to Account. (Obviously change the Font Awesome element to one that you want.
edit: I have added the following sample for you showing this working at multiple levels and adding the font's at the child level
#(Html.Kendo()
.Menu()
.Name("men")
.Items(item =>
{
item.Add()
.Text("<span class=\"glyphicons glyphicons-ok\"> </span>some item")
.Items(i =>
{
i.Add().Text("<span class=\"glyphicons glyphicons-plus\"></span> Hello").Encoded(false);
}
)
.Encoded(false);
item.Add()
.Text("<span class=\"glyphicons glyphicons-thumbs-up\"> </span>some item")
.Items(i =>
{
i.Add().Text("Hello");
})
.Encoded(false);
})
)
The reason for setting .Encoded(false) is so that the rendering engine just passes the data and assumes it is safe code to write out it is the equivalent of doing
#Html.Raw("<p> some html here</p>")
By setting it to true the system just treats the incoming text as a string and doesn't try to interpret the text and then apply any "html/javascript" recognition eg. <p>I'm a paragraph</p> if encoding is set to true would render out as <p>I'm a paragraph</p> if false would give you the I'm a paragraph as it's own paragraph and the markup would be applied to the page.
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.
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;" } ) %>