I have a situation where the text to select is too long and doesn't fit in the list width or in the selected field. So at least I need to show on mouse hover the complete name using the title attribute in span.
I tried this:
<ui-select ng-model="f.fieldb.value">
<ui-select-match>
<span ng-bind="$select.selected.nm" title="$select.selected.nm"></span>
</ui-select-match>
<ui-select-choices repeat="item in (fieldsList | filter: $select.search)">
<span ng-bind="item.nm" title="f.item.nm"></span>
</ui-select-choices>
</ui-select>
but I get this (note that the text shown next to the mouse pointer is incorrect):
Is it possible to get the correct names?
You need to evaluate them as expressions like so:
title="{{f.item.nm}}"
You are currently setting the title as the string "f.item.nm", not the value of nm held in the item object
Related
I am trying to get my text to wrap around and display in multiple lines in Office UI Fabric's DetailsRow. At the moment some of my rows that have long text go off the screen, and I would like them to wrap around so the user does not have to scroll to read the entire row.
This is my GroupedList
<GroupedList
items={this._items}
onRenderCell={this._onRenderCell}
groups={this._groups}
selectionMode={SelectionMode.none}
compact={true}
/>
This is my render method for each cell.
_onRenderCell = (nestingDepth, item, itemIndex) => {
return (
<DetailsRow
columns={this._columns}
groupNestingDepth={nestingDepth}
item={item}
itemIndex={itemIndex}
selection={this._selection}
selectionMode={SelectionMode.none}
onClick={() => this.insertComment(item.key, item.link)}
/>
);
};
Any ideas on how to make the text wrap? I am a beginner when it comes to styling.
If you have specific columns whose text are known to require more than "1 line" of text, you can use the isMultiLine property on the column. This is the example that sets isMultiLine to true for a column to wrap the text, which in turn enlarges the height of the corresponding row: "DetailsList - Variable Row Heights".
Within a series of check boxes (lets say 3 options) I am looking to target a specific input element on the checking/unchecking of the associated label.
HAML
.choice-select-button
= check_box_tag("order[recipes][]", recipe.id, selected)
= label_tag do
= t(".step_4.tick_box_to_select")
Renders HTML
<div class="choice-select-button">
<input type="checkbox" name="order[recipes][]" id="order_recipes_" value="6" checked="checked">
<label>Click to select</label>
</div>
Each <input> is assigned same id, namely id="order_recipes_" so if I give set <label for="order_recipes_"> and the user then 'un-checks' the label then only the first input on the page with the id="order_recipes_" is styled according to my css instructions.
The only differentiator I can see for the choice-select-button.input is it's value. As such I was looking at giving the label a for= that targets inputs with the id="order_recipes_ AND value="6". First up, is this doable, and secondly, is the best way to do something like this or is there a much more simple method?
Thanks in advance.
According to the rrails doc:
check_box_tag(name, value = "1", checked = false, options = {}) Link
Creates a check box form input tag.
Options
:disabled - If set to true, the user will not be able to use this
input.
Any other key creates standard HTML options for the tag.
you can generate different ids like this:
check_box_tag("order[recipes][]", recipe.id, selected, {id: recipe.id})
If i use below , button display bigger.
<i class="icon-plus"></i>Add
If i use below , button display smaller than above code.
#Html.ActionLink("Add", "xx", "Law", new { _lawfileid = -1, baseappid = ((ObjectModelLibrary.Law)ViewData["currentLaw"]).LawID }, new { #class = "btn btn-primary icon-plus" })
How can i change Html.Actionlink like a href i ?
What is difference between actionlink and href or how can i set same size for both ?
The reason for your issue is that in the first line of code you have an element inside another element. Whereas in the second line of code you have a single element with extra class.
Similar question is already answered on stackoverflow. Please find the link below
Create an ActionLink with HTML elements in the link text
Since you need to build an element inside an element use #Url.Action as mentioned in the above link.
I've been tryin to find an example of the syntax for getting an html 'title' for a string when using Html.Encode(). I want to display the full name in the mouseover title, if it's too long.
Is there a way to do this without wrapping the string in a < span >, i.e.
<span title = "<%=Html.Encode(model.Name) %>"> //displays the full name on mouseover
<%=Html.Encode(model.Name.Substring(0, 10))%>... //displays the name up to a max length
</span>
Or should I just do it this way?
Thanks!
Without a containing element, where are you going to hang your title?
So, yes, you should wrap it in an inline element like span
Here is a portion of my code:
var styles:String = ".keyword{color: #ff0000;} .comment{color: #00ff00;}";
var myStyleSheet:StyleSheet = new StyleSheet();
myStyleSheet.parseCSS(styles);
myTextArea.htmlText = '<span class = "keyword"> red </span> uncolored <span class = "comment"> green text</span>';
Everything is fine till this point, i can edit my text, of course everything is showed in black, and the html-tags are ignored. But when I put this code in myTextArea.styleSheet = myStyleSheet;
my text will be colored as i want it to be, but the textArea will become uneditable (no blinking pointer, no reaction on keyboard press).
After each keyboard-press (or if the time between two key-presses is bigger than x milliseconds ) i will re-render the textArea.text and append the <span class = "keyword"> where needed </span> tags and put it into the textArea.htmlText, but can't seem to figure it out how to do it when style is applied.
Sadly enough css and text input are incompatible. The only workaround is to use TextFormat instead. Sorry for being disappointing...