I Integrate Angular material 2 with jhipster 4 but elements worked without any css or animation . this is an example when i tape :
<md-card _ngcontent-jee-1="" class="app-input-section md2 md-card"> <md-input _ngcontent-jee-1="" placeholder="First name" class="md2 md-input"><div class="md-input-wrapper">
<div class="md-input-table">
<div class="md-input-prefix"></div>
<div class="md-input-infix">
<input class="md-input-element ng-untouched ng-pristine ng-valid" id="md-input-0-input" spellcheck="false" type="text">
<label class="md-input-placeholder md-empty md-float" for="md-input-0-input">
First name
</label>
</div>
<div class="md-input-suffix"></div>
</div>
<div class="md-input-underline">
<span class="md-input-ripple"></span>
</div>
<!--template bindings={}-->
it work without color or animation , please help .
And if someone have any tutoriel how to integrate chat onjhipster 4 please help me
Did you include all require modules in shared-lib.module?
Had you theme.css/scss?
import { MaterialModule } from '#angular/material';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import 'hammerjs';
#NgModule({
imports: [
BrowserAnimationsModule,
NgbModule.forRoot(),
MaterialModule,
...
Related
I'm using Angular 13 and PrimeNG 13.4.1. I would like to have a label be directly above a text field, so I built
<div class="ui-fluid" style="padding-top: 200px; padding-bottom: 200px;">
<div class="p-field">
<span class="p-float-label">
<input type="text" formControlName="name" pInputText>
<label for="formLogoId">My Name</label>
</span>
</div>
</div>
However, when the field is rendered, the label appears superimposed over the text input ...
What's the proper way to position the label above the text field? I have this in my angular.json file, for waht it's worth ...
"styles": [
"node_modules/primeng/resources/themes/nova/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
],
Based on the attached HTML, you are applying Float Label.
If you want the label to be positioned at the top of input field, you can refer to InputText Demo (the Invalid section part).
HTML
<div class="p-field">
<label for="formLogoId">My Name</label>
<input type="text" formControlName="name" pInputText />
</div>
CSS
.p-field > * {
display: block;
}
The CSS part is crucial, which all the elements under the element with the p-field class will be applied with style: display: block.
Without it, the <label> element will be at the left and the <input> element at the right (position).
Sample StackBlitz Demo
Output
You may consider for PrimeFlex, which is a CSS library for Prime UI.
Install primeflex library.
npm install primeflex
Import CSS in angular.json or root stylesheet.
"node_modules/primeflex/primeflex.css"
Apply PrimeFlex styling.
<div class="field">
<label for="formLogoId">My Name</label>
<input type="text" formControlName="name" pInputText class="w-full" />
</div>
Refer: FormLayout
Sample StackBlitz Demo (PrimeFlex)
In a vue page I added a ImageUpload component, following this tutorial: https://www.youtube.com/watch?v=kvNozA8M1HM
It works more or less. No errors, but it only shows my image and a ruler. I can zoom using the ruler, but it does not show boundaries, circle etc. It is completely different from the example in the tutorial...
It is buggy, so to say.
<template>
<div class="Image-Upload-wrapper Image-upload">
<p>
This is image upload wrapper component
</p>
<div id="croppie"> </div>
</div>
</template>
<script>
// uitleg over Croppie::https://www.youtube.com/watch?v=kvNozA8M1HM
import Croppie from 'croppie';
export default {
props:[
'imgUrl'
],
mounted(){
this.image = this.imgUrl // als component is mounted, this.image definieren, en daartmee croppie in..
this.setUpCroppie()
},
data(){
return{
image:null,
croppie:null
}
},
methods:{
setUpCroppie(){
let el = document.getElementById('croppie');
this.croppie = new Croppie(el, {
viewport:{width:200,height:200,type:'circle'},
boundary:{ width:220,height:220},
showZoomer:true,
enableOrientation: true
});
this.croppie.bind({
url:this.image
});
}
}
}
</script>
Is placed in parent as follows:
template>
<div>
<h2>Cards 1</h2>
<div class="form-group">
<input type="text" class="form-control" :placeholder="card.title" v-model="card.title">
</div>
<div class="form-group">
<textarea class="form-control" :placeholder="card.description" v-model="card.description">
</textarea>
</div>
<div id="preview" v-if="url" >
<h4> Preview</h4>
<ImageUpload :imgUrl="url"></ImageUpload>
<!-- <img class="img-circle" style="width:150px" :src="url" /> -->
</div>
<input type="file" v-on:change="onFileChange" ref="fileUpload" id="file_picture_input">
<button #click="editCard(currentSpelerCard)" class="btn btn-warning m-1" style="width:100px;color:black"> Save Card </button>
</div>
</template>
In my package.json I have:
"croppie": "^2.6.5",
in webpack mix I have:
mix.js('resources/js/app.js', 'public/js')
mix.vue();
mix.sass('resources/sass/app.scss', 'public/css');
I have a feeling that something is wrong with the installation of croppie.
Does anyone know what could be the problem here?
Googloing on I found the remark:
"#Since this package also depends on croppie.css you have to import it in your app.js import 'croppie/croppie.css'"
I added the following line to bootstrap.js:
import 'croppie/croppie.css';
Hi im trying to make a switch button (checkbox) with default checked and also disabled in react.
but somehow if I only put checked={true} it will be checked but the moment i add disabled="disabled", the switch button is unchecked and disabled (even if there is checked attribute). Could anyone please advise? thank you
<label htmlFor="disabled-on" className="switch__label">
<input
type="checkbox"
name="disabled-on"
id="disabled-on"
checked={true}
disabled="disabled" /* if added disabled it's not working with checked" */
className="switch__input switch__input--disabled-on"
/>
It is probably something wrong in your code somewhere else, please check this code - all looks fine.
class TodoApp extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<ul>
<li>
<label htmlFor="disabled-on" className="switch__label">
custom checkbox 1
<input
type="checkbox"
name="disabled-on"
id="disabled-on"
checked={true}
disabled="disabled"
className="switch__input switch__input--disabled-on"
/>
</label>
</li><li>
<label htmlFor="disabled-on" className="switch__label">
custom checkbox 2
<input
type="checkbox"
name="disabled-off"
id="disabled-off"
checked={true}
className="switch__input switch__input--disabled-on"
/>
</label>
</li>
</ul>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
I am faced with a frequent problem in react botostrap,sometimes grid offset props does not work, and only normal bootstrap classes work for me.
code:
<Carousel.Item >
<div className="item-container d-flex flex-column flex-wrap ">
{
this.categories.map(category => {
return (
<Card className="px-2 category__card col-xl-4 col-sm-6">
<div className=" car-container" style={category.style}>
<Card.Body>
<Card.Title className="text-white font-weight-normal text-uppercase ">
<h3>
{category.title}
</h3>
</Card.Title>
<Button variant="light rounded-0" >View Products</Button>
</Card.Body>
<Card.Img variant="bottom" src={category.img} className="card-image"/>
</div>
</Card>
);
})
}
</div>
</Carousel.Item>
This code works as i used normal bootstrap classes in Card component col-xl-4 col-sm-6 but it does not work when i remove these classes and use react-bootstrap props sm={6} xl={4}
I can use bootstrap classes and be happy but i need to make the width of the cards in carousel item dynamic so why i am asking the question, what may be the reasons behind these props does not work???
I need to use Bootstrap Datepicker with Angular 2. So I created a component as follows
import {Component, ElementRef, OnInit} from '#angular/core';
declare var $: any;
#Component({
templateUrl: 'app/views/daily-reports.html'
})
export class DailyReportsComponent implements OnInit {
constructor(private elRef: ElementRef) {}
ngOnInit(): void {
$('#daily-reports').datetimepicker();
}
}
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='daily-reports'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
In my index.html file I have all the files needed - js libraries and css files but I get the error
TypeError: Cannot read property 'addClass' of undefined
When I try to use the same code without Angular I works correctly as usual. Is there a way to fix the problem or can anybody show me how to use this plugin in Angular2
You have to put that initialization in ngAfterViewInit, because the DOM is not rendered yet in ngOnInit, so the selector in your JQuery will not be found and thus return undefined.
ngAfterViewInit(): void {
$('#daily-reports').datetimepicker();
}
use declare var jQuery:any; then in ngAfterViewInit add:
jQuery(this.el.nativeElement).find('div[id="daily-reports"]').datetimepicker({format: 'LT'})