I have a app.component.html and some images in .assets/images/
But browser annouce that ERROR TypeError: _co.url is not a function
Could you help me fix thí issue. Thanks
<mat-sidenav-container class="sidenav-container" autosize>
<mat-sidenav #sidenav class="mat-elevation-z4" mode="side">
<mat-nav-list *ngFor="let source of mSources">
<div mat-card-avatar [ngStyle]="{'background': url('../assets/images/abc-news.png')}" ></div>
<mat-list-item>{{source.name}}</mat-list-item>
</mat-nav-list>
</mat-sidenav>
</mat-sidenav-container>
Your formatting of the ngStyle value is incorrect. The value needs to be a string - as you have it, it is a function named 'url' because [ngStyle] will try to evaluate it as an expression. It should be:
[ngStyle]="{'background': 'url(\'../assets/images/abc-news.png\')'}"
But - since you aren't using an expression, you don't need [ngStyle] you can just use style:
style="background: url('../assets/images/abc-news.png');"
Related
SOLVED
I Simply did not have the closing a tag at the end. Sheesh....
I need help. I'm still a student so still learning. Any help would be appreciated. I'm lost.
I'm using bootstrap5, adding a carousel ("With captions" https://getbootstrap.com/docs/5.1/components/carousel/ for the full code.) to a page and a link in that slide on the h5.
After adding the link, the text went from white to blue and gives me this
"Cannot GET /WilliamVest/%E2%80%9CKeyWestPhotoGallery.html"
I've checked this address NUMEROUS times. Even said it out loud to myself. The link IS in the same folder as the rest of the project.
So why won't it work?
I tried to google and found "data-bs-target" does that have anything to do with it? Like I said, still new so still learning.
****Someone pointed out I missed the quotes in the link. Did not fix it.
I added that quote. It was discolored so I don't know where that came from but I think it's because you were right about the quotation style.
I commented that whole line out and started over. I just wanted to see the difference.
So now, the blue is gone in the lettering but now it won't even open another page to show an error. It does nothing.
First slide label
Key West Photo Gallery -->
This is my code snippet ---- KeyWestPhotoGallery.html is the link I'm trying to get to.
<!-- Carousel of Projects -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/palmLighthouse1.jpg" class="d-block w-100" alt="Key West Lighthouse">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-2"><a href=“KeyWestPhotoGallery.html>Key West Photo Gallery</a></h5>
<!-- <p>Some representative placeholder content for the first slide.</p> -->
</div>
You have:
<a href=“KeyWestPhotoGallery.html>
That is not a quote " as used in HTML, that is a Unicode Left Double Quotation Mark a.k.a. opening typographer's quote (a display character with no special meaning). So it thinks that is part of the URL that is why it is urlencoded into that address as %E2%80%9C
let path = "/WilliamVest/%E2%80%9CKeyWestPhotoGallery.html"
console.log(decodeURI(path))
Solutions include the following:
Remove it: <a href=KeyWestPhotoGallery.html> (Unquoted attribute-value syntax)
Or, replace it adding the missing closing quote: <a href="KeyWestPhotoGallery.html"> (Double-quoted attribute-value syntax)
Or, use single quotes: <a href='KeyWestPhotoGallery.html'> (Single-quoted attribute-value syntax)
In Angular Material, the default design of input directives is for the content within <label> to be displayed in the input element until the user enters some input, at which point it will float above the input element, as seen in all examples here.
Is there any way to force the labels to float above the input box at all times instead, even when no data has been entered?
I think the css class md-input-has-placeholder is what you need:
<md-input-container class="md-input-has-placeholder">
<label>Name</label>
<input type="text"/>
</md-input-container>
Plunker example here
Hope it helps.
The is an official feature for that: floatLabel="always"
The floatLabel property of can be used to change this default floating behavior. It can set to never to hide the label instead of float it when text is present in the form field control. It can be set to always to float the label even when no text is present in the form field control. It can also be set to auto to restore the default behavior.
<mat-form-field floatLabel="always">
<mat-label>Both a label and a placeholder</mat-label>
<input matInput [(ngModel)]="model.value">
</mat-form-field>
source, see the official form-field documentation
With Md-select this worked for me:
<md-input-container style="width: 200px;" md-input-has-placeholder>
<placeholder>Snack Types </placeholder>
<md-select ng-model="selectedOption">
<md-option ng-repeat="item in snacks" >
{{item.name}}
</md-option>
</md-select>
</md-input-container>
For the md-select element, occupy the following:
<md-input-container class="md-input-has-placeholder">
<label md-no-float="true" class="md-required">Snack Types</label>
<md-select ng-model="$ctrl.selection" ng-required="true" md-no-asterisk>
<md-option ng-value="option.id" ng-repeat="option in $ctrl.selection">{{ opcion.value}}</md-option>
</md-select>
</md-input-container>
I used the following CSS to change the label when data is being entered and highlight the other fields:
md-input-container:focus-within > label[class~="md-required"]{
transform: scale(1);
font-weight: bold;
}
And the following CSS so that the asterisk is always in color (you can put the color you want):
md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after{
color: rgb(255,87,10);
}
http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
I followed the above link from jquery mobile. It doesn't work as expected !
Can someone help
Try setting the height too:
<div data-role="controlgroup" data-type="horizontal">
<input type="text" id="search-control-group" data-wrapper-class="controlgroup-textinput ui-btn">
<button>Submit</button>
</div>
.controlgroup-textinput{
height: 20px;
padding-top:.22em;
padding-bottom:.22em;
}
DEMO
To anyone having the same issue after using the code from the jquerymobile demos!
If you copy html or css content from the demos page, make sure to remove all leading whitespaces (indentation) first and add your own!
The demos page uses some other invisible non breakable spaces that prevent proper css parsing in most browsers!
I had the same issue and when looking into the css parsed by chrome it was marking
" padding-top: .22em;"
as invalid css, because of those non breakable spaces.
I am creating custom grid editor and I would like to have more than one RTE inside of it. Currently, I am initializing RTE like this
<div unique-id="control.$uniqueId"
value="control.text1"
grid-rte configuration="control.config.rte">
</div>
This works fine for one instance of RTE. However, when I try to add 2nd or 3rd RTE in this manner, they are not initialized, instead I am getting multiline textbox.
So, how to add more than one RTE, and, is this best way to add RTE?
I had the same problem. I have solved the problem by adding $index. Like so:
<div unique-id="control.$uniqueId + $index"
value="control.text1"
grid-rte configuration="control.config.rte">
</div>
<div unique-id="control.$uniqueId + $index"
value="control.text1"
grid-rte configuration="control.config.rte"> </div>
The previous answer works when the control is inside the ng-repeat directive, ie
<tr ng-repeat="rowData in control.tabelsData">
<td>
<div
unique-id="control.$uniqueId + $index"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
</td>
</tr>
Otherwise yes, manually modifying the unique-id would be the answer for a known amount of multiple amount of Rich Text Editors in the editor
<div
unique-id="control.$uniqueId+1"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
<div
unique-id="control.$uniqueId+2"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
I have used JQM SimpleDialog2 in my app. I am having one textbox and button in that dialog. i can't able to get the value from input while click on button in dialog. i have used blank mode.. Here is my code.. I am getting empty value from this code. please correct me.
<div id="myDialog" style="display:none"
data-options='{"mode":"blank","top":"10%","headerClose":false,"blankContent":true}'
<Center>please enter Your Amount here</center>
<input id="txtAmt" name="amy" value="" type="text" placeholder="Amount">
<div data-role="navbar" data-grid="a">
<ul>
<li>Submit</li>
<li>Cancel</li>
</ul>
</div>
function getAmount()
{
alert("amount: "+$("#txtAmt").val());
}
i didnt try this using SimpleDialog but this works just fine for me:
function getAmount(){
alert (document.getElementById('txtAmt').value);
}
By the way i would recommend using the built-in Popup-Dialog function instead of SimpleDialog. See here: http://jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html