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
Related
In Cypress, I'm trying to count how many elements (in this case how many buttons in li) contain text. When using "contains", the number of returned items is always equal to one because "contains" only gives the first item in the document containing the search text.
cy.get('li')
.contains('button', 'Submit')
.its('length')
.then(elLength => {
// I want to test here the number of all buttons in li elements containig word 'Submit'
}
Of course, this doesn't work that way, because elLength is always 1 (or 0 if no items found).
Is there any other method in Cypress that can return all elements with text, and I can count them?
Cypress get() uses the same selectors as jQuery. You can therefor use :contains to get all elements containing a text.
As Cypress contains() only includes visible DOM elements, you have to add :visible to get the same kind of behaviour.
To make sure only one visible button contains "Submit":
cy.get('button:visible:contains("Submit")').should('have.length', 1);
To make sure only one visible button inside a "li" element contains the text "Submit":
cy.get('li button:visible:contains("Submit")').should('have.length', 1);
To count the "li" elements that contain one or more visible "Submit" buttons:
cy.get('li:has(button:visible:contains("Submit"))').should('have.length', 1);
If you know the right amount of buttons that need to have that label, you could try:
cy.get('li').then($el => {
cy.wrap($el).find(".button").then($els => {
expect($els.filter(index => $els.eq(index).is(':contains(Submit)'))).to.have.length(your_amount);
})
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".
snippet code on img below
I want to assert text on p clas = jss94 jss102 jss127 jss264 jss265
This class is dynamic, and all the class before it also dynamic. So how to get the text or how to select the element if there's no static id/class/text on it?
You can use the withAttribute method:
.withAttribute('class', /jss\w+\sjss\w+/)
Please refer to the following:
https://github.com/DevExpress/testcafe/issues/4872#issuecomment-599919313
https://regex101.com/r/VR5mJ0/1
https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/examples-of-working-with-dom-elements.html#select-elements-with-dynamic-ids
See the ways to select elements with dynamic identificators here.
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
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.