Unwanted stretched text within Span element HTML - html

I am trying to display a message within a span like below
<span class="glyphicon glyphicon-exclamation-sign alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>`
This span has no text by default but will be populated with error text depending on what error occurs.
The problem is that the text appears stretched within the element and it looks bad. I am not sure what way to approach this. Any advice would be appreciated.
EDIT: The problem only occurs when I add the "glyphicon" class.
I am populating using JS like:
var msg = document.getElementById("ErrorMessage");
msg.innerHTML = "There has been an error";`
I have no custom CSS styles involved here.
<div role="main">
<span id="maincontent"/>
<div class="container">
<div class="jumbotron">
<div style="height: 50px; float: center;">
<h3>List Herd Numbers in Commonage</h3>
</div>
<form role="form" id="HerdForm">
<div class="form-inline">
<label class="control-label" for="commonage_id">Enter Commonage ID:</label>
<input id="commonage_id" type="text" class="form-control" autofocus="autofocus"
placeholder="Enter ID here " />
<button id="submitButton" type="submit" class="btn btn-primary">View</button>
</div>
</form>
</div>
<span class="glyphicon glyphicon-exclamation-sign alert alert-danger"
id="ErrorMessage" style="display: none;" aria-hidden="true"></span>
<div id="loader" class="loader" hidden></div>
<div id="result_table" hidden>
<table class="table table-striped" id="herdTable">
<thead>
<tr>
<th class="threeTH">Herd Number</th>
<th class="threeTH">Share</th>
<th class="threeTH">Active Farmer</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>

A glyphicon does not expect to have other content than the icon itself. The problem is that the glyphicon class has more styles attached to it, which are unwanted for normal text. In this case, the font family!
Solution is to put the glyphicon itself in a span of its own, inside the ErrorMessage span.
span[aria-hidden='true'] {display:none}
a:active + span[aria-hidden='true'] {display:block}
a:active + span[aria-hidden='true']::after {content:'There has been an error.';}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<a>Press here to show text</a>
<span class="alert alert-danger" id="ErrorMessage" aria-hidden="true">
<span class="glyphicon glyphicon-exclamation-sign"></span>
</span>

You can use the glyphicon icon in separate span tag like this:
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>

Related

Submit not submitting form but moving cursor to input field

I'm out of options and a bit frustrated. I'm not that familiar with HTML but I have got two forms one where a button of the type="submit" sends my view model to the server side controller and this here where it does not do it. In this form, if I click the submit button the cursor gets moved to the Surcharges[i].Price input field in my table instead. The only difference between the two forms is that this form here has input fields in the table whereas the other has select fields.
<form autocomplete="off" asp-controller="PriceList" asp-action="UpdateSurchargeFixPrices" enctype="multipart/form-data">
<div class="container">
<div class="card">
<div class="card-header bg-primary text-white">
<h4 class="text-center">#localizer["PriceListEdit"]</h4>
</div>
<div class="card-body">
<input hidden value="#Model.BackTo" asp-for="BackTo" />
<table class="table">
<thead>
<tr class="table-secondary">
<th>#localizer["Bezeichnung"]</th>
<th>#localizer["Gruppe"]</th>
<th>#localizer["Code"]</th>
<th>#localizer["Maximaler Wert in"] #Model.Currency</th>
<th>#localizer["Preis in"] #Model.Currency</th>
</tr>
</thead>
<tbody>
#if (Model.Surcharges != null)
{
for (int i = 0; i < Model.Surcharges.Count; i++)
{
<tr>
<td><input hidden value="#Model.Surcharges[i].Id" asp-for="Surcharges[i].Id" /><input value="#Model.Surcharges[i].Description" asp-for="Surcharges[i].Description" /></td>
<td>
<input value="#Model.Surcharges[i].Group" asp-for="Surcharges[i].Group" />
</td>
<td>
<input value="#Model.Surcharges[i].Code" asp-for="Surcharges[i].Code" />
</td>
<td>
<input value="#Model.Surcharges[i].MaxValue" asp-for="Surcharges[i].MaxValue" />
</td>
<td>
<input value="#Model.Surcharges[i].Price" asp-for="Surcharges[i].Price" />
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
<a class="btn btn-primary" asp-controller="PriceList" asp-action="BackTo" asp-route-backTo="#Model.BackTo">#localizer["zurück"]</a>
<a class="btn btn-primary" asp-controller="PriceList" asp-action="NewSurchargeFixPrice">#localizer["neuer Aufschlag"]</a>
<button class="btn btn-primary" type="submit">#localizer["speichern"]</button>
</div>
</form>
I change the input field to
< input formnovalidate="formnovalidate".../>
and now I can reach the breakpoint in my controller.

Click checkbox within TR element

I'd like to select the checkbox based on the user email. I try somethig like this but doesn't work: "InvalidStateError: An exception was thrown debugger eval code:1".
$x("//span[text()='my.user#mydomain.com']/parent::div/previousElementSibling::td");
What am I doing wrong? Thanks!
<td class="col checkUser selection">
<div class="checkbox um-checkbox">
<input type="checkbox" value="option1">
<label data-select-checkbox="" data-ngretain="u-cd324c08-f215-5784-87b7-98944b18819f"></label>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails" title="My User" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="text-overflow " style="max-width: 90%;display: inline-block;">
<span class="first-name">My </span>
<span class="first-name">User </span>
</span>
<span>
<img style="height: 24px;width:24px;margin-left: 5px;" src="/Admin/img/admin-gray.svg">
</span>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails text-overflow" title="my.user#mydomain.com" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="first-name">my.user#mydomain.com </span>
</div>
</td>
previousElementSibling is not a XPath selector but a property on a element: https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling
An almost similar selector for a XPath is the preceding-sibling selector. But that will return all the preceding siblings so you will have to maximize the result to 1 with the [1] selector:
/preceding-sibling::div[1]
And then you still need to only select the divs containing the checkbox class so you will need the [contains(#class, 'checkbox')] selector and select the input with the /input selector.
The complete selector for the checkbox then looks like this:
$x("//span[text()='my.user#mydomain.com']/parent::div/preceding-sibling::div[contains(#class, 'checkbox')][1]/input")
If however you are using document.evaluate instead of $x you will need to replace the text()='the text' selector with the contains(. ,'the text') selector because the text() selector does not work in the document.evaluate method.
The complete executable code snippet:
var doc = document.children[0].children[1];
var checkbox = document.evaluate(
"//span[contains(., 'my.user#mydomain.com')]/parent::div/preceding-sibling::div[contains(#class, 'checkbox')][1]/input",
doc,
null,
XPathResult.ANY_TYPE,
null
).iterateNext()
console.log(checkbox)
alert(checkbox)
<td class="col checkUser selection">
<div class="checkbox um-checkbox">
<input type="checkbox" value="option1">
<label data-select-checkbox="" data-ngretain="u-cd324c08-f215-5784-87b7-98944b18819f"></label>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails" title="My User" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="text-overflow " style="max-width: 90%;display: inline-block;">
<span class="first-name">My </span>
<span class="first-name">User </span>
</span>
<span>
<img style="height: 24px;width:24px;margin-left: 5px;" src="/Admin/img/admin-gray.svg">
</span>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails text-overflow" title="my.user#mydomain.com" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="first-name">my.user#mydomain.com </span>
</div>
</td>

HTML input required fields don´t work

I have one small web app for learning purposes, and I realised "required" attribute doesn´t work, and I can´t find why. It happens on many browsers, so I guess it is not a browser problem.
Things I tried:
Check <!DOCTYPE html> tag is included
Semi-closed the input tags (but deleted that since I have read here it could make some browsers to work in a wrong way).
Check no value attribute is included, since it could make the required attribute be useless
Just to test, put the input button out of the enclosing tags
The two forms seem to be properly closed
Links I looked:
HTML input required attribute not working for a field
html required tag doesn't work for form submission
textarea's "required" attribute doesn't work even though the value is empty
'Required' attribute not working
Required attribute doesn't work
And many others
My code:
index.php
<?php
session_start();
require_once('models/UsuarioPDO.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/form-styles.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/cookies.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<!--jquery always bwfore bootsrap, sine bootsrap need it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" defer></script>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" >
<script src="/bootstrap/js/bootstrap.min.js" defer></script>
<script src="controls/registerSubmit.js" defer></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<?php
/*if there is the two cookies, we start the session with the user
who belog the data of that cookie*/
if(isset($_COOKIE["id_usuario_myreminder"]) && isset($_COOKIE["random_number_user_myreminder"]))
{
$usuarioAlogear= usuarioPDO::getUserWhenCookie($_COOKIE["id_usuario_myreminder"],$_COOKIE["random_number_user_myreminder"]);
$_SESSION["usuario"]=$usuarioAlogear;
}
/*if there is user logged in, back to main*/
if(isset($_SESSION["usuario"]))
{
header('Location:views/main.php');
exit;
}else
{/*if there is not logged user, show index components*/
/*is comes from registerUser.php but was not possible to insert the user due to repeated email,
we send a session variables here to make this page show a flag, then we destroy the session
to ensure it won´t appear again*/
if( (isset($_SESSION["mailrepetido"]))&&($_SESSION["mailrepetido"])==true )
{
?>
<div class="alert alert-danger" role="alert">
E Mail already exists for another user
</div>
<?php
session_destroy();
}
/*if login attempt was wrong, another flag*/
if( isset($_SESSION["wrongLogIn"]) )
{
if($_SESSION["wrongLogIn"]==true)
{
?>
<div class="alert alert-danger" role="alert">
wrong login
</div>
<?php
session_destroy();
}
}
/*if session is closed*/
if( isset($_SESSION["closedSession"]) )
{
if($_SESSION["closedSession"]==true)
{
?>
<div class="alert alert-info">
Closed Session
</div>
<?php
session_destroy();
}
}
?>
<?php include("views/view_login_register_forms.php"); ?>
<br><br>
<?php include("views/view_footer.php"); ?>
<?php
}/* end else*/
include('views/view_cookies-banner.php');
?>
</body>
</html>
view_login_register_forms.php
<div class="container">
<div class="card bg-light">
<article class="card-body mx-auto" style="max-width: 400px;">
<h4 class="card-title mt-3 text-center">MY REMINDER</h4>
<img src="assets/imagenes/bombilla.svg" class="img-responsive" alt="man_and_bulb">
<p class="divider-text">
<span class="bg-light">LOG IN </span>
</p>
<?php /* remember action path will be called from index*/ ?>
<form id="formLogIn" method="post" action="controls/loginUser.php">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
</div>
<input name="email-Input-Name" class="form-control" placeholder="Email address" type="email" required>
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input name="password-Input-Name" class="form-control" placeholder="Enter password" type="password" required>
</div> <!-- form-group// -->
<!--remember me checkbox-->
<div class="form-group input-group">
<input name="remember-Input-Name" id="id_remember_checkbox" type="checkbox" value="remember"> <label for="id_remember_checkbox" id="id_label_remember">Remember me</label>
</div> <!-- form-group// -->
<p>
<button type="submit" class="btn btn-primary" id="loginButton">Log in to your reminder</button>
</p>
</form>
<p class="divider-text">
<span class="bg-light">OR REGISTER</span>
</p>
<?php /* remember action path will be called from index*/ ?>
<form id="formRegister" method="post" action="controls/loginUser.php">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-user"></i> </span>
</div>
<input name="newUserName" class="form-control" placeholder="Name (required)" type="text" required>
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
</div>
<input name="email-Input-Name" id="id_email-Input-Name" class="form-control" placeholder="Email address (required)" type="email" required>
</div> <!-- form-group// -->
<label for="password-Input-Name">Password must be between 8-20 characters</label>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input name= "password-Input-Name" id="id_password-Input-Name" maxlength="20" class="form-control" placeholder="Password (required)" type="password" required>
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input name="newUserPassRepeat" id="id_newUserPassRepeat" maxlength="20" class="form-control" placeholder="Repeat password (required)" type="password" required>
</div> <!-- form-group// -->
<input name="registerUserInputName" type="hidden" value="true">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" id="registerButton"> Create Account </button>
</div> <!-- form-group// -->
</form>
</article>
</div> <!-- card.// -->
</div>
<!--container end.//-->
The app is here
https://myreminder.avanzartewebs.com/index.php
You can check how, for example, if you include en ampty email, it says things like "E mail already exists for another user" if there is an already created user with an empty email, and it should never be submitted when that happens.
The thing is, when I was developing it, I think required attribute worked... but it stopped working and I don´t know why or when.
I found part of the solution on this post
html5 required validator not working with input type=button
That's because the required validator is only called on submit
I had this code on another file that was causing the error:
$("#registerButton").click(function(e){
e.preventDefault();
//some code
}
What I did is to start working on the submit() event of the form, and not on the click() event of the button.
I found on this post, which helped me a lot.
Submit form after calling e.preventDefault()
I discovered it was a better idea to move the e.preventDefault() to the condition were validation is not right, so I could avoid the submit action only in case the condition is not true.
This is the resulting code which seems to be working now:
$(`#formRegister`).submit(function(e){
//e.preventDefault(); NOT HERE
let newPass=$(`#id_password-Input-Name`).val();
let repeatPass=$(`#id_newUserPassRepeat`).val();
let tamanioNewPass=newPass.length;
let tamanioRepeatPass=repeatPass.length;
/*if passwords are the same, and have minimun 8 characters, ok (16 characters maximum is controlled with html)*/
/*it is only neccesary to test if one of them is >= 8 , because if they are the same and one of them is >=8, the other is equal valid too*/
if((newPass===repeatPass) && (tamanioNewPass>=8) )
{
$(`#formRegister`).submit();
}
else
{
e.preventDefault(); //if pass is wrong, don´t submit!
alert(`could not be possible to do registration submit`);
}
});

