I am using a paper stepper polymer component by zecat (http://zecat.github.io/paper-stepper/components/paper-stepper/)
My issue is as below.
All the steps from 1 to 5 are showing correctly.
I can navigate from a previous step to any future steps. Eg. From Step 1 to Step 2 or Step 3, From Step 2 to Step 3 or step 5.
My problem is, i cant select a previous step, but i can navigate it by back button. Eg. from Step 3 , Step 2 or Step 1 is not clickable.
I tries with all the attributes like editable,completed, selectable ect, but nothing is working. Here is my code:
<paper-stepper id="wizardStepper" alternative-label has-back-button has-skip-button selected={{selectedIndex}} finish-text="Yes" continue-text="Yes" update-text="Yes">
<paper-step id="internetStepId" label="Internet & VPN" >
<div class="wizard-content-div">
<h4>Network Configurations</h4>
</div>
</paper-step>
<paper-step id="customerDataStepId" label="360 Customer Data" >
<div class="wizard-content-div">
<h4>Customer Data</h4>
</div>
</paper-step>
<paper-step id="inboundConnectorStepId" label="Inbound Connectors" >
<div class="wizard-content-div">
<h4>Inbound connectors</h4>
</div>
</paper-step>
<paper-step id="outboundConnectorStepId" label="Outbound Connectors" >
<div class="wizard-content-div">
<h4>outbound connector</h4>
</div>
</paper-step>
<paper-step id="marketingCampaignStepId" label="Marketing Campaigns" >
<div class="wizard-content-div">
<h4>marketing campaign</h4>
</div>
</paper-step>
</paper-stepper>
I found the reason for this issue. The steps which are previous to the currently selected step is disabled because of the lower z-index value of css.
You need to give a z-index value which is greater than currently selected step.
Related
I'm using a picklist primeng component, ant it has buttons that I want to delete but I don't see them in my HTML and y tried searched them but I didn't find them.
This is my HTML.
I got this picklist component from http://primefaces.org/primeng/picklist
and I want to delete the first block of buttons and the last (I only need right and left arrows)
<p-pickList [source]="sourceProducts" [target]="targetProducts" sourceHeader="Listado de clases" targetHeader="Clases asignadas" dragdrop="true"
[sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
<ng-template let-product pTemplate="item">
<div class="product-item">
<div class="product-list-detail">
<h5 class="mb-2">{{product.name}}</h5>
<i class="pi pi-tag product-category-icon"></i>
<span class="product-category">{{product.category}}</span>
</div>
<div class="product-list-action">
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div>
</div>
</ng-template>
</p-pickList>
I reviewed the picklist.d.ts file but I didn't find anything
You need to add showSourceControls and showTargetControls properties.
like this :
<p-pickList [showSourceControls]="false" [showTargetControls]="false"></p-pickList>
I'm working with PrimeNg picklist and here is what i have:
The focus is on the first row, don't mind the other rows not having the radio button (it's uncompleted testdata).
What i'm trying to achieve is that when you click on the first option 'Good:Stock', the little dropdown to the right with A1 appears. When you select 'Bad', it disappears.
The problem now is that when i select 'Good' for one item, the dropdown will appear for every record in the loop.
I want it to appear only for the item where i selected the radiobutton.
All help is welcome! Ask away if you need more code but i don't think the .ts file matters for now.
Here is what the code looks like:
<label for="productGroup">Select product</label>
<div class="form-group" id="productGroup">
<div class="row">
<div class="col">
<p-pickList [source]="products"
(onMoveToTarget)="onMoveToTarget()"
[target]="selectedProducts" sourceHeader="Available" targetHeader="Selected"
[responsive]="true" filterBy="description,productNumber"
dragdrop="true" dragdropScope="products" [showTargetControls]="false" [showSourceControls]="false"
sourceFilterPlaceholder="Search product in Available"
targetFilterPlaceholder="Search product in Selected"
[sourceStyle]="{'height':'33vh'}" [targetStyle]="{'height':'33vh'}">
<ng-template let-product pTemplate="item">
<div id="product" class="row ui-helper-clearfix">
<div class="col-1 padding-0 brighten">
<img (mouseover)="getProductImage(product)"
[escape]="false"
pTooltip='<img style="max-height: 100%; max-width: 100%" src="{{base64String}}">'
tooltipPosition="right"
src="assets/eye-icon.png" style="max-width: 100%; width: 80%;">
</div>
<div class="col-4">
<div class="row">{{product.description}}</div>
<br>
<div class="row">{{product.productNumber}}</div>
</div>
<div class="col-4" *ngIf="inbound && product.goodLabel && product.badLabelInWarranty &&!hqAdmin&&!carStock">
<div class="row">
<p-radioButton (onClick)="toggleProjects(true, product.id)" name="{{product.productNumber}}"
label="Good: {{product.goodLabel.name}}"
[value]="product.goodLabel" [(ngModel)]="product.quality">
</p-radioButton>
<p-radioButton name="{{product.productNumber}}"
label="Bad: {{product.badLabelInWarranty.name}}/{{product.badLabelOutOfWarranty.name}}"
[value]="product.badLabelInWarranty" [(ngModel)]="product.quality"
(onClick)="toggleProjects(false, product.id)">
</p-radioButton>
</div>
</div>
<div class="col-2 nopadding" *ngIf="goodSelected">
<p-dropdown id="dropdownInput"
[autoWidth]="false"
[options]="projectLabelSelectItems">
</p-dropdown>
</div>
</ng-template>
</p-pickList>
</div>
</div>
</div>
What is happening in you case suppose lets take an example you have 10 rows and your are maintaining one single variable for all row so what happen when the value of that flag become true or false drop-down from all the rows will show or hide.
So what is suggest in the collection take one property extra for this drop-down column.
<div class="col-2 nopadding" *ngIf="goodSelected">
<p-dropdown id="dropdownInput"
[autoWidth]="false"
[options]="projectLabelSelectItems">
</p-dropdown>
</div>
Here goodSelected is single variable insted of add one vriable in property
<div class="col-2 nopadding" *ngIf="product.goodSelected">
<p-dropdown id="dropdownInput"
[autoWidth]="false"
[options]="projectLabelSelectItems">
</p-dropdown>
</div>
And on toggle make goodSelected selected value true or false of selected row only.
I have a panel which shows a progress of a certain task with a trace of the log.
I want to change the color of that panel from gray(current) to green when the log prints a certain line.
The log is also present in the view so I could do all this in the view with razor sharp, but how so ?
This is the view :
<input type="checkbox" id="reveal-email" role="button">
<div class="alert alert-dark" role="alert" style="width:50%;margin-left:375px;font-family:'Advent Pro', sans-serif;">
<div class="row">
<div class="col-3">
<strong> Export processing...</strong><br />
</div>
<div class="col-3">
<div class="loader"></div>
</div>
<div class="col-3" style="padding-left:300px">
<label for="reveal-email" class="btn">
<i class="icon ion-ios-toggle" style="color:rgb(49,52,55);"></i>
Log
</label>
</div>
</div>
</div>
<!-- THIS IS THE LOGGING PART !-->
<div id="email" class="alert alert-warning" role="alert" style="width:50%;margin-left:375px;font-family:'Advent Pro', sans-serif;">
<p> Log Started at #DateTime.Now </p>
<ul style="color:#222;font-style:oblique" id="messagesList"></ul>
</div>
Basically the ul in the logging div appends the log each time the server detects a new line (in the backend)...One of the lines is :
Log :
Job "TN_LR_DEV1"."SYS_EXPORT_SCHEMA_05" successfully completed at Sun May 10 17:58:24 2020 elapsed 0 00:01:23
Which basically means that the task is completed..only then I want to remove the first div (panel) and add another panel below everything with a green color(or show it if it's marked as hidden)
You can use Jquery to hide/show the element . For example , you can add another div and set background to green :
<div id="completedDiv" style="display:none;background:aquamarine;">
</div>
And in your js function that getting log from server side , you can check the log and show/hide related div using JQuery/Javascript :
let log = 'Log : Job "TN_LR_DEV1"."SYS_EXPORT_SCHEMA_05" successfully completed at Sun May 10 17:58:24 2020 elapsed 0 00:01:23';
if (log.indexOf("successfully completed") >= 0) {
$("#completedDiv").show();
}
Solved the issue with checking if a certain string exists in the new log line appended to the view, if boolean is true then :
document.getElementById("succ").style.display = "block";
with succ being the panel showing a success message and by default its display is set to none.
I am trying to get build a seat selection view for a cinema hall. I managed to iterate the objects from Arraylist but row_iterator gets stuck at 0 in line 3, where i set top position <i>(top: '+(row_iterator.index*20)+'px')</i>.
On lines 2 and 6 the iterator works. Any help appreciated
HTML:
<th:block class="hall__row" th:each="row, row_iterator: ${theater.getRows()}">
<div class="hall__places-row _left" th:attr="data-row=${row.getId()}" th:attrappend="style=${'top: '+(row_iterator.index*20)+'px'}"> </div>
<div class="hall__places-item is-free" th:each="seat, seat_iterator : ${row.getSeats()}" th:attr="data-row=${row.getId()}" data-column="1" data-price-id="1" data-pos-x="1" data-pos-y="12" data-state="free" data-price="40" data-place-size="20" th:attrappend="style=${'left: '+((seat_iterator.index+1)*20)+'px;'+'top: '+(row_iterator.index*20)+'px'}">
<div class="hall__places-chair" th:attr="data-title=${movie.getPrice()}" data-toggle="tooltip" data-placement="top"></div>
</div>
<div class="hall__places-row _right" th:attr="data-row=${row.getId()}" th:attrappend="style=${'top: '+(row_iterator.index*20)+'px'}"> </div>
</th:block>
When editing a field I click off the window and it loses focus. Then when I click back into the window in a different field, the focus will rapidly tab between the two form fields.
This issue occurs occurs in Chrome, IE, and Firefox. The form fields are being pulled from a questionnaire json file for one part, but I have noticed it happening in the fields that aren't pulled from a questionnaire as well.
Below is a sample of the html and angular code that creates the form.
<ng-form name="personalForm">
<div layout="row" layout-align="center center" ng-repeat="section in sections" ng-show="currentSection >= $index+1" id="section_{{$index}}">
<md-list id="personalQnsList" layout="row" layout-align="start center" flex="90">
<!-- Questions Layout -->
<div layout="column" layout-align="start center" flex="100" role="listitem">
<div class="row sectionLine" layout="row" id='personal_{{$index}}' layout-align="start center" ng-repeat="personalQuestion in section.questions track by $index" ng-if="section.questions[$index-1].valid || $first" ng-class="{'animate-if':$index!=0}">
<div class="row" layout-align="start center" ng-class="{'ssn': personalQuestion.fieldType == 'ssn' }">
<!-- 3 is added to the index to account for the previous questions -->
<dynamic-question section-name="section.name" form-name="personalForm" question-index="$index + 3" question-model="personalQuestion" result-produced="resultProduced(result, personalQuestion.fieldType, personalQuestion.fieldMapping)"
layout-align="start center" layout-align-xs="center center"></dynamic-question>
</div>
<!-- <md-button class="info-icon" ng-if="personalQuestion.info"> <md-icon></md-icon>
<md-tooltip class="infoTooltip" md-direction="right"> {{personalQuestion.id |translate}}</md-tooltip> </md-button> -->
</div>
</div>
</md-list>
</div>
<div layout="column" layout-align="center center">
<md-button class="md-primary md-raised" ng-if="pCtrl.continueFlag" ng-click="pCtrl.reviewPersonalInformation()" aria-label="Continue">Continue</md-button>
<!-- <md-button class="md-primary md-raised" ng-if="pCtrl.continueFlag && pCtrl.profileContinue" ng-click="pCtrl.reviewPersonalInformation()" aria-label="Continue">Continue</md-button> -->
<div ng-show="pCtrl.errorMessageFlag" class="error_Msg text-center">There is an error with the information you provided. Please check your fields again</div>
<div ng-show="pCtrl.errorMessageFlag" class="error_Msg text-center">Please check {{pCtrl.missingFields}} fields again</div>
</div>
</ng-form>
Probably you have:
1) A Javascript "global" event (I'm 90% sure that it's a Jquery event) checking on every interaction a user has with your app elements.
2) This javascript event (maybe a .focus .click variation) is forcing to always focus one of the element (let's call it element "x"). That's why it's happening that when the user clicks on any another element (this element probably has a javascript event too with a focus instruction inside) different of element "x" the focus try to return back to the element "x"
3) Both focus instruction on the javascript "global" element are "fighting" each other to have the focus on the element they handle (event "x" to focus "x" for element "x" and event "n" to focus "n" for element "n" )
4) This javascript functions maybe are bounded to one or maybe more class names of your element
5) I'm specially curious about these two lines classes and posibly bounded javascript events:
<div class="row sectionLine" layout="row" id='personal_{{$index}}' layout-align="start center" ng-repeat="personalQuestion in section.questions track by $index" ng-if="section.questions[$index-1].valid || $first" ng-class="{'animate-if':$index!=0}">
<div class="row" layout-align="start center" ng-class="{'ssn': personalQuestion.fieldType == 'ssn' }">
To conclude: All I had mentioned above is the most common thing to happen and since you don't provide necessary code to let me test your app is the most accurate answer I can give you.