I'm not sure why but when I try to set medium size (by passing "medium" alongside the other params in className) for icons, I get "unknown symbol" sign. I use semantic with react. It happens to whatever icon.
I use:
react: 16.6.3,
semantic-ui-css: 2.4.1,
semantic-ui-react: 0.83.0
From what I understand in your question, I think you wrote it like this:
<Icon name='users' className='medium' /> which is wrong.
The correct way is:
<Icon name='users' size='large'/>
Also, there's no 'medium'. The values are:
'mini', 'tiny', 'small', 'large', 'big', 'huge', and 'massive'
You can see its props here: https://react.semantic-ui.com/elements/icon/
Syntax for middle is size='mid'
Related
I want to set a default value or prompt a text to my select dropdown, I have managed to get the correct content into the select, but I want to be able to have a default value that differs from the content, for example " select country " and then list the countries.
This is how the select looks like so far, and the testing variable looks like this: testFillSelect: "Select Country..",
<div class="form-group">
<label>Countries:</label>
{{view "select2"
prompt="Select country.."
content=countries
optionValuePath="content.id"
optionLabelPath="content.name"
selectionBinding=testFillSelect
selection=countries.id
class="form-control"}}
</div>
The problem is, the selectionBinding doesn't seem to work as it does nothing, and niether does the prompt unless it's a blankspace in a string. I have tried select and select2, didn't make any difference either.
Does anyone have any idea of how to do this properly?
I thought I'd just leave an answer here in case anyone stumbles upon the same problem in the future, with this ember version.
Inspired by Lux comment, I passed an object as the first object in the content array instead, I did this using unshiftObjects which is supported by this ancient ember version believe it or not. (The first object is what is shown in the select if there's data in it & there's no prompt in the select view)
Code example of what I did:
this.set('countries', countries.unshiftObjects({id:-1, name:"Select country.."}));
And a validation that checks if a post is made with id -1 and in that case treat it as if nothing was selected.
Note that there are probably better ways to go about this & this is a workaround, but it's what worked for me :)
I need to do a webpage to finish my uni, and im about 90% done with it, however, im struggling with getting custom Iterators and Charts to work.
Im trying to use Recharts, but i have no idea on how to make it gather the info i want (I need it to get the number of users registered and the number of vaccines they took), but all i see on the documentation is ready results, im not sure if ChartJS will make it any better, and even if it does, im confused on how custom iterators work since i took my "Analytics" one from another StackOverflow question, however that's the least of my worries, since this seems to be simplier than getting the ACTUAL charts to work.
Help would be appreciated since i have 2 weeks to deliver it and im stuck on that, and its CRUCIAL i get that to work.
Oh yes, im also very bad at Javascript so every info is welcome.
EDIT:Forgot to say i've looked around but lots of them are for simplier and static stuff instead of database counts or stuff like that.
Welcome to SO.
1) Recharts wants an array that it needs to iterate over and display. So what I usually do is make the Chart Component a child of a List component.
2) I use the Filter on the List page to select different chart components when the user selects different options from the dropdown (in case your analytics page needs to show different charts from the same page)
^^this is a bit tricky for peeps new to JS but is quite straightforward if you want to get into it.
3) For you i think the best bet will be that you make different List components and resources for each page and just display different charts on their own page.
export const AnalyticsList = (props) => {
return (
<List title="Analytics" {...props} perPage={20} sort={{ field: 'id', order: 'ASC' }}>
<Analytics />
</List>
)
}
here is how the Analytics Component is
import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';
export const Analytics = (props) => {
return (
<BarChart width={800} height={400} data={Object.values(props.data)} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis dataKey="charLimit" />
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Bar dataKey="charLimit" fill="#82ca9d" />
</BarChart>
);
}
Hope this helps.
i am using KeyFilter Module of primeng here is my code :
<input type="text" pInputText [(ngModel)]="price.TintCost" [pKeyFilter]="patternDecimal" name="tintCost" required="true" />
here is my typescrip code :
patternDecimal: RegExp = /^[0-9]+(\.[0-9]{1,2})?$/;
and here is version of primeng :|
"primeng": "^5.2.0-rc.1",
i tested in regex then i can type dot(.) but when i apply to KeyFilter, it doesn't allow the dot(.). Someone help me, please
I solved this problem by adding a mask as default
KeyFilter.DEFAULT_MASKS['currencyRegex'] = /^-?(?:0|[1-9]\d{0,2}(?:,?\d{3})*)(?:\.\d+)?$/;
I solved this problem by change the pValidateOnly property to true.
The problem is that the KeyFilter check any press on keyboard and if the complete value is no the correct, then dont permit write, just if you copy and paste the value.
In the documentation say
Instead of blocking a single keypress, the alternative validation mode
which is enabled with pValidateOnly property validates the whole input
with a built-in Angular validator.
https://www.primefaces.org/primeng-6.1.6/#/keyfilter
Example that work for me.
Component.ts
public twoDecimal: RegExp = /^\s*-?(\d+(\.\d{1,2})?|\.\d{1,2})\s*$/
Component.html
<input name="decimalField"
#decimalField="ngModel"
[pKeyFilter]="twoDecimal"
[pValidateOnly]="true"
[(ngModel)]="item.decimalField"
type="text" pInputText>
<div *ngIf="!decimalField.valid" class="alert alert-danger">
<p>Incorrect format.</p>
</div>
The answer of #Norberto Quesada is correct.
Without pValidateOnly the regex will validate on every key stroke.
Let's say you want to enter the value "47.11":
You begin to enter "4" => this would be valid, no input blocked.
Same for "47"
As soon as you enter "47. => validation fails, input blocked.
I was thinking maybe it's possible to enter "4711" first and then the "." in between but for some reason this doesn't seem to work, too... Maybe this is a bug?
Anyways, you can take a look at this stackblitz example for better understanding.
I've also prepared an example of using ValidateOnly and in addition to that restrict the input to only numbers using keyDown event
I'm having an issue with a bit XSLT code I'm working with for a client. I cannot change the schema, as a flash application depends on it and making any changes would break the ActionScript. It's unfortunate.
This is my first foray into XSLT and I'm admittedly incompetant with it, so I was hoping the community could help me out.
This is the schema (XML file):
<statement title="Click on your Answer" answer="true">
True or False: The question asked is here.
<feedback>
<answerTrue sound="">
The response if the user answered true is here.
</answerTrue>
<answerFalse sound="">
The response if the user answered false is here
</answerFalse>
</feedback>
</statement>
When I try to access the "statement" like this (XSLT):
<div id="statement">
<xsl:value-of select="statement" />
</div>
It displays the "answerTrue" and "answerFalse" nodes along with it. I would like to only display the text "True or False: The ques...". If anyone knows of a tag I can use to display the statement without displaying the child elements, I'd be eternally grateful! Thanks!
Use:
normalize-space(/statement/text()[1])
Hi I've got a list and the selectedIndex doesn't seem to have any effect. Is the alternatingItemColors causing a problem?
I've got a panel with this list and a few radio buttons. I've set the defaults on the radio buttons, but I'm having problems setting 2010 as the default selection in the list.
<mx:List
id="myList"
width="120"
height="80"
alternatingItemColors="[0xFFFFFF, 0xEEEEEE]"
selectedIndex="0">
<mx:dataProvider>
<mx:Object label="2010" data="myData1" />
<mx:Object label="2009" data="myData2" />
<mx:Object label="2008" data="myData3" />
</mx:dataProvider>
<mx:List>
I also tried adding: creationComplete="myList.selectedIndex=0", but that didn't work, either.
Any suggestions? Thank you.
-Laxmidi
Okay, I fiured it out. I was setting the selectedIndex in the component correctly. But, I had another function acting on the instance, which was causing the problem.
Thank you
-Laxmidi