I am using this carousal from ng-bootstrap :
<ngb-carousel [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="assets\fsfhjllz_vegetables-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit:cover;">
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="assets\vh9oeys6_fruit-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit: cover;">
</div>
</ng-template>
</ngb-carousel>
And it shows this text on top of image like:: slide 1 of 2 .
How do I remove this text and only show image.
It is showing up as this when inspected in browser::
<div role="tabpanel" class="carousel-item" id="slide-ngb-slide-1">
<span class="sr-only"> Slide 2 of 2 </span> // this one
Here is the source code of this peace:
<span class="sr-only" i18n="Currently selected slide number read by screen reader##ngb.carousel.slide-number">
Slide {{i + 1}} of {{c}}
</span>
I see 2 possibilities to hide this text:
add the CSS to hide .carousel-inner .sr-only to hide this element, eg
.carousel-inner .sr-only {
display: none;
}
set the value of the translation key ngb.carousel.slide-number to an empty string. Guidelines on internatiolization.
Related
I am generating a dialog box on a private Angular 6 app and based on how the designer wants, it sits too low unless of course my screen height is reduced, it's responsive and creates a cdk-overlay that has
style="justify-content: center; align-items: center;"
The documentation for angular 6 dialog here: https://v6.material.angular.io/components/dialog/overview
Unfortunately I don't see a config option or parameters that can set a max distance from the top, for example I never want the box further than say 200px from top. Any thought's or ideas on accomplishing this? Here is the general code driving all of this:
.ts code:
this.blahDialog.open(this.dialogTemplate, 'test', {
maxWidth: '300px',
data: {announceHeader: this.announceHeader, announceTitle: this.announceTitle, announceBody: this.announceBody}
});
this.announce = false;
pre html template:
<ng-template #dialogTemplate>
<div class="customer-notification">
<div class="customer-notification-header">
<p><img src="../../../images/blah.svg" alt="Blah"> {{ announceHeader }}</p>
</div>
<div class="customer-notification-body">
<h3 mat-dialog-title class="customer-notification-title">{{ announceTitle }}</h3>
<p mat-dialog-content class="customer-notification-content">{{ announceBody }}</p>
<div class="spacer-12"></div>
<div mat-dialog-actions class="dialog-buttons" layout="row">
<button ng-disabled="false" mat-raised-button id="got-it" class="outline-btn-prtl" color="primary" (click)="blahDialog.close('test', true)">GOT IT</button>
</div>
</div>
</div>
</ng-template>
The generated code is:
<div class="cdk-global-overlay-wrapper" dir="ltr" style="justify-content: center; align-items: center;"><div id="cdk-overlay-2" class="cdk-overlay-pane" style="max-width: 300px; pointer-events: auto; position: static;"><div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div><mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c40-45 ng-trigger ng-trigger-slideDialog ng-star-inserted" tabindex="-1" id="mat-dialog-0" role="dialog" style="transform:none;opacity:1;0:transform;1:opacity;opacity:1;transform:none;webkit-opacity:1;webkit-transform:none;"><!----><div _ngcontent-c37="" class="customer-notification ng-star-inserted" style=""><div _ngcontent-c37="" class="customer-notification-header"><p _ngcontent-c37=""><img _ngcontent-c37="" alt="AbacusNext" src="./blah"> Announcement</p></div><div _ngcontent-c37="" class="customer-notification-body"><h3 _ngcontent-c37="" class="customer-notification-title" mat-dialog-title="">24/7 Support Tier</h3><p _ngcontent-c37="" class="customer-notification-content" mat-dialog-content="">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><div _ngcontent-c37="" class="spacer-12"></div><div _ngcontent-c37="" class="dialog-buttons" layout="row" mat-dialog-actions=""><button _ngcontent-c37="" class="outline-btn-prtl mat-raised-button mat-primary" color="primary" id="got-it" mat-raised-button="" ng-disabled="false"><span class="mat-button-wrapper">GOT IT</span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button></div></div></div></mat-dialog-container><div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div></div></div>
Looks like the dialog-config.d.ts accepts an object with top, bottom, left or right and the position. So in my request for help, it looks like this is all I needed to add:
position: {top: '200px'}
or
this.blahDialog.open(this.dialogTemplate, 'test', {
maxWidth: '300px',
position: {top: '200px'},
data: {announceHeader: this.announceHeader, announceTitle: this.announceTitle, announceBody: this.announceBody}
});
this.announce = false;
Simple enough but instead of deleting someone else might run into the same problem.
I am trying to specify some gap between two rows while displaying mat cards. But it is not showing properly after using flex.
This is the HTML file:-
<div fxLayout="row wrap" fxLayoutAlign="space-around">
<mat-card class="list-card" *ngFor="let uri of urlData" fxLayoutGap="20px">
<mat-card-header>
<mat-card-title>{{uri.title}}</mat-card-title>
<mat-card-subtitle>3 weeks ago</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg(58 kB)
https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg
" alt="img alt title">
<mat-card-content>
<a href="https://medium.....64" class="mat-caption">
{{uri.documentURL}} </a>
<!-- <section> -->
<mat-chip-list>
<mat-chip>Angular</mat-chip>
</mat-chip-list>
<!-- </section> -->
<p>
{{uri.description}}
</p>
</mat-card-content>
<mat-card-actions>
<mat-icon>share_outline</mat-icon>
<mat-icon>bookmark_outline</mat-icon>
</mat-card-actions>
</mat-card>
</div>
This is the css:-
.list-card{
max-width: 260px;
}
There are two options to do that
1: Use flexLayoutGap as you had done for row gap, but you need to customize your structure as mention here
for bottom gap you need to use flex column as well.
2: Use margin-bottom on your card class .list-card
.list-card{
margin-bottom: 20px;
}
.list-card{
max-width: 260px;
margin: 10px;
}
try this code
I created a css modification to change the modal width to 50% against 100% of the view. But the class modal-content is duplicated against modificated.
CSS
.modal-content{
width: 50%;
}
HTML
<ng-template #content>
<div class="modal-content">
<div class="modal-header">
<i class="fa fa-heart"></i> A
</div>
<div class="modal-footer">
<i class="fa fa-heart"></i> B
</div>
</div>
</ng-template>
I also faced the same issue in my development and i found the solution with help of windowClass in ng-bootstrap
const modalRef = this.modalService.open(UserPasswordComponent, {
windowClass: 'custom-modal-width' // add a custom class here where you open the modal
});
In your style.css control the width
.custom-modal-width .modal-content {
width: 50%;
}
make sure to remove your model-content class in your template
I am using foundation 6 reveal modal window and when you click to open part of the scroll bar leaves where my fixed nav is and shifts content to the right about 5 to 10 px
<a class="button" data-open="exampleModal1">View users</a>
<!-- This is the first modal -->
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome!</h1>
<p class="lead">Users List!</p>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">x</span>
</button>
</div>
This is a know issue, see discussion here.
I use the following Foundation CSS overwrite solution:
body.is-reveal-open {overflow: auto !important; height: auto; position: relative;}
.reveal-overlay {overflow: initial !important; position: absolute;}
Here I have a login screen consisting of a high resolution image background, and a simple login card, which I want to center in the middle of the screen.
How can I center the card vertically and horizontally in the parent, which is a simple div with a background image? Here is my HTML, for which I have not made any external CSS classes yet:
<div style="background-image: url('./res/img/bg-2.jpg'); width: 100%; height: 100%; background-size: cover;" layout-align="center center">
<md-card style="width: 30%; margin: 0;" layout-padding md-whiteframe="10">
<form name="loginForm" novalidate ng-model="loginForm">
<h2 style="margin-top: 0;">Login</h2>
<md-input-container class="md-block" flex-gt-sm>
<label>Username</label>
<input type="text" ng-model="username">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Password</label>
<input type="text" ng-model="password">
</md-input-container>
<div layout="row">
<span flex></span>
<md-button class="md-primary md-raised" ng-click="login.login(username, password)">Login</md-button>
<md-button ng-click="login.register()">Register</md-button>
</div>
</form>
</md-card>
</div>
I've already fiddled with flexboxes and layout-align. Using the layout-align attribute of the card allowed me to center it horizontally but not vertically. Another question's answer--pertaining to divs only--said to style the child with display: inline-block; and the parent with text-align: center;, but this only centered the card horizontally and aligned the textfields and text to the center of the card as well (I definitely don't want that). Any help is greatly appreciated as I am very new to CSS and web-programming.
You need both a layout and layout-align attribute on your containing div element, so:
layout="row" layout-align="center center"
See example here - http://codepen.io/parky128/pen/PGxGrX
See the examples in the docs - https://material.angularjs.org/latest/layout/alignment