I have an example where I used cdkDrag.I dont wanna see anything when I start to drag.How can I disable CSS classes which applied on dragging state?
Above you can see there's a little view of my item when I drag it and I dont wanna see.How can it be possible?I couldnt find which CSS class should be disabled.
https://stackblitz.com/edit/angular-gbls7d-rih7te?file=src/app/cdk-drag-drop-connected-sorting-example.html
You can customize the dragging preview with cdkDragPreview directive, described in Angular Materials D&D CdkDragPreview docs.
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let movie of movies" cdkDrag>
{{movie.title}}
<img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
</div>
</div>
See example Stackblitz.
For your example you can add an element into your cdkDrag root element.
E.g.:
...
<tr *ngFor="let feed of todo;let index = index" cdkDrag (cdkDragStarted)="started($event)">
<span *cdkDragPreview>Test</span>
<td>
...
Check your adapted Stackblitz.
Related
I need help changing a button to look like an arrow is coming out of it to show that it is the active button. The button is wrapped in a card component.
Below is a code example:
<div className="float-container">
<div className="creator-container float-child">
<div>
<Card className="bg-mainBlue rounded-xl">
<CardContent>
<Button
className=" text-white font-nunito text mx-2 pr-35 "
onClick={() => onFieldAdd('textField')}
>
<TextFieldsIcon />
<p> Text Box</p>
</Button>
</div>
</div>
</div>
I am struggling changing the buttons appearance. My code is build in React using TypeScript. and I would like to mostly achieve this using css.
I have included a picture of my desired outcome.
Can anyone please help?
So you can make the ::before element. Set it to be display:block, then add it the backround:_mainBlue_ and transform:rotate(45deg). Dont forget to content:''. Then just play with the position.
Example:
https://codepen.io/daniel-bedn-/pen/zYWbeeP
I am attempting a dynamic form generator based on Angular's Dynamic Forms template using Angular 7 and I'm running into a css issue. I am using Bootstrap 4.0 and I hope it's not an issue where I need to go back to 3.0 (I had a prior issue that involved that, but correct re-coding got it to work in 4.0). If so, please let me know.
Now, here is the way that my app works correctly for my end product. My code to generate the drop downs is:
<div class="row">
<div *ngFor="let question of questions" class="col-md-6 form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass">
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When this gets rendered to the screen, the drop downs are aligned correctly, with the correct widths, as you can see:
Now, if I follow Angular's method, my main code block will now become:
<div class="row">
<app-question *ngFor="let question of questions" [question]="question" [form]="form"></app-question>
</div>
And my app-question component has the following code:
<div [formGroup]="form">
<div class="col-{{question.colType}}-{{question.colWidth}} form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass"
>
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When the form renders to the screen it looks like this:
As you can see, the column widths are gone. I'm certain it has something to do with the div tag holding the FormGroup attribute, but that is required for the component to compile and work. I've tried adding it with a span tag, adding the col-md-6 class to the same tag as FormGroup, but I get the same, incorrect CSS rendering.
Is this another Bootstrap 4 issue where I may need to go down to Bootstrap 3 for this to work? If not, what is going on and how can I get the page to correctly render like the first image and yet still be able to use the app-question component in my code?
I believe that the problem is that Angular renders app-question component as a tag <app-question></app-question> and your div tags inside of it have styles relative to that app-question tag, but not the parent <div class="row">. So if you add a class col-md-6(for example) it will cover 50% of the app-question tag, but not the row one.
So if you want the styles to work, you should add the classes here
<div class="row">
<app-question *ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>
As an alternative, you can change your app-question component decorator to make it an attribute.
#Component({
selector: '[app-question]'
})
And then use it to any tag you like
<div class="row">
<div app-question
*ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>
How to use Image overlay in ReactJS? I am making a movie site.
Here is the link : Project
I want to use overlay effect when the user hovers over the image.
When the user hovers over the image I want to show tagline with the overlay effect on the image.
Here is the link I tried : reference
But, it's not working in React.
Here is the code :
In image tag i want to add overlay effect.
<div className="main-description" >
<img src={"https://image.tmdb.org/t/p/w500"+res.poster_path}
className="result- image"/>
<b className="result-titles" >{res.original_title}</b>
<div className="extra-description">
<div className="rating_time_score_container">
<div className="sub-title Rating-data"><b>
Imdb
<span className="details" > {res.vote_average}/10 </span></b></div>
<div className="time-data">
<b><span className="time">
<i className="fa fa-clock-o"></i> </span> <span className="details">
{res.time_str}</span>
</b>
</div>
</div>
</div>
I don't think this has to do with CSS, It would of been nice to have a link to your github but i\I tracked down your code (since its open source) and I took and look. I suggest using a package like this one: https://github.com/ethanselzer/react-hover-observer
or even bootstraps classic react package like this one:
https://react-bootstrap.github.io/components/overlays/
Then what you can do is update the state of your application and add the overlay that way. Hope that helped and good luck with your project
Reaching out of my .net stomping grounds and can't seem to figure out if there's an equivalent to what you would use DataTemplateSelector for in .net, but for use in an ionic driven html5 and angularjs project. Could someone please point me in the right direction?
For example, I know I can go in and plop in an equivalent to ItemsControl with a quick angular hook into the ng-repeat kind of like;
<ion-list>
<ion-item ng-repeat="blah in something | orderBy:'whatever'" href="#/my/crap/{{blah.blah}}">
<!-- stuff -->
</ion-item>
</ion-list>
Which of course I can supply a template with that is for every generated child but I need to flip it out for some different looking parts when needed.
I screwed around with ng-switch but couldn't get what I was shooting for and I'd prefer not to re-invent the wheel if it's existing functionality that I'm just not finding.
Basic intent. Provide more than one item template within a repeated list to display items different based on some criteria. Any insight? Thanks
There are a number of ways to achieve the equivalent of DataTemplateSelector - depending on your needs and view on "elegancy". Probably the closest one is with ng-include, but for simple cases you could also use ng-if and ng-switch.
1) ng-include
<div ng-repeat="item in items">
<div ng-include="itemDataTemplateSelector(item)"></div>
</div>
$scope.itemDataTemplateSelector = function(item){
if (item.type === "foo" && item.something.else) return "/path/to/foo/template.html";
...
}
2) using ng-ifs
<div ng-repeat="item in items">
<div ng-if="item.type === 'foo'">
... foo template
</div>
<div ng-if="item.type === 'bar'">
... bar template
</div>
</div>
3) using ng-switch
<div ng-repeat="item in items" ng-switch on="item.type">
<div ng-switch-when="foo">
... foo template
</div>
<div ng-switch-when="bar">
... bar template
</div>
</div>
Here's a plunker
I am trying to use polymer project in a website but I am stuck and cannot find help on the documentation.
How do I use the click of a paper-fab element? I have seen on another stackoverflow post the use of the property on-tap= . I have seen the docs and the code and could not find any place that says this property exists.
Should I add a event handler? Is this how polymer works?
My code:
<!-- `keepCondensedHeader` makes the condensed header to not scroll away -->
<core-scroll-header-panel condenses keepCondensedHeader condensedHeaderHeight="80">
<core-toolbar>
<div flex></div>
<core-icon-button icon="thumb-up"></core-icon-button>
<paper-fab icon="account-circle" ></paper-fab>
<div class="bottom indent bottom-text" self-end>
<div>ME AVISE</div>
<div class="subtitle">Fique informado e economize</div>
</div>
</core-toolbar>
<div class="content">
<lorem-ipsum paragraphs="100"></lorem-ipsum>
</div>
</core-scroll-header-panel>
If your posted code is inside another Polymer element you can add on-tap={{yourHandlerMethod}} to the paper-fab element. If you're outside Polymer, then yes, you can just el.addEventListener('tap', function() { ... }).
See here for the available events.