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.
Related
I need to make Vaadin 8 Grid cell text wrap. I tried to follow this link in Vaadin Forum.
https://vaadin.com/forum/thread/16908210/vaadin-8-grid-wrap-long-lines
My Grid contains Strings only in every cell.
I have a StyleGenerator class like this:
public class MyGridStyleGenerator<ArrayList> implements StyleGenerator {
public String apply(Object item) {
return ".m-grid-cell-wrapper";
}
}
I am converting from Vaadin 6 so I still use old theme ("../reindeer/legacy-styles.css")
In my styles.css file, there is:
.m-grid-cell-wrapper {
word-wrap: break-word;
white-space: normal;
}
In the class that creates the Grid, I have:
Grid<List<String>> table = new Grid<>("My Test Grid");
//skip setting items code since the cell content shows up fine.
MyGridStyleGenerator style = new MyGridStyleGenerator();
table.setStyleGenerator(style);
table.setBodyRowHeight(35); // more than two lines of text height
I set each column width to a fixed value using setWidth() of Grid.Column so that more columns can be displayed in the given window.
The problem is that when the Grid is displayed, text longer than column width does not wrap.
What did I miss?
Thanks for any advice.
BTW, there is another question on this topic in Stack Overflow where the answer is to use label.setStyleName(ValoTheme.LAYOUT_HORIZONTAL_WRAPPING);
I don't have Label and don't use Valo style.
The CSS class controlling the Grid cell is .v-grid-cell, so I added the following in my styles.css file.
.v-grid-cell {
white-space: normal; }
This caused the text in Grid cell to wrap.
Having a small issue with tooltips in the editor, read the api but can't understand what it is saying and I can't seem to find examples anywhere that I can understand either.
I have set up a Classic Editor build, and all the buttons on the toolbar have tooltips with the default position below the button, I want to be able, just for this one instance of the editor, to change the tooltip position to above the buttons instead. The instance is set up like this:
ClassicEditor.create( document.querySelector( '#content' ) )
.then( editor => {
console.log( 'Editor was initialized', editor );
this.annEditorInstance = editor;
} )
.catch( err => {
console.error( err.stack );
} );
That creates an editor instance that is set up exactly as I want, except for the issue with the tooltip. How do I change this? Thanks in advance.
There are two approaches to the problem:
CSS
Tooltips elements have either .ck-tooltip_s or .ck-tooltip_n class. By default all CKEditor 5 tooltips have the former so you could override it in your styles and make it act like the later:
<style>
.ck.ck-tooltip.ck-tooltip_s {
bottom: auto;
top: calc(-1 * var(--ck-tooltip-arrow-size));
transform: translateY( -100% );
}
.ck.ck-tooltip.ck-tooltip_s .ck-tooltip__text::after {
top: auto;
bottom: calc(-1 * var(--ck-tooltip-arrow-size));
transform: translateX( -50% );
border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
}
</style>
JS
The UI of the editor is an MVC(VM) structure. The position of the tooltip can be controlled using the JS and the Button#tooltipPosition property ('s' or 'n').
E.g. you can access the toolbar UI elements using editor.ui.view.toolbar and change their properties:
editor.ui.view.toolbar.items.map( item => item.tooltipPosition = 'n' )
but note that not all toolbar items are buttons. Some, for instance, are dropdowns so you'd need to use item.buttonView.tooltipPosition = 'n' in that case. So unless you really want to use JS, I'd go with a simple CSS solution.
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);
In my app there is field change font Actually using that user can change the font of whole application.Is this possible actually if i have 100 field in my project (may be different different font size on every page ).How can user change the font size .so that it can reflect on whole application.As I goggled i found that there is functionality of zoom in and zoom out .It is not a good way to do that .? is there any way to change font of whole application?
You can create a style dynamically and apply it to all elements within body.
Demo
$('#select_font').on('change', function () {
var style;
var font = $(this).val();
if ($('head').find('style.font').length === 0) {
style = $('<style class="font">.font { font-size: ' + font + ' !important; }</style>');
$('head').append(style);
$('body *').addClass('font');
} else {
$('body *').removeClass('font');
$('style.font').empty();
style = '.font { font-size: ' + font + ' !important; }';
$('style.font').append(style);
$('body *').addClass('font');
}
});
This article shows a nice way of doing it in CSS only.
http://joshnh.com/2011/07/26/are-you-using-ems-with-your-media-queries/
Key is to only using em, then you can switch font size globally by changing the base for em.
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.