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.
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
I have a django project
I have an models with a booleanField -> checkbox in the form
But I don't know why the checkbox is sticked to the label.
I try to select the html element to add specific css but the 2 elements move together...
current result: [ ]I have read... (the 2 elements are sticked)
expected result: [ ]......I have read...
models.py
class Aveugle(models.Model):
unb_ide = models.AutoField(primary_key=True)
unb_val = models.BooleanField("I have read ITBM procedure and want to unblind treatment", null=True, blank=True)
forms.py
unb_val = forms.BooleanField(label = _("I have read ITBM procedure and want to unblind treatment"))
Try:
This is a temporary solution, but it's just a patch, you need to handle css and html better to make it more solid.
In SAPUI5, there is no APIs to change anything the table cell itself.
The following code is to modify the style of the cell and control in the cell in formatter, but both of them adds style class to the control, not td.
Could anyone indicate how to change td style in a table?
editableFormatter: function(v, control) {
if(sap.ui.getCore().byId("btnEdit").getText()==="Edit") {
control.getParent().getCells()[2].addStyleClass('readonly');
control.addStyleClass('readonly');
}
}
I dont think you can apply readOnly using CSS. You need to use JQuery or Javascript to make the field readOnly.
Example:
document.getElementById("id").setAttribute("readonly", "true");
A table cell (<TD>) is not a SAPUI5 control, so getting the SAPUI5 parent from a Text will return the bound item (or HTML <TR>)
To get to the actual TD DOM object, first get the SAPUI control, and then its DOM parent using its jQuery object:
var td = control.getParent().getCells()[2].$().parent();
...and to set a css style to this TD DOM object, use standard Javascript:
td.className = td.className + " myCSSStyle";
PS note the space before the style classname
Definitely we need to manipulate DOM after document is ready,
I managed to get the data array and get cells using jquery:
for(var i = 0, j = parameters.length; i < j; i++) {
$('#'+table.getId()+'-rows-row'+i+'-col'+idx).addClass('readonly');
}
It works, but I wonder if there are better solutions.
Best Regards,
Mingquan
I'm new to vaadin. I came across with a bug that full name is not visible in twin-column component's values. I have very long names inside the left side of the twin-column. I increased the width of the component much as I can. But still some lines are there that not visible full name.
I tried to add some css, even that didn't work.
.v-select-twincol-options .v-select-twincol-break-word{word-wrap: break-word;}
I tried with this css line. Any wrong in here? Or any idea to solve this. Please help me on this..
Thank you in advance.
private TwinColSelect createTemplateSelectTwinColumn()
{
TwinColSelect twinColSelect = new TwinColSelect("Related Templates");
twinColSelect.setNullSelectionAllowed(true);
twinColSelect.setMultiSelect(true);
twinColSelect.setImmediate(true);
twinColSelect.setSizeFull();
Collection<File> templates = getTemplates();
Collections.sort((List<File>) templates, new Comparator<File>()
{
#Override
public int compare(final File f1, final File f2)
{
return f1.getName().compareTo(f2.getName());
}
});
for (File file : templates)
{
twinColSelect.addItem(file.getNodeId());
twinColSelect.setItemCaption(file.getNodeId(), file.getName());
}
return twinColSelect;
}
Method where I'm creating the twinColumn inside a FormLayout
Vaadin's TwinColSelect eventually results in two standard HTML option list controls in the DOM; see the DOM of this example: http://demo.vaadin.com/book-examples/book/#component.select.twincolselect.basic
word-wrap is, however, not possible on option list items.
Consider creating your "own" TwinColSelect from two Vaadin tables. Vaadin tables are much more flexible regarding CSS styling.
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