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.
Related
<input type="text" style="width:90px" value="This is a text for student with code: 30001"/></br>
<input type="text" style="width:90px" value="This is a text for student with code: 30002"/></br>
<input type="text" style="width:90px" value="This is a text for student with code: 30003"/></br>
I have several inputs with limited width containing some text which last letters of texts are more important to be visible.
How can I make my inputs to show last words?
I tried:
input{
text-align:right
}
But it was not helpful.
Please see this ample code.
Simply add style="direction: rtl;" to the input tag if you don't mind letters start appearing from the right.
You can do this using Javascript.
I use a helper function that will determine the width of text using its font-type, font-size and the text string. We get these using getComputedStyle(), this allows you to get the style directly from the CSS without having to add it statically and then pass those into the function. Apply the outcome of this function to a variable called textWidth.
Use this along with the input elements getComputedStyle(e.target).width set in CSS in a conditional and set it to elWidth. Then we run our main function displayText() through an eventListener and listen for the event, use the event.target to get the inputs width and run these through a conditional to see if the textWidth is greater than the elWidth.
const inputs = document.querySelectorAll('input')
const units = ['em', 'px', 'cm', 'mm', 'in', 'pt', 'pc', '%', 'rem']
function determineTextWidth(txt, family, size) {
if (determineTextWidth.c === undefined) {
determineTextWidth.c = document.createElement('canvas');
determineTextWidth.ctx = determineTextWidth.c.getContext('2d');
}
const fontspec = `${size} ${family}`;
if (determineTextWidth.ctx.font !== fontspec)
determineTextWidth.ctx.font = fontspec;
return determineTextWidth.ctx.measureText(txt).width;
}
function displayText(e) {
const fontSize = getComputedStyle(e.target).fontSize
const fontFamily = getComputedStyle(e.target).fontFamily
const textWidth = determineTextWidth(e.target.value, fontFamily, fontSize)
const elWidth = getComputedStyle(e.target).width
units.forEach(unit=>{
if(elWidth.includes(unit)){
textWidth > elWidth.split(unit)[0] ?
e.target.nextElementSibling.innerText = e.target.value : e.target.nextElementSibling.textContent = null
}
})
}
inputs.forEach(input => {
input.addEventListener('keyup', displayText)
})
.input {
font-size: 12pt;
width: 150px;
font-family: sans-serif;
}
.display {
margin-left: 1rem;
display: inline-block;
background-color: lightgreen;
color: darkgreen;
}
Enter input: <input class="input" type="text"> <span class="display"></span>
Basically, I'm creating a form component that is contained inside a v-dialog. The form component will have different child components that are rendered based on select input. So I have to set width of v-dialog to "unset", so that the width of the dialog will stretch to match its content.
The transition works when I toggle the value of width, eg: either 450px or 300px. The problem is that I don't know beforehand the width of the form contains in the dialog, so I definitely need to use dynamic width.
So far, I can not find anyways to achieve transition when using dynamic width. I was trying to get the width of the form component using refs, but setting width to unset, prevent the transition. By the way, the transition I'm talking about is the transition of the width, when using fixed width, it shows nice transition but not for dynamic width
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-dialog v-model="dialog" width="unset">
<template v-slot:activator="{ on }">
<v-btn color="red lighten-2" dark v-on="on">
Click Me
</v-btn>
</template>
<v-card>
<v-select v-model="selectedForm" :items="items">
</v-select>
<div v-if="selectedForm==='form-a'" class='form-a'>FormA</div>
<div v-if="selectedForm==='form-b'" class='form-b'>FormB</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text #click="dialog = false">
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-app>
</div>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
selectedForm: "form-a",
items: ["form-a", "form-b"],
dialog: false
};
}
});
codepen for using fixed width: https://codepen.io/duongthienlee/pen/MWaBLXm
codepen for using dynamic width: https://codepen.io/duongthienlee/pen/GRpBzmL
Noted that in the example i made in codepen, I defined width already, but the real case is that I don't know beforehand the width of form-a and form-b component. form-a and form-b width will be inherited by its parent div which is v-dialog, so that's why I set the width of v-dialog to be unset.
An example of what I mean "dynamic width": form-a has a select input. When user chooses an item, there will be a request to server to get input labels. So form-a will render multiple input fields based on the response body from server. The response body will contain label and default values information. So that makes the width of form-a becomes dynamic.
I think something like this can work for you.
Change v-dialog like so:
<v-dialog v-model="dialog" :width="forms.find(x => x.name===selectedForm).width">
Modify data() to return a forms prop:
data() {
return {
selectedForm: "form-a",
items: ["form-a", "form-b"],
dialog: false,
forms: [
{
name: 'form-a',
width: 200
},
{
name: 'form-b',
width: 1000
}
]
};
}
What you want to do is get the size of the rendered form, and then apply it to the dialog.
This is a common theme when attempting to animate content with dynamic dimensions.
One way to do this is by:
Set the form's visibility as hidden
Wait for it to render
Get the form's width and set it to the dialog
Unset the form's visibility
The tricky/hacky part is that you have to properly await DOM (setTimeout) and Vue ($nextTick) recalculations. I didn't have to await for Vue's $nextTick in this example, but you probably will if you're rendering nested form components:
<div class="form-container">
<div :style="formStyle('form-a')" class='form-a' ref="form-a">FormA</div>
<div :style="formStyle('form-b')" class='form-b' ref="form-b">FormB</div>
</div>
computed:{
formStyle(){
return form => ({
visibility: this.selectedForm == form ? 'inherit' : 'hidden',
position: this.selectedForm == form ? 'inherit' : 'absolute'
})
}
},
methods: {
async onSelectChange(form){
// async request
await new Promise(resolve => setTimeout(resolve, 1000))
this.selectedForm = form
this.recalculate()
},
async recalculate(){
// wait for DOM to recalculate
await new Promise(resolve => setTimeout(resolve))
const formEl = this.$refs[this.selectedForm]
this.dialogWidth = formEl.clientWidth
this.dialogHeight = formEl.clientHeight
},
...
}
Here's the working code to give you an idea:
https://codepen.io/cuzox/pen/yLYwoQo
If I understand you correctly, then this can be done using css. You can try replace all the fix width in the form with
width: fit-content;
For example in you codepen:
.form-a {
width: fit-content;
height: 350px;
background: blue;
}
.form-b {
width: fit-content;
height: 500px;
background: red;
}
The v-dialog renders into a div with class v-dialog:
It seems the animation only works when the the width is of known value, so it cannot be just "unset". The solution would be to get the width of the child element, and set the width of the v-dialog accordingly with a variable.
See VueJS get Width of Div on how to get the width of the child element.
Let me know if it works, I find this is very interesting.
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 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" })
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;" } ) %>