I have a Slideout Menu control that looks something like this
There is a toggle switch on top which is currently switched off(i.e basic mode) and i want the elements to not be visible when the toggle is in basic mode, except for the Definition label and the dropdown next to it. When the switch is turned on (i.e Advanced mode) the menu should look like this (the image).
The html for the toggle switch is
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
The UI controls are not properly aligned as I am learning to write HTML/CSS on the go.
This is one of the controls that should not be available in the screen when the toggle switch is in basic mode
<div class="dropdowns-container">
<label kmdFormLabel>Rounding Mode</label>
<kmd-dropdown
[(ngModel)]="roundMode"
[options]="allRoundModes"
[disable]="!editable"
size="medium"
[externalLabel]="true"
inlineLabel="Select Rounding Mode"
(onChange)="roundModeChange($event)">
</kmd-dropdown>
</div>
How can this be done, is there any specific control or Angular setting that i could use?
it's only create a variable, e.g. "advancedShow", and enclosed all the inputs in a ng-container with an "if"
<input type="checkbox" [(ngModel)]="advancedShow">
<span class="slider round"></span>
</label>
...here your inputs always visible..
<ng-container *ngIf="advancedShow">
...here yours inputs only sisible if slider is true...
</ng-container>
Related
I have few checkboxes on my page, with few of them checked by default.
Through my code, I need to handle unchecking of all text boxes on the page and then proceed.
The problem is the checkboxes (both checked and un-checked) have exactly the same HTML / DOM structure with same attributes / values except for the "::after" appearing when the checkbox is checked.
How do I write a locator to find out if the element is checked or unchecked, and then proceed to uncheck it.
<!-- When checkbox is unchecked -->
<label class="someclasslabel" on-click="[[event]]">
<span>Male</span>
<input type="checkbox" data-bind="checked: $properties.value">
<span class="checkbox"></span>
</label>
<!-- When checkbox is checked -->
<label class="someclasslabel" on-click="[[event]]">
<span>Male</span>
<input type="checkbox" data-bind="checked: $properties.value">
<span class="checkbox">
::after
</span>
</label>
I want a locator, so that I can get attribute if its checked or unchecked, and then uncheck it if already checked.
You could try executing some Javascript on your checkbox element to get the value.
after_value = driver.execute_script
("return window.getComputedStyle(document.querySelector('.someclasslabel'),':after')
.getPropertyValue('content');")
This is a bit of a hack, but worth a try.
After getting all the checkbox elements (with the same selector) no matter if they are checked or not, you can then iterate through them with a loop, and check if they are checked with the selected method. (C# reference here https://seleniumhq.github.io/selenium/docs/api/dotnet/ for RemoteWebElement.Selected Property).
If .selected == true -》click; if not selected, do nothing;
I am trying to build a basic colorpicker with predefined colors.
for that I have an object "colors" with color-values as it's properties:
public colors = [
{ value: '#ffffff' },
{ value: '#919191' },
{ value: '#555555' },
// and some more
];
Following some examples on the web, I set up a select-option structure in my html:
<select name="role" [(ngModel)]="item.color">
<option *ngFor="let color of colors" [value]="color.value">
<div class="color-box-modal" [style.background]="color.value"></div>
</option>
</select>
This does create a dropdown menu for the options, though the colors inside don't show up. The class color-box-modal has height and width values as I did not intend to have a dropdown, but several colored boxes to click on in order to select.
Is there an alternative to the select-option structure which allows me to not have a dropdown, but just several colored boxes? Radio-buttons/checkboxes are not the desirerable way either, as I want to have a clickable field on it's own that reacts to being clicked.
If there is no alternative, is it possible to do the ngModel binding on a button-click?
edit:
After testing option 2 on Osman Ceas answer, I now have this:
<ng-template #content let-c="close" let-d="dismiss">
<i class="close icon" (click)="d('Close click x')"></i>
<div class="header">
Choose a new color
</div>
<div class="content">
<label for="col1" class="color-box-modal" style="background-color: #ffffff">
<input (click)="c('#ffffff')" id="col1" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffffff'">
</label>
<label for="col2" class="color-box-modal" style="background-color: #ffff00">
<input (click)="c('#ffff00')" id="col2" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffff00'">
</label>
<label for="col3" class="color-box-modal" style="background-color: #00ffff">
<input (click)="c('#00ffff')" id="col3" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#00ffff'">
</label>
</div>
<div class="actions">
<div class="ui button" (click)="c('Close click cancel')">Cancel</div>
</div>
</ng-template>
Though the ngModel binding does not seem to work.
The whole thing opens in a modal (the template), which in itself works, just binding to the ngModel, as I said, does not.
A native HTML select will only render text inside and any other tag will be ignored, so that's why your boxes are not showing.
If your wrap your radio button or checkbox in a <label> with the attribute for equals to an ID given to the <input>, you can basically click anywhere on the label, lets say some adjacent text, and the click will propagate to the input so the binding will still work.
You can create your own custom form controls, check out this article. So you could create a custom color picker form element that will work in any form using template forms or reactive forms.
Have a nice day
Now, this might not help everyone, but it was my solution in the end.
I started with a loop, item of items where the template in my question was meant for one single item.
I solved, or rather worked around the binding situation by just moving each item to it's own component, somewhat like this:
<div *ngFor="let item of items>
<app-sub-item [item]="item"></app-sub-item>
</div>
inside I have severel of these:
<label for="col1" class="color-box-modal" style="background-color: #ffffff">
<input (click)="setColor('#ffffff')" id="col1" type="radio" class="hidden">
</label>
With the following being in the ts-file:
setColor(color: string) {
this.item.color = color;
}
This actually works just fine at the moment.
Hope whoever reads this issue can find some use in my solution.
I am using mdl-checkbox and a text on the right side of the checkbox.
I would like to switch the order of these two components in case of RTL languages (text to the left of the checkbox) but I can't move the text to the left (it is always on the right).
I tried many variations of "dir=rtl", direction:rtl, align, etc.. but the text remain on the right side.
I also tried using some CSS options but I still failed to switch the order.
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" />
<span class="mdl-checkbox__label">My Text</span>
</label>
JSFIDDLE Example
How can I easily switch the order between the text and the checkbox without affecting the rest of the page?
All other components on the page behave fine in RTL languages.
Thanks!
Please check the links given below. These might help you creating check boxes.
Github Link: I have not used but you can check it. May this one also helps you.
RTL CDN for MDL : I have created snippet using this.
Check this one also
#a {
width: 90px;
}
<link href="https://cdn.rtlcss.com/mdl/1.2.1/material.rtl.min.css" rel="stylesheet" />
<script src="https://cdn.rtlcss.com/mdl/1.2.1/material.min.js"></script>
<div id="a">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
</div>
After making diff with material.rtl.min.css with material.min.css I found that the following CSS solve the problem:
.mdl-radio.is-upgraded, .mdl-checkbox.is-upgraded{padding-right:24px}
.mdl-radio__outer-circle, .mdl-checkbox__box-outline{right:0;}
.mdl-radio__inner-circle {right:4px;}
.mdl-radio__ripple-container, .mdl-checkbox__ripple-container{right:-10px;}
JSFIDDLE Solution
Thank you all for your help!
Gmail has the feature where you can select labels using checkboxes and it is hidden inside a div element where you can scroll up and down.
It also allows you to have customized actions like create new label at the bottom.
It also allows you to do filtering at the top with a simple search bar.
What is the simplest way to implement something like that and allow me to put in customized actions like the Create new label at the bottom?
At the barest minimum have a way to display all the checkboxes in a scrollable div or select element.
UPDATE:
Currently, I have only the following checkboxes
<div class="input select">
<label for="SiteSite">Sites</label>
<input type="hidden" name="data[Site][Site]" value="" id="SiteSite">
<div class="checkbox"><input type="checkbox" name="data[Site][Site][]" value="1" id="SiteSite1"><label for="SiteSite1">ODSite:P11379-440YishunAve11 HWSW_ESTA ENO21.000070.10001 92640145</label></div>
<div class="checkbox"><input type="checkbox" name="data[Site][Site][]" value="2" id="SiteSite2"><label for="SiteSite2">ODSite:P11374-SGRecClub HWSW_ESTA ENO21.000070.10002 92640147</label></div>
</div>
You can use a plugin called Select2, which has all the options you expect from a <SELECT> tag.
http://img594.imageshack.us/img594/543/select2.png
I have made an html wizzard for making order. There are four steps, in each is bunch of radio buttons. I redesigned each radio button label to large button (and hidding the radio input itself). This all work greatly on classic PC. But I've run into problem with mobile device (iPHONE & iPAD, I can't test it on other devices, because I don't have any), which are unable to select the radio button.
I've found only one notice of this problem here on stackoverflow, but the solution published there isn't function either.
The original inspiration comes from apple online store for selecting differnt color of device.
My example code:
<label class="option" for="edit-term-worker">
<input id="edit-term-worker" class="form-radio" type="radio">
<span class="worker-name">Sandra</span>
</label>
It's there need some JS, or I'have some flaw in my code?
Thank you all for your help.
Have you tried this?
<input id="edit-term-worker" class="form-radio" type="radio" />
<label class="option" for="edit-term-worker" onclick="">
<span class="worker-name">Sandra</span>
</label>
EDIT: Added an empty onclick, according to this that should do the trick: HTML <label> command doesn't work in Iphone browser
Note that you shouldn't put the radio button into the label tag, it should be outside.