Enlarge the Defined Box in Dojo

I want to increase the height and width of the inner box (Arrow is pointing) of the Overlay in the below image using DOJO.
Below is my code. Please let me know where I suppose to add in order to increase the height and width.
<div class="xx-common-overlay" id="overlay-0">
<div class="xx-head">
<p><a class="xx-common-overlay-close" href="#close">Close [x]</a></p>
</div>
<div class="xx-body">
<div class="xx-main">
<a id="xx-access Accessibility anchor" class="xx-access"></a>
<div class="xx-title">
<h2 style="font-size: 1.6em;">Please select </h2>
</div>
<div class="xx-container">
<h2 style="padding-top: 10px;">Items:</h2>
<div class="xx-container-body">
<p style="padding-top: 5px;">
<select multiple="true" id="ItemsOverlay1" name="Items0" style="min-width: 600px;" dojoType="dojox.form.CheckedMultiSelect" onchange="setValues(this, 'fromItems','');"></select>
</p>
<input class="xx-btn-arrow-pri" value="OK" type="button" onclick="xxweb.overlay.hide('overlay-0',this); setValues('null', 'fromPlatform','ok');return false;"/>
<input style="margin-left: 10px;" class="xx-btn-arrow-pri" value="Cancel" type="button" onclick="xxweb.overlay.hide('overlay-0',this); setValues('null', 'fromItems','cancel');return false;"/>
</div>
</div>
</div>
You provided code can not be parse, but you could try the following:
find dojoType="dojox.form.CheckedMultiSelect"
change to style="min-width: 600px;" dojoType="dojox.form.CheckedMultiSelect"

