I m working on Zk project what i need to do is create a popup for every element inside a loop using binding .
here what i have tried to do so far but it s not seem to work
<hlayout children="#bind(menu.listMenu)" style=" padding:0px; margin:0px;" >
<template name="children">
<a sclass="menuItem" tooltip="'#bind(each.icon)' , position=after_center" iconSclass="#bind(each.info)" href="#bind(each.link)" ></a>
<popup id="#bind(each.info)">
<div>
<label value="#bind(each.info)"> </label>
</div>
</popup>
</template>
</hlayout>
Can you help me pls ? thx
Change your code to :
<hlayout children="#bind(menu.listMenu)" style=" padding:0px; margin:0px;" >
<template name="children">
<a sclass="menuItem" tooltip="${each.info}, position=after_center" iconSclass="#bind(each.info)" href="#bind(each.link)"/>
<popup id="${each.info}">
<div>
<label value="#bind(each.info)"> </label>
</div>
</popup>
</template>
</hlayout>
Related
This is my demo.
When we hover #image-bg, I want #bg-box-hidden will be display: block.
But I'm losing my way to figure out how to solve the problem
<div class="grid pb1rem">
<div *ngIf="avatar !== null" class="image-content">
<img
class="image-bg"
[src]="avatar"
(click)="selectImage.click()"
hover-class="test"
(mouseover)="onImgMouseover($event)"
(mouseout)="onImgMouseout($event)"
/>
<div #show class="bg-box-hidden" hover-class="show">
<button class="btn only-icon">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</div>
</div>
</div>
The main problem of your code are
Wrong event name.
The element doesn't rendered so you can't targeted the element.
Here is simple solution for you, It might be other way to implement as well.
Try this one, put on your .ts file of the component.
onImgMouseover($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'block';
}
onImgMouseout($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'none';
}
and need modify some on HTML something like
<div
class="grid pb1rem"
(mouseenter)="onImgMouseover($event)"
(mouseleave)="onImgMouseout($event)"
>
<div *ngIf="avatar === null" class="image_wrapper">
<input
type="file"
accept=".png,.jpg"
(change)="updateImage($event)"
class="file-input"
#selectImage
/>
</div>
<div *ngIf="avatar !== null" class="image-content">
<img
class="image-bg"
[src]="avatar"
(click)="selectImage.click()"
hover-class="test"
/>
</div>
<div #show class="bg-box-hidden" hover-class="show">
<button class="btn only-icon">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<div class="box-button-up">
<input
type="file"
accept=".png,.jpg"
(change)="updateImage($event)"
class="file-input"
#selectImage
/>
</div>
</div>
</div>
I want to make full with the button on right side.
I added btn-block on button element but it's dont working i don't know why.
Jsfiddle Here
<div class="fieldset">
<div class="field qty">
<label class="label" for="qty"><span>Qlty</span></label>
<div class="control control-qty-cart">
<span class="quantity-controls quantity-minus"></span>
<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Aantal" class="qty-default input-text qty" data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":1}}">
</div>
</div>
<div class="actions">
<button type="submit" title="In Winkelwagen" class="action primary tocart btn-block" id="product-addtocart-button">
<span>In Winkelwagen</span>
</button>
</div>
</div>
Not sure where you took that bootstrap code from. I tried with this links and it worked. Also better to add it as an external library rather than to put the code there directly.
For bootstrap 3 (css): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
For bootstrap 3 (js): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
For bootstrap 4 get the cdn from this link: https://getbootstrap.com
So i created a sidenav on one of my page and its working properly there
what i want to do is on another page i want to use that same sidenav.
My side nav code:
<form id="keyword-form" class="side-nav rt-side-nav">
<div>
<center><h5>KEYWORDS</h5></center>
<textarea rows="10" cols="50" id="txtarea" class="keyword-text" placeholder="enter comma seperated values for the products" contenteditable="true">{{keywords}}</textarea>
</div>
<div class="keyword-submit">
<center><button type="submit" class="key-submit btn waves-effect waves-light col m12">SUBMIT</button></center>
</div>
</form>
<a data-activates="keyword-form" class="button-collapse"></a>
<div hidden class="keyword">
</div>
Wrap your navbar code in a template then use that template on each page. See example in the Meteor Todo app tutorial. Or if you are using Iron Router put it in your app body template.
Template example:
<template name="sidenav">
<form id="keyword-form" class="side-nav rt-side-nav">
<div>
<center><h5>KEYWORDS</h5></center>
<textarea rows="10" cols="50" id="txtarea" class="keyword-text" placeholder="enter comma seperated values for the products" contenteditable="true">{{keywords}}</textarea>
</div>
<div class="keyword-submit">
<center><button type="submit" class="key-submit btn waves-effect waves-light col m12">SUBMIT</button></center>
</div>
</form>
<a data-activates="keyword-form" class="button-collapse"></a>
<div hidden class="keyword">
</div>
</template>
Then every time you want to show your sidenav:
{{> sidenav}}
My code as follows, generated by a software and I cannot change any of the values.
<div class="cred-field cred-field-ticket-month-or-course">
<div class="cred-label">Month or Course</div>
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" checked="checked" value="wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2">per month</label>
</div>
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" value="wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1">per course</label>
</div>
</div>
</div>
<div style="clear: both;"></div>
I need help in putting this radio button side by side (horizontally).
I cannot do this because it will affect other radio buttons on the same page. Is there any other techniques?
.myzebra-radios-single {
float: left;
}
You can use css cover,
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">
add class 'single', like this:
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios single">
and css code:
.single .myzebra-radios-single{ float:none;}
the single class can be added to any .myzebra-radios-single father in front of the class
addclass like this:
$('#cred_form_3584_1_wpcf-ticket-month-or-course-radios').addClass('single');
the id should be unique
you can target
#cred_form_3584_1_wpcf-ticket-month-or-course-radios .myzebre-radios-single
that is, the class that you want to target, but only if it is a descendant of the given id
I have this code
<div id="one">
<a href="#" id="test1" >
<button title="test1">test1</button>
</a>
<a href="#" id="test1" >
<button title="test1">test1</button>
</a>
<div id="two" style="background-color: red;">
<form action="/adminTest" method="post"><select id="SelectedCode" name="SelectedCode">
<option value="1">1 page</option>
<option value="2">2 pages</option>
</select> <input type="submit" value="OK" />
</form>
</div>
</div>
I would like my select dropdown to appear to the right of the button but it appears below. Is there an easy way to make it appear the way I would like?
You could float: left your link:
http://jsfiddle.net/PWuCm/3/
#test1 {
float: left
}
Updated with your new HTML.. http://jsfiddle.net/PWuCm/4/
As per my comment on your question, I changed the ids to a class.
The easiest way is to add display: inline; to your form element via CSS.
Example.
The easiest solution would be to place that test1 button inside the form.