can anyone explain why this can happen? when I use this command
<mat-list>
<mat-list-item>
<img matListAvatar>
<mat-divider></mat-divider>
<p mat-line-end class="abu">Andika Ristian</p>
<p mat-line class="abu">My Name Is</p>
<img mat-line-end src="assets/imgs/panah.png">
</mat-list-item>
</mat-list>
the result will be like this
but if i use the command like this with the same font as above.
<mat-list>
<mat-list-item>
<img matListAvatar>
<mat-divider></mat-divider>
<p mat-line-end class="abu">Andika </p>
<p mat-line-end class="abu">Ristian </p>
<p mat-line class="abu">My Name Is</p>
<img mat-line-end src="assets/imgs/panah.png">
</mat-list-item>
</mat-list>
The result will be like this
I'm expected the result like the second picture but i think if i use the second command, it's not a solution to solve this. And for addition, i try to make the text align is right. the result will be like this
as the image above, the text is not same line with the other one. Thanks before
Just increase the width of your name.
.abu {
width: 150px;
}
Related
I am trying to automate a form with Cypress. I managed to get all the input fields except the birth date field.
CSS looks like this:
CSS picture
And my code is:
cy.iframe('#oneid-iframe').find('#InputDOB').type('01011990').should("have.value", "01/01/1990")
Unfortunately Cypress fails to type this value in the field.
Thank you in advance for your help.
Kind regards,
You should look at the devtools to see what's in the DOM.
This problem can happen if the HTML in your screenshot is inside a shadow root, in which case this would be your code
it('tests DOB', {includeShadowDom: true}, () => {
cy.iframe('#oneid-iframe')
.find('#InputDOB')
.type('01011990')
.should("have.value", "01/01/1990")
})
This is just a guess, and the question is why do other input work.
But you should try it in case.
Try this:
cy.get('#oneid-iframe').its('body').find('#InputDOB').click().type('01011990')
Can you try this?
cy.iframe('#oneid-iframe').find('#InputDOB').invoke('removeAttr','type').type('01/01/1990').should("have.value", "01/01/1990");
<label data-testid="InputDOB-wrapper" class="input-text input-DOB displayed" for="InputDOB">
<span data-testid="InputDOB-title" class="field-name">Birth Date</span>
<div data-testid="InputDOB-container" class="input-wrapper field-error"><span class="mask"><span class="birth-date">Birth Date </span>dd/mm/yyyy</span><input type="text" autocapitalize="none" autocomplete="on" autocorrect="off" spellcheck="false" tabindex="0" id="InputDOB" data-testid="InputDOB" inputmode="numeric" aria-label="Birth Date" aria-required="true" aria-invalid="true" aria-describedby="InputDOB-error" value=""></div>
<div class="error-container input-error input-error-text displayed" style="height: 30px;">
<p class="input-error input-error-text displayed" id="InputDOB-error" data-testid="InputDOB-error" role="alert">Your birth date is required.</p>
</div>
I need to show the image from array. And the array is already in array.
Example like this
{
title:xyz
attachments: [
{
image:'xyz.com'
}]}
im showing like this but image is not showing just title is showing
<ion-card *ngFor="let x of art">
<img [src]="x.attachments.url || '/assets/shapes.svg'" class="image"/>
<div style="text-align: right;">{{x.title}}</div>
</ion-card>
but its not showing image Its showing unexpeted image of cross camera
[![enter image description here][2]][2]
That [ on the attachments line indicates that its an array of objects.
You need to access [0] like this:
<ion-card *ngFor="let x of art">
<img [src]="x.attachments[0].url || '/assets/shapes.svg'" class="image"/>
<div style="text-align: right;">{{x.title}}</div>
</ion-card>
I think to be safe you should also put a ? in there but this is just off the top of my head, I haven't double-checked it:
<ion-card *ngFor="let x of art">
<img [src]="x.attachments[0]?.url || '/assets/shapes.svg'" class="image"/>
<div style="text-align: right;">{{x.title}}</div>
</ion-card>
Basically, if I got the syntax right then it won't show an error if there are no attachments in that Art item.
It's called the "Angular Safe Navigation Operator" if you want to research it more.
I am currently new to Html and python. I would like to do some webscraping project but had some problem to get a text from a html.
My html is as shown below.
<ul class="icons">
<li><span class="img"><img src="https://google/meter-s.png" alt="" title="" class=""></span>71.63%</li>
<li><span class="img"><img src="https://google/money-s.png" alt="" title="" class=""></span>RM 799,000</li>
<li><span class="img"><img src="google/rental-s.png" alt="" title="" class=""></span>€ 2,000/mth</li>
<li><span class="img"><img src="https://google/yield-s.png" alt="" title="" class=""></span>3%</li>
</ul> /*
And I would like to read/get the 3% text at the end of the list. I tried with this
soup.find(attrs={'li':None}).find('span', class_ = "img").next_sibling
but I however end up getting only the first value in the list which is 71.63%. I hope anyone expert in this topic could help me. thank you.
I would just grab all of the li elements, select the last one, and grab the text from there. You can do that like this:
soup.find_all('li')[-1].text
I'm making a bunch of content boxes to render to the master. They all contain a background picture, a heading and content, all are ment to be optional. so if none = empty divs. -> removed.
it all seemed allright i used the #Umbraco.Field for text and #Umbraco.Media(CurrentPage.myMediaAlias).url for the bg picture. Using 'media picker' as datatype.
No problem leaving the heading and content fields blank.
But the problem started when there was no picture defined for the last box.
i got the:
Object reference not set to an instance of an object.
[No relevant source lines]
Since it is supposed to be optional to put in that picture, i would rather want a null back.
The media picker property is not mandatory. How can i get this to work?
#section contentMid2 {
<div class="c-box-wrapper">
<div class="c-box" id="c-box-3" Style="background-image: url(#Umbraco.Media(CurrentPage.box3Bg).Url )" >
<div class="transbox">
<div class="home-head-1"> #Umbraco.Field("mainHeading3") </div>
<div class="content-text1"><p>#Umbraco.Field("mainContent3")</p></div>
</div>
</div>
}
Untested - but something like this should work. They key being to use HasValue
if(#CurrentPage.HasValue("box3Bg"){
<div class="c-box" id="c-box-3" Style="background-image: url(#Umbraco.Media(CurrentPage.box3Bg).Url )" >
}
else{
<div class="c-box" id="c-box-3">
}
OR
#{
var inlineStyle = "";
if(#CurrentPage.HasValue("box3Bg"){
inlineStyle = background-image: url(#Umbraco.Media(CurrentPage.box3Bg).Url )
}
}
<div class="c-box-wrapper">
<div class="c-box" id="c-box-3" Style="#inlineStyle" >
<div class="transbox">
<div class="home-head-1"> #Umbraco.Field("mainHeading3") </div>
<div class="content-text1"><p>#Umbraco.Field("mainContent3")</p></div>
</div>
</div>
</div>
After some debuging and some help from #marco. i realized how to fix it:
<div class="c-box" id="c-box-3" Style="background-image: url(#(Umbraco.Media(CurrentPage.box3Bg.ToString())!=""?Umbraco.Media(CurrentPage.box3Bg).Url:Umbraco.Media(CurrentPage.box1Bg).Url))" >
It's a Shorthand, and still inside the style url: #(theobj!=empty?nah:yah) works like a charm.
But i had to convert theobj .ToString() before comparing or it or else it seems like .Media cant decide if it's int or string. even if the question was if it's nothing in there at all.
I have a strange situation here. The following Bootstrap3 based code looks fine in jsFiddle, but not when running anywhere else. As you can see from the links provided, the p text bleeds out of it's tag on my server, but looks fine in jsFiddle (both using bootstrap3).
Any idea what could be causing this? Thanks.
The code:
<form action="">
<div class="row"><div class="col-sm-12">
<h4>Step 1:</h4>
</div></div>
<div class="row"><div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<p class="form-control">Long description text text text text text text text text text text text text text text text...</p>
</div>
</div>
</div></div>
</form>
Here it is on my server: http://leke.ydns.eu/ac2/
...and on jsFiddle: http://jsfiddle.net/n2fole00/6JyFr/4/
Edit:
Here is a screenshot:
So it seemed bootstrap was setting the .form-control to 34px. I just over wrote the class like so
.form-control {
height: auto;
}
...and that took care of that.