How to put control id based on parent control reference/ID to avoid conflict

i am facing one issue due to one button control existed with same ID at two place in single page.
As i have created a custom field for jira which is appear on issue view screen and edit screen both.
"Edit" screen is just be a DIV and appear as display none till edit is clicked else issue view screen is appear (both on single page).
my created button existed on both the area.
How can we keep the condition like -
if parent is "DIV - edit" then keep different ID of button
ELSE
another ID of button. ? or any another way of jquery to resolve this conflict issue.
Below is stuff which shows same control at two place:
issue view screen stuff on a page:
.... .....
<li id="rowForcustomfield_11200" class="item">
<div class="wrap">
<strong title="final Dynamic Value" class="name">final Dynamic Value:</strong>
<div id="customfield_11200-val" class="value type-dynamicvalue editable-field active"
data-fieldtype="dynamicvalue">
<form id="customfield_11200-form" class="ajs-dirty-warning-exempt" action="#">
<div class="inline-edit-fields">
<div class="field-group">
<table id="customfield_11200:maintable">
<tbody>
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
</tbody>
</table>
<input type="button" value="add" id="finaladd" />**PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" />**PROBLEM CONTROL**
</div>
</div>
<span class="overlay-icon throbber" />
<div class="save-options" tabindex="1">
</form>
</div>
</div>
</li>
......
....
..
note: i have highlighted above with tag comment as "PROBLEM CONTROL
Another stuff on same page for edit issue screen div:
.......
.............
<div id="edit-issue-dialog" class="aui-popup box-shadow aui-dialog-open popup-width-custom aui-dialog-content-ready"
style="width: 810px; margin-left: -405px; margin-top: -263.5px;">
<h2 class="aui-popup-heading">
<div class="aui-popup-content">
<div class="qf-container">
<div class="qf-unconfigurable-form">
<form action="#" name="jiraform" class="aui">
<div class="form-body" style="max-height: 419px;">
<input type="hidden" name="id" value="11100" />
<input type="hidden" name="atl_token" value="BP8Q-WXN6-SKX3-NB5M|6533762274aaa5d16f14dbbe010917f161596d8d|lin" />
<div class="content">
<div class="aui-tabs horizontal-tabs" id="horizontal">
<ul class="tabs-menu">
<div class="tabs-pane" id="tab-0">
<div class="tabs-pane active-pane" id="tab-1">
<div class="field-group aui-field-something">
<div class="field-group">
<div class="field-group">
<div class="field-group">
<label for="customfield_11200">
final Dynamic Value</label>
<table id="customfield_11200:maintable">
<input type="button" value="add" id="finaladd" /> **PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" /> **PROBLEM CONTROL**
</div>
</div>
</div>
<div class="field-group aui-field-wikiedit comment-input">
</div>
</div>
<div class="buttons-container form-footer">
</form>
</div>
</div>
</div>
</div>
.....
...
..
NOTE: above highlighted issue at PROBLEM CONTROL tag comment.
I think you can differentiate by using the id edit-issue-dialog
if($("#edit-issue-dialog").length){
//u r in edit form, and do your stuff
}else{
//in create form do your stuff
}