I currently working on a new webapplication where I have an input for some text. If the text is not valid, a div will popup and show an information. In this div I have a button which closes the popup but this button is not focused. I tried <button autofocus></<button>. The problem of autofocus is, that it focus only once when the pace refreshs.
Does anyone have an idea how to solve that problem?
Here is my unfinished code (popup):
<div class="modal__body">
<p [innerHTML]="'Question.IncorrectNotification' | translate:{value: (policy?.maxTriesBeforeTimeout - userService?.trialNumber)}"></p>
<div class="button-group flex-items-xs-center">
<button autofocus (click)="closeIncorrectAnswerDialog()" class="button button--primary">
{{ 'Question.OkButton' | translate }}
</button>
</div>
</div>
Thanks in advance!
Related
I created a form with many sections the user can save the form using a button at the end of the form or a button that is kept in a fixed side nav. The structure is like this (with additional CCS to keep the form blocked).
<form id="myform" action="" method="POST" role="form">
<div class="sidenav">
<a> some section links</a>
<a> some section links</a>
<button type="submit" class="btn-success">SAVE</button>
<a class="btn-danger" onclick="return confirm('Leaving the page, might cause loosing the data not saved.');" href="/">Leave the page.</a>
</div>
<div class="main">
<div>
... a lot of stuff
</div>
<div>
<button type="submit" class="btn-success">SAVE</button>
</form>
A beta tester using Chrome told me that the button on the side nav sometimes is not working, while the one on the bottom is always working, but I can't reproduce this behaviour in my browsers or understand the causes.
Is there something I am missing? Which is the correct implementation of a form with two submit button?
icheck-bootstrap is a pure css checkboxes and radio buttons for Twitter bootstrap. This implies it will work with any of the frontend libraries. At least that's the way I figured it... And indeed, his use from the readme of his github page for the library :Link to icheck-bootstrap demo with docs Does work it just has a side effect that I can live with.
In at lease one place where I'm trying to use this library, the component is in a modal dialog that is used to login to the site. Below is the html template code for the component:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true" (click)="hideModal()">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title-site text-center"> Login to Rove </h3>
</div>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group login-username">
<div>
<input name="log" id="login-user" class="form-control input" size="20"
[(ngModel)]="model.email" placeholder="Enter User Email" type="email">
</div>
</div>
<div class="form-group login-password">
<div>
<input name="Password" id="login-password" class="form-control input" size="20"
[(ngModel)]="model.password" placeholder="Password" type="password">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<span class="checkbox login-remember">
<input name="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</span>
</div>
</div>
<div>
<div>
<input name="submit" class="btn btn-block btn-lg btn-primary" value="LOGIN" type="submit">
</div>
</div>
</div>
</form>
<div class="modal-footer">
<p class="text-center">
Not here before? <a data-toggle="modal" data-dismiss="modal"
href="#ModalSignup">Sign Up.</a> <br>
Lost your password?
</p>
</div>
The code above is without the icheck-bootstrap implemented code. Below I have changed the key lines of code that will implement the checkbox as per the readme documention on the github site
<div class="icheck-success checkbox login-remember">
<input id="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
this code works as per the readme, unfortunately, after the dialog has been closed the modality of the modal dialog stays and the main page behind it will not allow any input from keyboard or mouse.
Note the input tag in the effective lines, I have change from the name attribute, to the id attribute. That seems wrong to me but, it is as the documentation suggests and, the only way it will completely work. If I do not change the attribute from name to id the checkbox changes to the correct style but it will not check to show a true state. In fact if I remove the icheck-success class from the class attribute of the above div line the behavior is identical and the component will still not take input after the dialog box has been closed if I use the id attribute instead of the name attribute.
I'm using Angular V9 and the dialog component that I am using is from the Valor Software ngx-bootstrap library and, as stated, it works perfectly when I code the html input tag with the name attribute. Does any know of a workaround or possibly what is happening here? the styling is what I want on the site but not at the cost of not having the login dialog effectively lock the site up after you login.
Thanks for any info that you may have on this issue.
I have fix the problem I was having. The first part of the problem was that I was not asking the right question. I have edited the question to ask it in a better way, I think.
I have fixed the problem with the html below:
<div class="icheck-success checkbox login-remember">
<input id="rememberme" name="rememberme" [(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
it seems I had to have a name attribute in the input tag for some reason that I'm not clear about at all but, this is what I did to get the modal dialog to truly clear from the page after close.
I could not figure out how to remove the "choose file" from the input button. I just want the user to be able to drag or upload the file directly by clicking on the image. This is what I have so far : here
<div class="popup-wrapper popup-wrapper-3">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h2>Upload Your Resume</h2>
<p class="small-text">Upload your resume to complete the job application
</p>
<p class="sub">
<label>Resume:</label>
<input accept=".doc, .docx, .pdf" type="file" display="none" placeholder="" name="resume">
<img src="../images/search/apply.gif">
<p class="small-text">Click to browse the file
</p>
<button class="button vlose-button" type="button">Apply Now</button>
</p>
</div>
</div>
</div>
Welcome!
Have you tried with other browsers?
FireFox doesn't show that message.
Another thing (maybe more important), the input type="file" doesn't have placeholder attribute, and there is no "display" attribute.
If you want to use custom attributes you should use the data-* structure.
If you want to style it (i.e hide the input) you should do that with CSS.
You can read more about this here.
Hope that will point you to the right direction and Good luck!
I am working in a UI where a button will be replaced by a panel with small form that can not be closed. The button will disappear after the user clicks on it.
The problem is not about how to do it in JavaScript, The problem is about how to improve the accessibility.
I am trying to solve this problem as a button collapse, hide the button except for screen readers and manage the tabindex of this element after click to be sure no one can access again.
I create a codepen to explain the solution with a simplification of my solution, but seen to hacky for me.
https://codepen.io/luarmr/pen/oWbZYK
HTML:
<div>
<button onclick="showContent(this, 'action-box');" aria-expanded="false" aria-controls="action-box">Do you want to perform an action?
</button>
<div id="action-box" role="region" aria-label="We will do something in this box" aria-hidden="true">
<form action="some action">
<label for="myinput" class="control-label sr-only">
Introduce a value
</label>
<input class="form-control" type="text" name="myinput" value="" placeholder="introduce a value">
<input type="submit" value="send action">
</form>
</div>
</div>
JS:
function showContent(node, id) {
$(node).attr('aria-expanded', 'true')
.attr('tabindex','-1');
$('#'+id).attr('aria-hidden', 'false');
}
Should just add aria-expanded and move the focus to the new panel? I feel this solution overcomplicated.
I've been getting this weird bug with Bootstrap Modals for a few days now, and can't seem to find any sort of answer online. I'd be grateful for any sort of help on this.
My site uses AngularJS + Bootstrap. The specific part I'm working on right now has two buttons that bring up a modal, and a grid below them that shows the user a bunch of info. The weird part is, the button that allows users to create an entry on the grid will bring up a form, but not allow them to edit the first two fields. The second button, which lets users edit an entry on the grid, is pretty much formatted the same as the create button, yet that works fine. This also only occurs on page refresh only, and is resolved after the user clicks the edit button to bring up that modal, then closes that. Afterward, the create modal will work fine. Here is the code for these parts of the site:
Modal Buttons:
<div class="row-fluid" ng-init="getAllSources()">
<!-- Create Source Modal Button -->
<button class="btn btn-success" data-toggle="modal" data-target="#createSource" ng-click="initCreateSource()">+ Create Source</button>
<!-- Edit Source Modal Button -->
<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#editSource">Edit Source</button>
<!-- Sources Grid -->
<div ng-show="visible.grid == true" class="edus-admin-manage-grid" style="margin-left:0;" ng-grid="sourceGridOptions"></div>
</div>
Modals:
<div class="modal fade" id="createSource" tabindex="-1" role="dialog" aria-labelledby="createSourceLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="createSourceModal">Create Source</h4>
</div>
<div class="modal-body" ng-include="'source-create.html'"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="getAllSources()" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="getAllSources()" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
(The Edit Sources Modal looks the exact same as the Create Sources Modal, with the exception of a different link in the ng-include, and some labels here and there)
Here is the part of the code that doesn't 'work' on page refresh:
<form name="form" novalidate>
<div class="row-fluid">
<label for="inputID">* Source Id</label>
<label for="inputName">* Source Name</label>
</div>
<div class="row-fluid">
<input type="text" class="span4" id="inputId" placeholder="Title" ng-model="createSource.createId" required>
<input type="text" class="span8" id="inputName" placeholder="Source Name" ng-model="createSource.createName" required>
</div>
<div class="edus-admin-manage-label-rows row-fluid ">
<label class="edus-admin-manage-label span4" for="inputId">* Activity Name</label>
<label class="edus-admin-manage-label span4" for="inputName">* Activity Label</label>
</div>
<div class="row-fluid form-inline">
<select class="span4" ng-model="activityType.activity" ng-options="value.name for value in multipleActivityTypes" data-style="btn" bs-select></select>
<select class="span4" ng-model="activityType.label" ng-options="value for value in activityLabels" data-style = "btn" bs-select></select>
<input class="btn btn-default span4" type="submit" ng-click="activityTypeSubmit()" value="Add Activity" data-style="btn"/>
</div>
...
</form>
Everything else after the '...' in the third snippet of the code works - I just can't select any options from the pull down menu, or input anything for the Source Id/Name fields. I figured the ngClick I had in the Create Source button that brought up the modal could've been the problem, so I removed that to see if the form was editable - no luck there. Any help is greatly appreciated!
Update:
Originally, I had my HTML organized as so:
<div>
<!-- Modal Buttons -->
</div>
<!-- Modals -->
When I moved my modals back into the divs that contained the buttons, like so:
<div>
<!-- Modal Buttons -->
<!-- Modals -->
</div>
everything worked as intended. This seems like some sort of scoping issue, which I didn't think would cause a problem in HTML - can anyone shed some light on this type of problem?
It's very hard to determine issue when you paste it here wildly. Please use plunker for such issues. And look at this demo in Plnkr
Consider your data structure is like
$scope.activityType = {
'activityType.activity': {}
};
$scope.multipleActivityTypes = [
{
'name': 'asd',
'val': 123
},
{
'name': 'qwe',
'val': 234
}
];
p.s. i should comment this, but not enought pts. so sorry for that