In my Angular application, I have an instance of the ng-select widget:
If you click on it, by default you can search for items and add more of them to the current selection:
I would like to change this default behaviour, in particular:
it shouldn not be possible to add new elements
clicking on it should not open the search bar or the items list
it should not show the arrow down icon (displayed by default on the right)
it should not show the X icon to remove all selection at once (displayed by default on the right)
So this is how I would like it to be:
In order to achieve this, we first need to create 3 css classes.
One to disable the arrow-down icon:
.ng-select.disable-arrow .ng-arrow-wrapper .ng-arrow {
display: none;
}
One to disable the search/list dropdown:
.ng-select.disable-dropdown ng-dropdown-panel {
display: none;
}
One to disable the clear-all X icon:
.ng-select.disable-clear-all .ng-clear-wrapper {
display: none;
}
Then we add the ng-select element using the 3 css classes that we created, plus a few options:
<ng-select
class="disable-arrow disable-dropdown disable-clear-all"
[searchable]="false"
[clearable]="true"
[multiple]="true"
>
</ng-select>
To disable the clear-all X icon add [clearable]="false" attribute to your ng-select tab ex.:
<ng-select class="disable-clear-all" [clearable]="false" [searchable]="false">
</ng-select>
To hide the clear and arrow icons:
.ng-clear-wrapper {display: none;}
.ng-arrow-wrapper {display: none;}
Below is only what u need if u need it programmatically.
<ng-select
[items]="people3"
bindLabel="name"
[disabled]="true"
[multiple]="true"
[(ngModel)]="selectedPeople3">
</ng-select>
Related
I'm building a website using Contact Form 7 for WordPress and am having issues styling the select menu. Specifically, I cannot move the arrows or add padding to the dropdown so it's not so tight.
I've tried using this CSS to add spacing to the dropdown items (and some other CSS trickery) but it has no effect:
options {
padding: 20px 10px!important;
margin: 20px 10px!important;
line-height: 36px!important;
border-bottom: 10px solid tan!important;
}
Do you know if there's a way to control the styling behavior of CF7's select menu (arrow and options dropdown)?
Thank you!
Demo Website:
https://miles.birdhouse-demos.com/connect/
CSS styling for <select/> fields is very limited and does not allow you to achieve this. You will need to use a hybrid field plugin that constructs dropdowns with HTML lists that can be styled, such the Hybrid HTML Dropdown plugin, which can be styled and can be loaded on your page to convert your existing <select/> fields into hybrid ones,
<script type="text/javascript">
(function(){
let sel, hyd;
document.addEventListener('DOMContentLoaded', (e) => { //instantiate on document ready.
sel= document.querySelector('#my-select-list');
hyd = new HybridDropdown(sel,{});
})
})
</script>
Alternatively, you can install the Smart Grid-layout extension for CF7 which has a dynamic-dropdown field tag you can use instead of the CF7's default dropdown, and has as the option to display as a Hybrid Dropdown field for you.
Try this
It's possible to customize the dropdown arrow with this code:
select {
-webkit-appearance: none;
-moz-appearance: none;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);
background-repeat: no-repeat;
background-position-x: 98%;
background-position-y: 2px;
}
Here is a list about what you can do with this code:
Remove completely the arrow, to do so, simply remove this line: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
Customize the arrow size. You need to add the following line to the code given above: background-size: 30px 30px;
You can change the value in px.
Change the arrow, to do so, replace the URL in the following line of code: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
This guide will help you to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
If you have any questions, let me know.
Thanks.
Credit: Kevin - From: https://www.jotform.com/answers/2449062-how-can-i-remove-modify-change-the-dropdown-arrow-using-css
I would change the color of the menu items in wordpress. In this site https://www.modacapellishop.it/ I have four voices in the menu (Brand, Prodotti, Modacapelli Choice, Outlet) and I need to change the color of Modacapelli Choice (grey to blue). I added this code on the CSS file:
/* Change color menu Modacapelli Choice */
#menu-item-427 a {
color: #2976ce;
}
It work but just on desktop. On the mobile version in menu navigation sidebar the menu item "Modacapelli Choice" doesn't change the color.
How can I solve that?
Since this is an extremely specific case you can either .menu-item-427 > a { color: red!important; } or do .nav>li.menu-item-427>a { color: red; }
I would recommend the latter.
However both are not great, since it is bound to the ID. I would recommend making an ACF field for the page or the menu-element, then checking if it exists, and creating an inline style or adding a class if it is true.
The user can then also change the color of other elements he wishes to change without contacting you about it.
You would then add a class like this to your menu markup for example.
.is-highlighted-element {
color: red;
}
In Mobile view doesn't have #menu-item-427 this id. so replace with .menu-item-427
Try this css it's works
.menu-item-427 a {
color: #2976ce;
}
I've the following accordion group:
<p-accordion multiple=true>
<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab.myClass}}" header="{{tab.header}}"
[selected]="false">
{{tab.description}}
</p-accordionTab>
</p-accordion>
It's usually populated dinamically by tabs size. The goal is to have different background and other styles, depending of tab content. So I have that myClass style variable which could change at each accordion tab creation. E.g. assuming to use myClass = 'myClass':
:host ::ng-deep .myClass.p-accordion {
.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
background: red;
}
}
Anyway I was not able to create a css rule to achieve this goal.
Can anyone assist?
Many thanks in advance
Solution was using a wrapper div of each accordion tab:
<p-accordion multiple=true>
<div *ngFor="let tab of tabs" class="{{tab.customClass}}">
<p-accordionTab header="{{tab.header}}"
[selected]="false">
{{tab.description}}
</p-accordionTab>
</div>
</p-accordion>
where :
.customClass * {
background: red !important;
//other properties
}
In order to create a different style for each tab you need to make it dependent on the tab. Right now you set the same style for each. One approach would be to create a pipe which provides the class name.
<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab | getTabClass}}" header="{{tab.header}}"
I have a ion-select with few options i gave a header using [selectOptions], is there a way to define a css so that i could able to set background-color to header, button alignment ,and add a icon to the header
<ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
<ion-option *ngFor="let day of Days;" [value]="day.val">{{day.name}}</ion-option>
</ion-select>
could someone help me
You can fix this easily now
Add to ion-select element:
[interfaceOptions]="{cssClass: 'my-class'}"
Add to css:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Yes, you can use cssClass in option like this:
// In your component
daysOptions = {
cssClass: 'my-class',
...,
}
Then in css you can do what you want eg:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Thank's to ionic docs: https://ionicframework.com/docs/api/components/alert/AlertController/#advanced
I needed a color selector couple of months ago but I couldn’t find any.
The only way to do this was using custom CSS. I tried adding CSS classes to ion-select and ion-option but the classes doesn’t get reflected in the generated output. So the only way to apply the custom CSS to ion-select and ion-options is by using the parent element and some JS.
You can check the logic in:
HTML:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.html
TS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.ts
SCSS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.scss
Chrome has apparently added a dropdown arrow to text inputs that reference a <datalist>. It's appearing in Chrome 34 (Canary) but not in the current stable build (Chrome 31).
It appears only when the text field is focused (see update) and is applied to both input types text and search.
It could be worse as far as native browser implementations go, but as you can see in the image, it conflicts with my design specs.
Does anyone know how to remove or replace this new feature?
<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">
Update:
The arrow also appears when the field is hovered (not just focused) and unfortunately also has its own background color when the button itself is hovered:
Thanks to the comment by alexander farkas, here is the style rule to remove the arrow:
input::-webkit-calendar-picker-indicator {
display: none;
}
As others have mentioned ::-webkit-calendar-picker-indicator { display: none } works at removing the arrow it would also impact the html5 datepicker on a <input type="date">,
To remove just removing the datalist input would be:
[list]::-webkit-calendar-picker-indicator {
display: none;
}
Thanks to Cantera. I didn't want to get rid of the black arrow entirely, just the gray square surrounding it.
input::-webkit-calendar-picker-indicator {
background-color: inherit;
}
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
Also removed the arrow for me and I found created a better clicking experience to still click where the arrow would be, you can even increase the the width and height of it > 1em and in the input maybe put a custom arrow as a background image, where the arrow would be.
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
It's work for me; (use display:0 not work on chorme)
datalist::-webkit-calendar-picker-indicator {
display: none;
opacity: 0;
}
It is okay but this css code will hide any calander on page.
Like I'm using datepicker calender and this will also hide the controls including datalist and datetime picker.
Set the list option of parent input to be empty, <input list="" ... /> , eg :
<input
list=""
name="option"
id="input"
autocomplete="off"
>
<datalist id="datalist">
<option>Carrots</option>
<option>Peas</option>
<option>Beans</option>
</datalist>
see mdn customizing_datalist_styles example
try -webkit-appearance: none that should remove the default styles