I use react-slick library and it turns out that it sets its own "dir" attribute. I set the direction for the whole app in the main container, but react-slick overrides it for itself. Is there any option to fix this?
<div dir="rtl" className={appClassName}>
<div slick-slider slick-initialized dir="ltr">
// some code
</div>
</div>
Related
I want to implement resizable div like this but in react-> http://jsfiddle.net/T4St6/82/
<div id="container">
<div id="left_panel"> left content! </div>
<div id="right_panel">
<div id="drag"></div> right content!
</div>
I tried using css property (resize-horizontal) which works fine, but it comes on the right bottom and not on right border.
Is there a way to implement without using any library?
You can use it for this purpose. react-resize-panel
I am making use of PrimeNG and Angular 8.
The code snippet is as follows -
<div class="p-col-12 p-md-6 p-col-nogutter drag-column">
<div *ngFor="let doc of availableDocs" class="ui-helper-clearfix">
<div class="ui-g-12 ui-md-4" pDraggable="docs" (onDragStart)="dragStart($event, doc)"
(onDragEnd)="dragEnd($event)">
<p-panel [header]="doc.title" [style]="{'text-align':'center'}">
<img src="assets/images/{{doc.extension}}.png">
</p-panel>
</div>
</div>
</div>
If in above code we remove the class ui-helper-clearfix, then the image cannot be dragged.
But in documentation no such requirement is mentioned. Can this be done without ui-helper-clearfix.
Or some other solution as it is not the layout i want.
I have a page designed in angular bootstrap. I am trying to use a popover as follws ..
<div class="col-md-4">
<div class="row">
<ul>
AM TEST AM
</ul>
</div>
</div>
The template I am using pops over fine, but I could not increase the size of the popover whatsoever.
How can I increase the size of the popover?
You can simply do this using CSS
<style>
.popover{ /* Will change ALL popovers. Add element id to target specific popver */
max-width: 100%
}
</style>
Regarding the use of ng-src in order to display an image, this code works during runtime - but not on the initial page load:
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
on my initial page load I get the error:
GET http://localhost:33218/Images/ 403 (Forbidden)
Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.
I do realize that the dashboard framework I'm using is dynamically adding a div onto my page, and then rendering the image; however, why does it NOT complain at this time ?
In other words, I'm trying to avoid using the full path like this:
<img ng-src="http://localhost:33218/Images/{{widget.initImage}}" />
**** UPDATE ****
This bit of code works, and I did not need to specify ".../../" relative path.
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured">
<img ng-src="Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !
Change you code to following.
You need to check widget.initImage is initialized or not. Before passing it to ng-src .
Use ng-if on widget.initImage
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" ng-if="widget.initImage" />
<div class="caption">Click to configure</div>
</div>
I'd suggest you to use ng-init directive like this...
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage" ng-init="getImgUrl()">
<img ng-src="{{myImgUrl}}" />
<div class="caption">Click to configure</div>
</div>
In your controller,
$scope.getImgUrl=function()
{
$scope.myImgUrl= //get your img url whatever it is...
// You can also set widget.showInitImage variable here as well...
}
I am doing Angularjs project and I need to freeze a div in that depend on a condition. I tried to use ng-disabled but Its not freezing a div for me. This is the code
<div ng-repeat="item in list.items" ng-disabled="true">
Help would be really appreciated.
Edited :
<div ng-repeat="item in list.items" ng-click="goToFunction()" ng-disabled="true">
now I have another problem, As you guys suggested me I can change the css. But the problem is every div has got a ng-click So even if it is look like disabled in css it will call to the function. So how can I prevent it?
Thanks in Advanced.
if you are using bootstrap3, you can use text-muted class if the div contains text and apply styles based on a condition
<div ng-repeat="item in list.items" ng-class="{'text-muted':item.myCondition}">
the DIV element doesnt support the disabled attribute.
or you can use css to make the div element support that attribute.
<div ng-repeat="item in list.items" ng-disabled="item.myCondition">
css
div[disabled]{
color:grey;
}
You are trying to use ng-disabled in DIV which in invalid. You can achieve this by applying css class conditionally like this.
<div class="box" ng-repeat="item in items" ng-class="{'disable-mode':item%2==0,'normal-mode':item%2!=0}">
</div>
Working Demo