I am using Karate and I am finding the way how to match value in deeply placed span.
I have this case:
...
<form action="#">
<div class="row">
<div class="col-lg-12">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<div class="card-body">
<p>...</p>
<div class="form-group " style="display: grid; grid-template-rows: auto auto;">
<span>
<label for="title">Title</label>
<input name="title" id="title" class="form-control" placeholder="e.g. My MacBook Key" value="">
</span>
<span class="invalid-feedback">Title is required</span>
</div>
<div class="form-group " style="display: grid; grid-template-rows: auto auto;">
<span>
<label for="key">Key</label>
<textarea name="key" id="key" class="form-control" rows="12" placeholder="Typically starts with "ssh-rsa" or "ssh-ed25519""></textarea>
</span>
<span class="invalid-feedback">Key is required</span>
I need to check value of last span (using match) - last line (if "Key is required" is present in span).
I have tried some code variations but I was not successful. E.g.:
* match text('form/div/div/div/div:2/div:2/span:2') == 'Key is required'
or
* match text('{span:2}.invalid-feedback') == 'Key is required'
Any idea how to solve it without using full xpath?
Thank you.
There is a very easy way to do this:
* def messages = scriptAll('.invalid-feedback', '_.innerHTML')
* match messages[1] == 'Key is required'
Related
// here is input field with the label, "WLC Name" I want to align in the same row.
<div class="form-group row">
<label class="col-md-2 col-form-label text-right">WLC Name</label>
<div class="col-lg-2 col-sm-11">
<input type="text"value="BSNL-WLCXXX" class="form-control" formControlName="wlc_name" id="wlc_name" #wlcname>
// I want to put below div in the same row, but it is not coming.
<div>
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
</div>
// html code for the tag : app-right-tooltip
<div>
<span class="glyphicon glyphicon-question-sign blue" style="font-size: 15px " aria-hidden="true" [popover]="getData()"
popoverPlacement="right"
[popoverOnHover]="false"
[popoverCloseOnMouseOutside]="false">
</span>
</div>
snapshot
You need to float app-right-tooltip
<app-right-tooltip style="float:right"></app-right-tooltip>
Otherwise, you need to have some structure to wrap this component
<div class="row">
<div class="md-2">...</div>
<div class="md-10"><app-right-tooltip /></div>
</div>
Try this
css
.exampleClass {
dispaly: inline-block;
}
Html
<div class="exampleClass">
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
Is it possible to make all prepend add-ons same width?
i.e in this screenshot I would like Email, License Key 1 & License Key 2 to be the same length, is that possible.
If I did not use add-ons and just used regular labels and a form grid it would be possible but it seems to be the prepend addons look much nicer then regular labels.
Relevant Html is
<main class="container-fluid">
<form action="/license.process" name="process" id="process" method="post">
<div class="input-group mb-2">
<div class="input-group-prepend">
<label class="input-group-text" id="licenseEmaillabel">
Email
</label>
</div>
<input type="text" name="licenseEmail" value="paultaylor#jthink.net" class="form-control" aria-describedby="licenseEmaillabel">
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<label class="input-group-text" id="licenseKey1label">
License Key 1
</label>
</div>
<input type="text" name="licenseKey1" value="51302c021440d595c860233f136731865a12cfad2ce2cc2" class="form-control" aria-describedby="licenseKey1label">
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<label class="input-group-text" id="licenseKey2label">
License Key 2
</label>
</div>
<input type="text" name="licenseKey2" value="1e50214376557ba3e1dede6c490f33d07b738515c8c2a03" class="form-control" aria-describedby="licenseKey2label">
</div>
<h3 class="error" style="visibility:hidden;">
</h3>
<input type="submit" name="cancel" value="Cancel" class="btn btn-outline-secondary">
<input type="submit" name="save" value="Save" class="btn btn-outline-secondary">
<button onclick="j2html.tags.UnescapedText#d352d4f" type="button" class="btn btn-outline-secondary">
Get License
</button>
</form>
</main>
So this is actually pretty complicated, because each label is in it's own div and not part of a sibling chain. And afaik, Bootstrap does not support this type of sizing, only relative sizing form classes (which essentially only makes the font bigger). That kind of eliminates most possibilities that I can think of using flex/child properties. However, I think hard-coding is not the right word usage in this circumstance. But the idea is the same.
The example of using min-width is not right in this circumstance because min-width !== width=xx. For example, if you set min-width to 50px, but 1 string of text is longer than that, you still have the same problem as above. Essentially, if you don't want to set them all to one specific value, then your only other option is to use Javascript.
Here is my pure CSS workaround:
.input-group-prepend {
width : 35%; /*adjust as needed*/
}
.input-group-prepend label {
width: 100%;
overflow: hidden;
}
Additionally you could use Boostrap specific inline styling classes, but that's arbitrary and one of the issues with Bootstrap (too many inline classes clutter code, and then you would have to manually add it to each element). Just offering it as an alternative
For example:
<div class="input-group-prepend w-50"> /* grows to 50% of parent*/
<label class="input-group-text w-100" id="licenseEmaillabel"> /* grows to 100% of parent */
Just using the bootstrap classes:
<div class="input-group">
<div class="input-group-prepend col-3">
<span class="input-group-text col-12">Name:</span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="input-group">
<div class="input-group-prepend col-3">
<span class="input-group-text col-12">Address 1:</span>
</div>
<input type="text" class="form-control" placeholder="Street Address">
</div>
Looks like this:
Using jquery you could do something like this:
var biggest = Math.max.apply(Math, $('.input-group-text').map(function(){ return $(this).width(); }).get());
$('.input-group-text').width(biggest);
Math.max.apply reads all .input-group-text widths and returns the biggest one. The next line applies this width to all .input-group-text divs.
Sources:
jquery-get-max-width-of-child-divs
add w-50 class to input-group-prepend and
add w-100 class to input-group-text
like this
<div class="input-group">
<div class="input-group-prepend w-50">
<span class="input-group-text w-100">label</span>
</div>
<input type="text" class="form-control " />
</div>
<div class="form-row">
<div class="col-md input-group mb-3">
<div class="input-group-prepend col-5 col-sm-4 col-md-3 col-lg-3 col-xl-2 px-0">
<span class="input-group-text w-100">Label textx</span>
</div>
<input class="form-control" type="text">
</div>
</div>
This will work! Adjust the col grids accordingly for .input-group-prepend!
I have been looking into Bootstrap 4 - beta, however when using .is-invalid with .input-group it doesn't seem to show up.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label for="label">Label</label>
<div class="input-group">
<div class="input-group-addon">
label
</div>
<input type="text" value="" name="label" class="form-control is-invalid">
</div>
<div class="invalid-feedback is-invalid">
<strong>Invalid Label</strong>
</div>
</div>
How are you meant to display an invalid message while using .input-group?
Adding the following CSS works as a workaround, but it seems odd.
.form-group.is-invalid {
.invalid-feedback {
display: block;
}
}
Boostrap 4 is very buggy. My suggestion is to replace:
<div class="invalid-feedback">
Text here
</div>
With:
<div class="text-danger">
Text here
</div>
And the second one looks virtually the same and will not fail.
For a better look, try:
<div class="text-danger">
<small>Text here</small>
</div>
They haven't taken into account their own examples using input group addons and buttons, even with a column model. The markup does only facilitate "neighboring" elements, not parent > neighboring element (there is no CSS rule for that).
It seems, for now, you should fall back to Alpha 6 or program your own CSS classes accordingly. I've done the same, unfortunately.
Please note when reading my answer that this was posted just as the beta was released. :)
I solved it by adding d-block class:
#error('terms')
<div class="invalid-feedback d-block" role="alert">
<strong>{{ $message }}</strong>
</div>
#enderror
Happy coding!
Bootstrap docs here about d-block:Display property
The way Bootstrap does override the display from none to block is by checking first for a previous is-invalid class, for example! Check this CSS out:
That means, in case of an error, first is-invalid must be applied on an element and then invalid-feedback on another afterward! Like the following in Laravel, for instance:
{{-- Either following an input --}}
<input type="password" id="registerPassword"
class="form-control #error('register_password') is-invalid #enderror"
name="register_password" required autocomplete="new-password"
>
#error('register_password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
{{-- Or separately in DOM --}}
#error('register_password')
<div class="is-invalid">...</div>
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
Working example with a trick using flex-wrap and w-100:
<div class="form-group">
<label class="form-control-label">Name</label>
<div class="input-group flex-wrap">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<input name="name" class="form-control is-invalid" type="text">
<div class="invalid-feedback w-100">Custom error</div>
</div>
</div>
Add .is-invalid to the .input-group.
If the invalid-feedback element is preceded by an element with .is-invalid it will be displayed -- that is how server-side validation is supported.
I found this solution
<div class="input-group ">
<div class="input-group-prepend">
<div class="input-group-text">Start Date</div>
</div>
<input type="text" class="form-control is-invalid" placeholder="Date Input">
<div class="invalid-feedback order-last ">
Error Message
</div>
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
Inspecting the .invalid-feedback class I've found this definition (bootstrap 4.3)
.invalid-feedback {
/*display: none;*/
width: 100%;
margin-top: .25rem;
font-size: 80%;
color: #dc3545;
}
You could copy and rename this class and use it without the built-in limitations
here is my "diy" answer
html
<div class="container">
<div class="row p-3">
<div class="col-md-6 mb-3">
<label class="sr-only">End Date/Time</label>
<div class="input-group">
<div class="input-group-prepend ">
<div class="input-group-text error-feedback">Start Date</div>
</div>
<input type="text" class="form-control error-feedback" placeholder="Date Input">
<div class="invalid-feedback order-last ">
Error Message
</div>
<div class="input-group-append error-feedback">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
css
.error-feedback{
border:1px red solid;
}
I know there is a bit off but, IMO pretty good compared this example
<div class="form-group">
<label class="form-control-label">Name</label>
<div class="input-group flex-wrap">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<input name="name" class="form-control is-invalid" type="text">
<div class="invalid-feedback d-block">Custom error</div>
</div>
Alternatively you can add the .is-valid/.is-invalid class to the parent element .input-group. Then you can change the css to add the red border to the child elements like this:
.input-group.is-invalid .form-control,
.input-group.is-invalid .custom-select {
border-color: #FA5252;
}
.input-group.is-invalid .input-group-prepend .input-group-text {
border: 1px solid #FA5252;
}
.input-group.is-valid .form-control,
.input-group.is-valid .custom-select {
border-color: #05A677;
}
.input-group.is-valid .input-group-prepend .input-group-text {
border: 1px solid #05A677;
}
I'm using Bootstrap 4.3 and following code worked for me. Try adding "validated" class with "form-group" and group error message inside the input-group.
<div class="form-group validated">
<label class="form-control-label">Name</label>
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<input name="name" class="form-control is-invalid" type="text">
<div class="invalid-feedback">Custom error</div>
</div>
</div>
In my app, I'm namespacing Bootstrap's styles so that they don't pollute the styles outside my app:
.my-app {
#import '~bootstrap/scss/bootstrap.scss';
}
What I found by looking through the generated styles is that the validation css ultimately gets clobbered due to the mixin that generates it into:
.was-validated .my-app:invalid ~ .invalid-feedback,
.was-validated .my-app:invalid ~ .invalid-tooltip,
.my-app.is-invalid ~ .invalid-feedback,
.my-app.is-invalid ~ .invalid-tooltip {
display: block;
}
Note that it's .my-app.is-invalid and not .my-app .is-invalid. It looks like this is a consequence of the form-validation-state-selector mixin that generates it, which has a comment suggesting it's the result of a dart-sass compatibility fix. One hack I could do is add the my-app class to every input that needed validation but that's not ideal.
I was able to resolve it by extending my namespace selector with a wildcard as follows:
.my-app * {
#import '~bootstrap/scss/bootstrap.scss';
}
I am using Angular js, in which i have the below control.
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container form-horizontal" ng-show="createMenu">
<br />
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">Name<em style="color:red">*</em></label>
<div class="col-sm-4">
<input type="text" maxlength="150" class="form-control" required="" ng-model="nName" id="nName" name="nName" />
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.nName.$error.required">Please enter Name.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Recipient Group:<em style="color:red">*</em></label>
<div class="input-group col-sm-4" style="padding-left:10px;">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" required="" placeholder="Search the group" ng-model="searchDatalocation" ng-change="searchgroups()" name="searchValue">
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.searchValue.$error.required">Please select a Recipient group.</span>
</div>
</div>
</form>
</div>
</body>
The error message "Please enter Name" appears on right side of the textbox, however, the error message "Please select a Recipient group" appers below the control. I have tried changing the css, but it has not worked. How to set the error message to be shown on right side after the control.
Thanks
Style the .input-group div with display: inline-table; and float:left;
Please also note that there is one missing closing tag </div> for class="container form-horizontal"
I have a ng-repeat control having textbox, textarea, and a delete image icon. I am having a required validator added for the textbox , textarea. Once the span error message is shown, the alignment is getting distorted.
Below is the code used:
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5">Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
</a>
</div>
</div>
</div>
</div>
How to set the alignment properly for span when using ng-repeat? Initial load the controls are aligned correct. If i remove any item in title or description, and click submit, the error messages are shown, but the UI is getting distorted.
Thanks
Bootstrap's row class includes "clearfix"ing. This allows row's of varying height columns to consistently start at the left. Currently your html is using a nested div within your row class div as your repeating element. If you move the ng-repeat up to the row class div the clearfixing will take effect after each set of columns, and things should look visually as expected.
Updated HTML
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5">Description</label>
</div>
</div>
<div class="row" ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
</a>
</div>
</div>
The solution provided by #haxxxton is the answer, which is:
you should move your ng-repeat up to your as this will provide the "clearfix"'ing that bootstrap columns need in order to allow for the height change of the additional span. ie <div class="row" ng-repeat="Descriptions in testsWithDescription">