I have a question regarding the datalist style. I got a code that removes the little arrow that is in the input (default in the Chrome browser). But now I can't find a way to style the suggestion box with CSS. I'm using Angular 15
HTML
<input type="text" class="form-control" role="search" list="impostoBox" id="impostoInp" style="position: relative;" name="impostoBox" aria label="Selecione o Imposto" tabindex="0" placeholder="Selecionar ou Digitar" [(ngModel)]="impostoValue" (change)="seleImp($event)">
<span for="impostoInp" class="material-symbols-outlined iconSelect525" aria-hidden="true">expand_more</span>
<datalist id="impostoBox">
<option *ngFor="let i of opImposto" [value]="i.name">{{i.name}</option>
</datalist>
SCSS
[list]::-webkit-calendar-picker-indicator {
opacity: 0;
}
I have code that removes the arrow but I cannot style the suggestion box in the form.
What you're trying to do is to add a custom styling to datalist which is controlled by the user's browser settings and cannot be directly modified with SCSS selector as you're doing.
Try to use a 3rd party lib to add custom styling and that will do the job.
Related
I am using Select2 to display a list of options that I get through a REST API.
I am currently displaying my data in this way.
Select2 options rendered:
I am particularly looking forward to the word "Volvo" appearing in bold font weight style.
This is the <select> tag file where I render the data.
<select formControlName="modCar" class="form-control select2" style="width:90%" [ngClass]="{ 'is-invalid': submitted && f.modCar.errors }">
<option *ngFor="let item of arrCarroc; index as i" value="{{item.id}}">
{{item.nombre}} - {{item.nombreMarca}}</option>
</select>
I already tried to put a <b> tag between {{item.nombreMarca}} element, define a custom tag in Angular-component CSS, re-define the Select2 CSS class select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px} but still don't get the result.
Try using this lib lettering.js to use ::last-word selector and change last word style.
i want to change height & width of datalist HTML but it is not working.
how to solve this?
<input type="text" list="dose" />
<datalist id="dose" class="doseinput" style="height: 34px;width: 153px; ">
<option>1+1+1</option>
<option>1+1+0</option>
<option>1+0+0</option>
<option>0+1+0</option>
<option>0+0+1</option>
<option>0+1+1</option>
<option>1+0+1</option>
</datalist>
Give the height and width to the input tag instead of datalist.
<input type="text" list="dose" style="height: 34px;width: 153px;"/>
<datalist id="dose" class="doseinput">
<option>1+1+1</option>
<option>1+1+0</option>
<option>1+0+0</option>
<option>0+1+0</option>
<option>0+0+1</option>
<option>0+1+1</option>
<option>1+0+1</option>
</datalist>
You can't do it, replacement better use but are actually composed of regular HTML elements that CAN be styled.
this element is an example of a "replaced element", these are OS-dependent and are not part of the HTML/browser, it cannot be styled via CSS, you can style it via JS if you can.
For more information look exmaple here
https://stackoverflow.com/a/19217244/6701087
As a usability feature I'd like to add highlights to the currently focused form element, in a similar fashion to the moneysupermarket forms. I'm working with an HTML pattern for building forms that I cannot change:
<div class="field">
<label for="name">
Name
</label>
<input id="name" type="text" value="Fred">
</div>
I thought I'd come up with a simple solution: I'll add focus and blur events to all inputs, selects and textareas that toggles a .hasfocus class on the wrapping div, then hook styling on that class.
Here's a demo on JSBin but if you're using Firefox or Chrome 40 you may see the issue I have: Adding the CSS content property to the div.field breaks the form interaction, it seems the initial mouse click is swallowed by the browser & you're unable to select the content. I'm stumped, I think it may be a browser bug. Any ideas how I can make the highlighted elements behave as the others?
Thanks in advance!
Edit:
Here's a screencast that demonstrates the issue: http://screencast.com/t/LlmwcsZ2qYM
I was unable reproduce in Chrome 42, but I did reproduce this in Firefox 37. It appears as though adding the highlighting to the label element fixes the issue:
.field.hasfocus label:before {
content:"";
...
}
Updated JS Bin: http://jsbin.com/kajifoquci/edit?html,css,js,output
You missed your test-x references.
The whole idea with the focus on the field through the labels, is the mapping of the for attribute with the id attribute. The name attribute alone is not going to cut it. Since id has to have a unique value on the page, I ended up at 5.
<label for="test5">
Test 5
</label>
<!-- name="test4" -->
<select id="test5">
<option value="">one</option>
<option value="">two</option>
<option value="">three</option>
</select>
So you can simplify your logic with:
$('input, select, textarea').on('focus blur', function (){
var el = $(this),
field = el.closest('.field');
field.toggleClass('hasfocus');
});
You can keep the .control.hasfocus:before to disable this effect on .control classes.
Hope this helps.
DEMO
Firefox 21 draws red borders around required select-boxes when they are bound to an angularjs-model.
<select ng-model="color" ng-options="c.text for c in colors" required>
<option value="">-- choose color --</option>
</select>
Is there a way to let Firefox validate the input after selecting (or not selecting) an item?
→ A fiddle to demonstrate the problem
To get around this, you can disable the required style for when the form is pristine only:
.ng-pristine .ng-invalid-required {
box-shadow: none;
}
After a user has entered invalid data (and the ng-pristine class has changed to ng-dirty), the box-shadow will show again b/c this rule will no longer apply.
This has actually nothing to do with AngularJS but is a browser feature which you can control with CSS.
Take a look at this MDN-Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid and this question: Firefox 4 Required input form RED border/outline
With this CSS, Firefox seems to behave the same as Chrome:
select:invalid {
box-shadow: none;
}
http://jsfiddle.net/xLmC2/6/
#klamping: Your solution kinda works, but: As soon as you start typing in another field, your field gets the red shadow (since form.ng-pristine is not there anymore).
Better way:
.ng-untouched.ng-invalid-required { box-shadow:none; }
Drawback: The red shadow isn't shown when the user submits the form without ever clicking into this field (but the popup-tooltip is shown).
#DanEEStar: The problem only occurs if AngularJS is present. Your solution certainly works, but breaks the red highlighting completely (i.e. after form submission too).
I've created a bug report for AngularJS here:
https://github.com/angular/angular.js/issues/12102
Example:
<div ng-app>
<form>
<input type="text" ng-model="a" required>
</form>
</div>
Here's the fiddle: https://jsfiddle.net/5yh58orm/11/
Thomas Landauer's solution kinda works :), but as soon as you click/focus the field, the field shadow turn to be red again,
I suggest to use:
.ng-pristine.ng-invalid-required { box-shadow:none; }
For angular2, this is:
.ng-pristine.ng-invalid {
box-shadow: none;
}
To completly remove it type in css:
:-moz-ui-invalid:not(output) {
box-shadow: none;
}
I had the same problem when I used a select box outside of a form. The problem was fixed when I did this:
<form novalidate>
<select>
<option value=""></option>
</select>
</form>
I think then that this is a browser thing and nothing to do with angular?
We have started using Wijmo (based on the jQuery UI & jQuery UI Theme Roller) on one of our applications but have a problem with the dropdown and button in the Wijmo Form Decorator styling.
I have had a look at the Wijmo Docs but they haven't been helpful.
We have initiated the script and the style is applied however on all forms I cannot get the dropdown item to align correctly with other elements.
The initiation script is as follows:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$(":input[type='text'],:input[type='password'],textarea").wijtextbox();
$("select").wijdropdown();
$(":input[type='radio']").wijradio();
$(":input[type='radio']").wijcheckbox();
$("button").button();
});
</script>
As you will notice the .button() and .wijdropdown() functions are applying to each instance of the tag versus a class or an ID - we have the same problem with all 3 methods and have gone this way as this is what is desired through the entire application.
You can see a screenshot of the problem here:
I have been using Firebug to try and work out what the problem is and I suspect part of it is that Wijmo converts the select element into a div and applies JS to enable the select functionality.
I have been using both Firebug and Chrome developer tools to debug this, I notice that there is no margin being applied either above or below either element.
I have removed all other stylesheets that are not Wijmo or ThemeRoller but no change. We are using the "rocket" theme that comes with Wijmo.
Each time I try and manipulate the margin-top property on either it realigns all elements that are inline with the input search field directly above.
The HTML code for the form is:
<FORM id="serialSearch" name="serial_search" method="POST" action="index.php">
<label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" />
<br />
<select name="searchType">
<option value="standard">Standard</option>
<option value="fuzzy">Fuzzy</option>
</select>
<button>Search serial numbers</button>
<input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" />
</FORM>
It is really important for us to get this aligning correctly and appreciate any suggestions, thanks in advance.
you need to wrap all the forms elements inside a div with let's say a class "input" and apply this style to the div elements:
div.input {
display: inline-block;
vertical-align: top;
}
here you can see a jsfiddle that shows how it looks like.
as a suggestion, next time create a jsfiddle more than a screenshot so it's easier for people and for you to test your code.