dijit.form.FilteringSelect css - dojo

I cannot fig. out how to style the text inside of a dijit.form.FilteringSelect dropdown box. Default, the text is black and the background is also, so you can only see the text when you hover (white hover box).
I'd like to change text to white, then onhover black.
here's my html
<select dojoType="dijit.form.FilteringSelect" id="mapLayout" name="mapLayout">
<option value="Landscape8x11" selected="selected">8 1/2 x 11 Landscape</option>
<option value="Portrait8x11">8 1/2 x 11 Portrait</option>
</select>
here's my css (doesn't work)
#mapLayout{
color: #ffffff;
};
another try (doesn't work)
.claro .dijitTooltipContainer .dijitInputInner{
color: #ffffff !important;
};

Try this
.dijitComboBoxMenu .dijitMenuItem {
color: #FFFFFF;
}
.dijitComboBoxMenu .dijitMenuItemHover {
color: #000000;
}

Related

scss mixin with focus: mixin with focus not working

Update: here is the full code: codepen
I have below HTML: here is the full code
<input id="id1" value="planner" type="checkbox" />
<label for="id1">Name</label>
Before the label I want to insert an icon so I have the below the CSS file.
input[type=checkbox] + label:before {
#include custom_square;
content:'';
display: inline-block;
}
my custom icon mixin is as below:
#mixin custom_square {
width: 10px;
height: 10px;
border-radius:20%;
border:1px solid #0069aa;
margin-right:0.3rem;
&:focus::after {
border:1px solid #ffffff;
}
}
now when user focus the lable it does color change the css for it as below:
input[type=checkbox]:focus + label,
input[type=radio]:focus + label {color: #fff;}
Also, I want to change the border color of the square to white on the focus of it, I have added &:focus::after pseudo element in the mixin custom_square but it seems it is not working, any clue?
P.S: I don't want to use font-awesome icons, instead I will be creating my own icons and would be inserting that as shown above:

Hover an input element, which affects the placeholder

I have tried to change the placeholder color of the input element when you hover it.
add :hover then ::placeholder pseudoelement to change its color:
input:hover::placeholder {
color: red;
}

How to style agm-marker label

How to styling agm-marker-label - max-width for set text to center ? I can change label position but can't set min-width for centralization label name.
<agm-marker *ngIf="school.lat && school.lng"
[iconUrl]="{url: school.mapMarker, scaledSize: {height: 75,width: 48},labelOrigin:{x:70,y:20}}"
[label]="{text:school.schoolName}"
[longitude]="school.lng | parseFloat"
[latitude]="school.lat | parseFloat">
</agm-marker>
using 2 [label] attributes didn't work for me. Instead the following worked:
<agm-marker
*ngFor="let sp of mySPlist"
[latitude]="sp.geoLat" [longitude]="sp.geoLon"
[iconUrl]="sp.icon"
[label]="{color: 'white', text: sp.name}"
>
</agm-marker>
If this helps anyone... This is the only thing I have found that works....
put [label]="labelOptions" in your marker, and then in the ts file define the css like so...
labelOptions = {
color: 'white',
fontFamily: '',
fontSize: '14px',
fontWeight: 'bold',
text: "some text"
}
<agm-marker *ngFor="let data of serviceProvider; let i = index" [latitude]="data.Geolocation__c.latitude" [longitude]="data.Geolocation__c.longitude" [label]="labelOptions" [label]="{i+1}">
<agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
<ng-template>
{{ i+1}}
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
</agm-map><br/>
Simple style tag works for me:
<agm-map style="text-shadow: 0px 0px 6.2px grey;"(mapReady)="onMapReady($event)" #map (mapClick)="mapClicked($event)" [scrollwheel]="mapScWheel"
[latitude]="center?.lat" [longitude]="center?.lng" [styles]="styleArray"
[keyboardShortcuts]="true" [usePanning]="true" [fullscreenControl]="true"
[style.height.px]="getMapHeight()" [clickableIcons]="false"
[zoomControl]=true [zoom]="mapZoom">
<agm-marker *ngFor="let device of devices"
[label]="device?.labelOptions"
[iconUrl]="{url: device.iconUrl,labelOrigin:{x:22.5,y:20}, scaledSize: {height: 45,width: 45}}"
[latitude]="device?.latitude"
[longitude]="device?.longitude"
class="agm-marker">
</agm-marker>
</agm-map>
Works for me
<ng-containner *ngFor="let data of zones" >
<agm-marker [latitude]="data.latitude" [longitude]="data.longitude" [opacity]="(data?.hover)? 1 : 0.4" [label]="{fontSize: '12px',fontWeight: 'bold',text: ((data?.hover)? (data.name | titlecase) : null)}"></agm-marker>
<agm-circle [latitude]="data.latitude" [longitude]="data.longitude" [circleDraggable]="false" [editable]="false" [fillColor]="(data?.hover)? '#04397f' : data?.color" [radius]="data.radius" [strokeColor]="data.status == 'inactive' ? 'grey' : 'blue'" [strokeWeight]="2"></agm-circle>
<ng-containner>
Use this code in style.css or style.scss file and from this you can style agm-marker label
::ng-deep .gm-style div[aria-hidden = "true"] {
background-color: #393939 !important;
color:#fff !important;
padding: 5px;
margin-left: 10px;
border-radius: 5px;
}

How to customise ag-grid icons?

I am trying to achieve few customisations in ag-grid such as:
Change icons of Grid Header - Sort Icon, Filter Menu Icon, Icons of different menu items in Filter Menu, etc.
Change position of the Icons.
Can anyone point me to a possible solution?
According to the docs, you can try this CSS after the loading of the ag-grid.css (or scss) file and the ag-theme-<themename>.css file. In my example, that theme file is for Balham theme ag-theme-balham.css. This CSS will change the icons from default black (using the SVG) to white.
/*
* The override should be placed after the import of the theme.
* Alternatively, you can aso increase the selector's specificity.
*/
.ag-theme-balham .ag-icon-desc,
.ag-theme-balham .ag-icon-asc,
.ag-theme-balham .ag-icon-menu
{
font-family: "Font Awesome 5 Free";
/* FontAwesome uses font-weight bold */
font-weight: bold;
}
.ag-theme-balham .ag-icon-desc::before
{
content: '\f063';
color: white;
}
.ag-theme-balham .ag-icon-asc::before
{
content: '\f062';
color: white;
}
.ag-theme-balham .ag-icon-menu::before
{
content: '\f0c9';
color: white;
}
This Worked for me. Just overide the color
.ag-theme-balham .ag-icon-menu:before,
.ag-theme-balham .ag-icon-asc:before,
.ag-theme-balham .ag-icon-desc:before,
.ag-theme-balham .ag-icon-filter:before{
color: #FFFFFF;
}

How to change title bar background color of Dojox.layout.FloatingPane

The appearance (background color) of my Floating Pane's title bar and its main pane are the same. How can I make the background color of the title bar different?
<div id="fltQury" class="roundedCorners" data-dojo-type="dojox.layout.FloatingPane"
title="A Floating Pane" dockable="false" closable="true"
style="width: 350px; height: 100px; top: 100px; left: 120px; " >
<div>
Thanks,
Gido
You can simply use CSS to do that, for example:
#fltQury .dojoxFloatingPaneTitle {
background-color: yellow;
}
This should be working fine, as you can see in this fiddle: http://jsfiddle.net/nqP6B/
Overriding the CSS may change all the styles pertaining to dojoxFlotingPaneTitle. Rather, I would suggest to use the following dojo.style to change the color.
var resultDiv = dojo.byId('fltQury');
dojo.style(resultDiv, {
"backgroundColor": "#a4e672",
"color": "black"
});
for more information, please go through the this link.