How could I show a Badge on Fab button? I tried it like this, but it displays it behind my content, as i can see it in DOM.
<Badge badgeContent={addedItems} color="secondary">
<Fab
variant="extended"
color="primary"
aria-label="add"
onClick={handleAdd}
>
<Icon>shopping_cart</Icon>
</Fab>
</Badge>
Your code is ok, addedItems value is probably 0, which causes the badge to be invisible.
You can refer to the below CodeSandbox example with your code, I hard coded badgeContent to be greater than 0 and it works.
If addedItems value is the issue and that is not your desired behavior, you can provide showZero={true} prop to Badge:
<Badge showZero={true} badgeContent={addedItems} color="secondary">
Related
enter image description here
For example—
in this image when i hover on the button (click) on the left side, the tooltip is going out of the red bordered container.
same thing happens for the right side button.
i want to change the tooltip position dynamically so that it stays inside the container for both the cases.
p.s - new to stackoverflow. If anything is wrong please pardon.
thanks in advance.
<Tooltip
title=“aaa”
arrow
placement=“bottom”
>
<button> click </button>
</Tooltip>
this is code for the MUI tooltip.i tried to look for props that can help me with this but failed.
You can do this by accessing the PopperProps in the Tooltip component.
The documentation for this is a little buried, but Tooltip has access to all MUI Popper component properties, which contain the popperOptions. Within the API properties definitions for the Popper component, MUI refers you to popper.js docs. These docs will then tell you how you can apply PopperProps to get different behaviors. Check out popper.js.org for further info.
const boundingElement = useRef();
[...]
<div
ref={boundingElement}
>
<Tooltip
title="Tooltip Tooltip Tooltip Tooltip Tooltip"
PopperProps={{
popperOptions: {
modifiers: [
{
name: "preventOverflow",
options: {
boundary: boundingElement.current
}
}
]
}
}}
>
<div>Tooltip Hover Div</div>
</Tooltip>
</div>
I'm trying to build a canvas app with color picker using jscolor.
Here are what I've done:
Included the file jscolor.js
Created a button with class="jscolor"
Code for the button:
<button id="strokeCol" class="jscolor {valueElement:'color_value'}" onchange="config.changeStrokeCol(this.jscolor)">
Stroke Color
</button>
When I select a color from the picker I can see the background color of the button changing in developer tool, but in RGB value. Read it somewhere else that I can simply get the HEX by specifying $('element').val(), but in my case it just gives me "" (blank).
The HTML also has no value attribute triggered by the click, not to say being updated. The examples only shows that I can specify a default value (which can't be updated as well).
Have I missed anything? Or has jscolor been updated to provide only RGB value through the background color?
The only workaround I can think of is allowing the HEX code to be displayed inside the button then use .html() to get the value, but it seems so unnecessary.
Problem solved when class is inserted to the
<input> tag. Strange!
I am trying to bind an ion-input from an array, but when I want to change the value on the screen, the input disappear. I mean, if I put the pointer into the text-area, the pointer is gone and I have to put again.
But, if I remove the [(ngModel)] the pointer is never gone.
Here I let the code of the ion-input.
<ion-col *ngFor="let x of totalExercices[ex].maquina.repeticions; let ma = index;">
<ion-input type="number"
[(ngModel)]="totalExercices[ex].maquina.repeticions[ma]"
style="background-color:#f4f4f4;">
</ion-input>
</ion-col>
On the following images, if we fix on the element 20. If I want to delete the number, when the 0 is gone, the pointer is gone too.
trying to delete the number
And looks like this:
Deleted the 0, but I have to put again the pointer there.
As I said, I guess that the problem is the ngModel.
Pherhaps there are some other ways to change the value of that input withous the ngModel?
Thank you so much!
Well, After searching the issue, I've finded the solution. If we bind a NgModel using an array, it load every time, so the list is reloaded every time we do some change.
The solution is the track by See the solution on the following link:
https://forum.ionicframework.com/t/2-way-data-binding-to-an-array-element-in-an-ngfor-ionic-2-rc1/67977/2
I have hader in ion-view like
ion-view(title='{{review_type}} reviews',ng-cache="false",cache-view='false')
wta-nav-action-right(icon='icon-white-plus', action='reviewAdd')
ion-content
review-empty-list(ng-show='!reviews.length')
section(style="margin-top:10px")
wta-review(ng-repeat='review in reviews')
infinite-scroll(items='reviews', query='query')
I converted this to two line header like this
I am trying to convert “Blueberry Wine” into hyperlink so that by clicking on this user can navigate to respective Page…
I tried but ng-click event is not triggered.
I put span tag inside the ion-view title and give ng-click attribute to that span but still event is not triggered.
ion-view(title='<span class="header",ng-click="clickable()">{{review_type}} reviews</span>,'ng-cache="false",cache-view='false')
I done this by adding this .. here is code pan link https://codepen.io/calendee/pen/bLJcD
ion-view(title='{{review_type}} reviews',ng-cache="false",cache-view='false')
wta-nav-action-right(icon='icon-white-plus', action='reviewAdd')
ion-content
section
nav
a.col.text-center.center(style="background-color: #f0483d;color: white;padding: 10px 0")
h4(style="color :white") Winery Name
review-empty-list(ng-show='!reviews.length')
section(style="margin-top:10px")
wta-review(ng-repeat='review in reviews')
infinite-scroll(items='reviews', query='query')
I have a site that uses a accordion script, and I want to place a scrollbox inside one of the accordion tabs. However, the scrollbox works just fine, but breaks the accordion script. Is there a way around this conflict?
This is the site with just the accordion script:
http://www.namibiaonline.net/sandbox/NBAA/index9.html
And this is the broken one with jscrollpane and the accordion script:
(for some reason I'm only allowed to paste one hyperlink, so to get to the broken one, just replace /index9.html with /scroll_test.html)
Any help would be much appreciated :)
Ash
This should fix your problem. Try the beta:
http://groups.google.com/group/jscrollpane/browse_thread/thread/c1bc1bf63e3f80d8
and I believe this is where your issue lied:
http://jscrollpane.kelvinluck.com/auto_reinitialise.html
I had the same problem and this is how I almost solved it:
jQuery(document).ready(function() {
scrollPane = jQuery(".scroll-pane").jScrollPane({
showArrows: true
});
var api = scrollPane.data('jsp');
jQuery("#accordion").accordion({
changestart: function(event, ui) {
api.reinitialise()
}
});
}
Be sure that you define the correct width height for the containers which have the scroll-pane class. In my case I have created 3 containers like this:
<div class="scroll-pane">
.scroll-pane {
overflow: auto;
height: 134px;
width: 420px;
}
The class scroll-pane is where I defined the overflow, height and width. If I do in the parent container, the scroll is not shown because it takes all the height and also if I do in a child container, a non stylized scroll is shown.
But I still having an issue with the first pane. It is correctly shown the first time the page is loaded, but when I move to another accordion tab and then come back to the first one, the width of this element is set to 0. It only happens with the first one the others work fine.