I have a ui-select-match and choices component that is hiding behind the div/form.
This ui-select component is wrapped within a and the parent is and and eventually
> <ui-select mutliple autofocus="true" theme="bootstrap" style="width:
> 400px;" ng-model="selectedAssignMembers" sortable="true"
> close-on-select="false"> <ui-select-match placeholder="Select
> person..."> <span>{{person.firstname}}</span> </ui-select-match>
> <ui-select-choices ng-style="{'position':fixed, 'top': auto, 'left':
> auto, 'width': inherit, 'z-index': 99999}" position="down"
> repeat="person in persons"> <div
> ng-bind-html="person.firstname"></div> <small> email: {{person.email}}
> </small> </ui-select-choices> </ui-select>
Related
I have a NextJs project and I am using a tailwind range slider to filter the price of products. The range slider can be updated by sliding the thumb, or changing the value in one of the two input fields (min & max). The component for the range slider is being used by a modal as a parent component. It works as expected on the basic layout page, however when being used in a modal, the value of the input box is not updating on the front end meanwhile the value is updating on the back end. Here is part of the code for the range slider:
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if(event.target.valueAsNumber >= currentMin && event.target.valueAsNumber <= currentMax){
setValue(event.target.valueAsNumber)
setCount(count + 1)
}
}
const handleMinChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if(event.target.valueAsNumber >= currentMin && event.target.valueAsNumber <= currentMax){
setMinValue(event.target.valueAsNumber)
setCount(count + 1)
}
if(isNaN(event.target.valueAsNumber)) {
setMinValue(currentMin)
}
};
useEffect(() => {
setValue(currentMax)
setMinValue(currentMin)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentMax])
return (
<div>
<input
id="minmax-range"
type="range"
min={currentMin}
value={value}
max={currentMax}
onChange={handleChange}
className="w-full h-1 bg-black rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
/>
<div
className="flex items-center"
style={{ width: `${value}%` }}
>
</div>
<div className="my-2 flex justify-between">
<label className="text-black"><span className='p-1 absolute'>$ </span>
<input
type="number"
className="pl-3 border p-1 w-12 bg-white"
placeholder={`${currentMin}`}
defaultValue={`${currentMin}`}
onChange={handleMinChange}
/>
</label>
<span className="flex items-center justify-center px-1">to</span>
<label className="text-black"><span className='p-1 absolute'>$ </span>
<input
type="number"
className="pl-3 border p-1 w-12 bg-white"
placeholder={`${value}`}
defaultValue={`${value}`}
onChange={handleChange}
/>
</label>
</div>
</div>
)
Now I would like to share a snippet of HTML that I have copied over from the inspector. The input value states 71 which is correct, however the number displayed on the front end is 80 as you can see under the #shadow-root element. Why is this value being hidden by Shadow DOM? How can I prevent this from functioning this way? Thank you for any help in advance.
<input type="number" class="pl-3 border p-1 w-12 bg-white" placeholder="71" value="71" data-form-type="other">
#shadow-root (user-agent)
<div pseudo="-webkit-input-placeholder" id="placeholder" style="display: none !important;">71</div>
<div id="text-field-container" pseudo="-webkit-textfield-decoration-container"><div id="editing-view-port"><div>80</div></div><div pseudo="-webkit-inner-spin-button" id="spin"></div></div>
<div id="editing-view-port"><div>80</div></div>
I'm trying to implement a dropdown item that would allow the user to select an image when he clicks on it:
<Dropdown
isOpen={this.state.dropdownOpen}
toggle={this.toggle}
direction="left"
>
<DropdownToggle
tag="span"
onClick={this.toggle}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen}
color="danger"
>
<span className="badge badge-default w-100 h-100 cursor-pointer-no-color chat-box-button">
<i className="fa fa-plus cursor-pointer-no-color" />
</span>
</DropdownToggle>
<DropdownMenu className="dropdown-danger scrollable-drop-down-menu">
<DropdownItem className="lodeep-theme-button drop-down-no-transparent btn-outline-default">
<label
htmlFor="avatar-upload"
style={{
cursor: "pointer",
}}
title="Change profile image"
>
<input
id="avatar-upload"
type="file"
accept="image/*"
style={{ display: "none" }}
onChange={this.onSelectFile}
/>
<i className="fa fa-picture-o"></i>
</label>
</DropdownItem>
</DropdownMenu>
</Dropdown>
This is the result:
The problem is that when I click on the dropdrown item, the dropdown menu closes and nothing happens. Any idea how to fix this??
I added style={{ display: "none" }} to keep only the image icon and make the UI look better. If I remove it, I will get a normal input and it would work just fine.
One parent page I have an icon, clicking which a new modal window opens. In that window there's a drop-down list and the value selected from the drop-down should appear in the parent page text-box.
Parent page html:
<input type="text" id="editGroupName" class="form-control"
style="width: 250px;" placeholder="Group Name"
ng-model="srchDealer.groupId" />
<i class="glyphicon glyphicon-new-window"
style="margin-top:10px; margin-left:10px; float:right; font-size:larger; cursor:pointer"
ng-click="createNewGroupModal()"></i>
Modal window html:
<select id="srchDealerGroup" ng-model="srchDealer.groupId"
ng-options="gr.id as gr.name for gr in dlrGroups"
style="width: 75%;" class="form-control">
<option value="" selected>Select Group</option>
</select>
How do I bind the drop-down list value from the modal window with the text field in the parent window?
Why cant we just do it with jQuery
$('#srchDealerGroup').change(function() {
$('#editGroupName').val(this.val());
// OR
$('#editGroupName').val(this.val($('#srchDealerGroup').val()));
});
I have a combo box which is for age in html I want to change it from left to right side to right to left side. here is the code:
<div class="form-group" dir=rtl><label class="col-sm-2 control-label">سن</label>
> <div class="col-sm-2"><select class="form-control m-b"
> name=Location>
> <option></option>
> <option>18-25</option>
> <option>26-35</option>
> <option>36-45</option>
> <option>46 بالاتر</option>
> </select>
> </div>
> </div>
If you are using bootstrap, try this https://github.com/morteza/bootstrap-rtl
I am trying on a JSP model window is not read automatically by a screen reader. This modal window is a second modal window first modal window is read automatically. But not the second model window.
Here is the code:
<div id=second-popup style="display:none" aria-live="polite" role="dialog">
<input type="hidden" id="none-label" value="nonetext"/>
<jsp:include page="somepagelinkhere.jsp" flush="true"/>
<html:hidden property="intialized"/>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<html:select styleId="" property="">
<html:options collection="" property="">
</html:select>
<html:select styleId="" property="">
<html:options collection="" property="">
</html:select>
</div>
<c:set var="var1"><bean:message /></c:set>
<input type="hidden" value="" id="removelabel">
<div class="div5">
<form:label property="" >
<select name="country" id="countrylabel" class="country" >
<option value="">${countrieslist}</option>
<c:forEach var="" items="">
<option value=""> ${countrieslists}</option>
</forEach>
</div>
<div id="city" class="citylist">
<form:label property="">
<select name="" id="" class="">
<option value=""></options>
</select>
</div>
</div>
</div>
</div>
,showhide: function(){
$("button").click(function(e){
e.preventDefault;
$("button").attr("aria-hidden","true");
$("second-popup").attr("style","display:block");
$("second-popup").attr("aria-hidden","false");
});
}
$(document).ready(function(){
$("first-popup").attr("tabindex",0);
$("first-popup").attr("tabindex",0);
$("Second-popup").focus();
});
In the above code first div contains second modal window content code blue print. I need this to be read automatically read by NVDA screen reader
and I tried by putting role="dialog" aria=labelledby="id" aria-describedby="" on the parent div, but still screen reader is not reading automatically.
I was able to make the screen reader automatically read the content of a modal overlay with a combination of the following on my overlay section:
aria-labelledby="title_id" aria-describedby="body_id" aria-live="assertive"
plus setting the focus to the autofocus element in the overlay content:
overlay.querySelector('*[autofocus]').focus();
It only worked with all these things together.