I want to have a multiline textbox of max of 3 rows and I also want to modify it`s width and height size. How can I do that in mvc?
The following code is not working
#Html.TextBox("myTextBox", String.Empty, new { #style = "width: 150px; ,height : 80px; multiline = true", #MAXLENGTH = "2000" })
A html-textbox is always single-line. Use a TextArea instead:
#Html.TextArea("myTextArea", String.Empty, 10, 40, new { style=""})
You can alter the 10 (rows) and 40 (columns) for another width/height, or set it directly with width and height in the style.
#Html.TextArea("Foo", new { row = 3, style = "width:300px;height:30px;" })
Edit:
First of all, there is nothing called textbox on html spec. ASP.NET MVC ain't Web Forms. It is input element whose type attribute is set to text.
Second, show me how you do it. The multiline version of a text input is textarea.
Related
How to set pdf font size for table content using jspdf?
setFontSize doesn't work in my case.
Setting font size for text in a table using jspdf-autotable looks like this:
var doc = new jsPDF();
doc.autoTable({html: '#table', styles: {fontSize: 20}})
doc.save("table.pdf");
Edit this: jspdf.plugin.autotable.min.js
Find this part and edit fontSize: textColor:20,halign:"left",valign:"top",fontSize:10,cellPadding:5
the default size is 10 and I change it to 7:
textColor:20,halign:"left",valign:"top",fontSize:7,cellPadding:5
Before printing, make a copy of the table object.
Let's say:
let temporalTable = document.getElementsByClassName("table")[0];
Then apply a style to this object. You can use plain JS functions.
And finally:
html2canvas(temporalTableWithNewStyles)
.then((canvas: any) => {
doc.addImage(canvas.toDataURL("image/jpeg"), "JPEG", 0, 50, doc.internal.pageSize.width, element.offsetHeight / 5 );
doc.save(`Report-${Date.now()}.pdf`);
})
I'm building a 'natural language' search form using a series of inline select inputs, using jQuery Select2 for styling. The widths of the Select2 inputs appear to be set to the width of the selected option on initialisation, which is great. I just can't work out how to get the width to update when the selected option is changed. Any ideas?
Many thanks!
Try to add this to yor CSS file:
.select2-container {
width: 100% !important;
}
It solved my resize problems with select2
(Edited: I do not use placeholders)
You can use window resize function.
Example:
// Fix select2 width
$(window).on('resize', function() {
$('.form-group').each(function() {
var formGroup = $(this),
formgroupWidth = formGroup.outerWidth();
formGroup.find('.select2-container').css('width', formgroupWidth);
});
});
I know this is an old post However, I had an issue when I used NMC's code.
As I can't comment on his answer, after using his code I had some annoying scrollbars appearing after using the select2 dropdowns, to fix this I used width auto instead.
.select2-container {
width: auto !important;
}
Just had to do something like this for a site
$(e).on("select2:closing", function(e) {
if (e.hasOwnProperty('params') &&
e.params.hasOwnProperty('args') &&
e.params.args.hasOwnProperty('originalEvent') &&
e.params.args.originalEvent.hasOwnProperty('target')) {
var newWidth = $(e.params.args.originalEvent.target).width();
var id = $(e.params.args.originalEvent.target).attr('id');
var container = $("span[aria-labelledby=\""+id.split("-result")[0]+"-container"+"\"]");
$(container).parents('span.select2').width(newWidth + 21);
}
});
This is probably not fool-proof and is tied to the current API. But it gets the width of the element in the dropdown before the dropdown closes and then applies that to the container.
One thing of note, you may need to float the dropdown items to get their real size.
.select2-results__option {
float: left;
clear: both;
}
$('.select2-search__field').attr('style','width:auto');
$('.select2-search__field[placeholder=""]').attr('style','width:10px');
For dynamically resize a select2 you can use width: 'style' option as below:
$('#field_'+field.name).select2({
placeholder: "select a option...",
maximumSelectionLength: 1000 ,
allowClear: true,
...
width: 'style',
data: data
});
And next you have to use style="width:100%;" as attribute for your select tag.
<select class="input-element-item fontsize13" id="select2" style="width:100%;" >
<option></option>
</select>
For other than problems of responsive width, read the documentation of Select2. Everything is explained.
https://select2.org/appearance#container-width
<select class="js-example-responsive" style="width: 50%"></select>
$(".js-example-responsive").select2({
width: 'resolve' // need to override the changed default
});
While I'm using Umbraco 7.2.1, I want the image I insert to be responsive (img-responsive) of bootstrap.
How can i do that?
I'm not sure how you are adding the images to your pages but I had this problem when I started using the new grid layout in Umbraco 7.2.
So if you are also using the grid layout what you need to do is open the view "Partial Views\Grid\Editors\Media.cshtml" and add the class there.
...
<img src="#url" class="img-responsive" alt="#Model.value.caption">
...
This will add the class to ALL images added to the grid layout with the standard "Image" grid editor.
You can add your own custom class to to images in
~/umbraco_client/tinymce3/plugins/umbracoimg/img/image.js
Look for where it says tinymce.extend(). It should end up looking something like this:
tinymce.extend(args, {
src: nl.src.value,
width: nl.width.value,
height: nl.height.value,
alt: nl.alt.value,
title: nl.alt.value,
rel: nl.orgWidth.value + ',' + nl.orgHeight.value,
class: 'img-responsive'
});
I've only done this in Umbraco 6, so hopefully the answer is still the same in Umbraco 7.
I don't advise altering anything in the /umbraco/ or /umbraco_client/ folders since any future updates will undo your changes, forcing you to reapply them.
Assuming you want to add a responsive class to images entered in the rich text editor, I would recommend creating a new css rule for img elements that adds the relevant properties from .img-responsive.
For example:
You add a rich text data type called bodyText to a document type in Umbraco. In your template for this document, wrap the rendering call in an element with the class .bodyText.
<div class="bodyText">
#Umbraco.Field("bodyText")
</div>
In your stylesheet, create a new rule for .bodyText img that inherits the properties from the .img-responsive class.
.bodyText img {
max-width: 100%;
height: auto !important;
}
Note !important on the height property. This is added to ensure that the inline-style added for height are overridden. When an editor changes the dimensions of an image in the rich text editor, tinyMCE will add the new dimensions to the image's inline style attribute, thus killing the responsive height.
I did it very easily in Umbraco 7.5.5, change /Umbraco/Js/umbraco.services.js:
$timeout(function () {
var imgElm = editor.dom.get('__mcenew');
var size = editor.dom.getSize(imgElm);
if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);
// images must be responsive: commented 3 lines of code, added addClass with img-responsive,
// var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
// editor.dom.setAttrib(imgElm, 'style', s);
editor.dom.addClass(imgElm, 'img-responsive');
editor.dom.setAttrib(imgElm, 'id', null);
if (img.url) {
//var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
var src = img.url;
editor.dom.setAttrib(imgElm, 'data-mce-src', src);
}
}
}, 500);
How to add more textfields in a view on clicking a button in the same view in sproutcore?
I have a sliding pane with particular number of textfields. On clicking a button, I need to add more number of text field in the same view.
Or,
I should be able to select the number from a select button view and show those many number of textfield in the same view.
I would recommend using a SC.ListView for this purpose.
You should have a SC.ArrayController whose content is an array containing objects that represent each text field. This may be as simple as something like this:
MyApp.myController = SC.ArrayController.create({
content: [
SC.Object.create({ someProperty: "Text field value 1" }),
SC.Object.create({ someProperty: "Text field value 2" }),
SC.Object.create({ someProperty: "Text field value 3" })
]
});
Next, you'll create your SC.ListView and bind it's content to the controller, and create the exampleView whose content is bound to the someProperty property of the objects:
MyApp.MyView = SC.View.extend({
childViews: 'scrollView addButtonView'.w(),
scrollView: SC.ScrollView.extend({
layout: { top: 0, left: 0, right: 0, bottom: 50 },
contentView: SC.ListView.extend({
contentBinding: 'MyApp.myController.arrangedObjects',
rowHeight: 40,
exampleView: SC.View.extend({
childViews: 'textFieldView'.w(),
textFieldView: SC.TextFieldView.extend({
// Add a little margin so it looks nice
layout: { left: 5, top: 5, right: 5, bottom: 5 },
valueBinding: 'parentView.content.someProperty'
})
})
})
}),
addButtonView: SC.ButtonView.extend({
layout: { centerX: 0, bottom: 10, width: 125, height: 24 },
title: "Add Text Field",
// NOTE: The following really should be handled by a statechart
// action; I have done it inline for simplicity.
action: function() {
MyApp.myController.pushObject(SC.Object.create({ value: "New Field" }));
}
})
});
Now, when you click the "Add Text Field" button, it will add a new object to the controller array which will automatically re-render the list view with the new object and hence, the new text field.
A couple of notes:
This uses a SC.ScrollView in conjunction with the SC.ListView, you will almost always want to do it this way.
Since we are using standard bindings (not SC.Binding.oneWay()), editing the text fields will automatically update the someProperty property in the objects in MyApp.myController and vice versa: if you update the value via some other means, the text field should automatically update as well.
This should not be used for a large list as using the childViews method of view layout can be slow. If you need performance, you should change the exampleView to a view that overrides the render() method and manually renders a text input and sets up the proper change events and bindings.
Lastly, I can't remember if the proper syntax for the text field's valueBinding is parentView.content.someProperty or .parentView.content.someProperty (notice the period at the beginning). If the first way doesn't work, try adding the . and see if that works.
Like Topher I'm assuming you're using SproutCore not Ember (formerly SC2).
If you need to add an arbitrary child view to an arbitrary location on your view, you want view.appendChild. In the button's action, you would do something like this:
this.get('parentView').appendChild(SC.View.create({ ... }))
If you go this route, you'll have to figure out the layout for the new view yourself. If you don't need to precisely control the layout, then go with Topher's solution - the ListView does the layout piece for you.
I have problem with ASP.NET MVC Telerik Grid.
In my grid I have comment column and some columns contains too large text.
This effects to row height. I need that all rows have same height.
How I can reduce the text? I tried to add HTML abbr, but it doesn’t work.
Best regards Paul.
Using custom formatting, you can check the length of your text, and if the text length is greater than a certain number, you can limit the length by using substring. For example, if your comment column is called "Comment", you could do something like this:
Html.Telerik().Grid(Model)
.Name("MyGrid")
.CellAction(cell =>
{
if (cell.Column.Title != null)
{
if (cell.Column.Title.Equals("Comment"))
{
if (cell.DataItem.Comment.Length > 25)
{
cell.Text = cell.DataItem.Comment.Substring(0, 25) + "...";
}
}
}
});
Update
You asked about showing the complete comment. I don't know of a simple way built into the telerik control, but you can do it using css. I am using css code from kollermedia.at, but there are lots of examples of css tooltips if you want a different style.
In your css, put something like this:
/* tooltip */
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
Then change the line in your view to this:
cell.Text = "<a class=\"tooltip\" href=\"#\">" + cell.DataItem.Comment.Substring(0, 25) + "<span>" + cell.DataItem.Name + "</span></a>";
When you hover over the shortened text, the complete text is displayed in a tooltip.