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;
}
Related
I try change color of div by clicked on him, but the event not responded,
what I'm doing wrong?
here is my code
HTML:
<div class="demo" #click="attachRed != attachRed" :class="{ red: attachRed }"></div>
script:
'
export default {
data() {
return {
attachRed: false
}}
'
style:
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
It is
#click="attachRed = !attachRed
Not
#click="attachRed != attachRed
The != symbol is a test operator, and is read as "not equal," so what you have is "attachRed is not equal to attachRed." You should use the assignment operator of just = and negate the right-hand value. It should read "attachRed is assigned to NOT (!) attachRed."
We have a client requirement to implement a test automation in Power apps.
Power apps has its own Testing framework but that is still in Experimental mode and not recommended to use for production environment.
I've experience around Selenium but I'm facing issues while locating web elements for Power Apps.
I'm trying to locate a Text box and enter any value, even though the web elements are unique the selenium is not able to find those.
HTML
<div class="canvasContentDiv appmagic-control-view appmagic-content-
control-name _vst_" data-control-id="17" data-control-name="TextInput1"
style="width: 419px; height: 60px; z-index: 17; position: absolute; top:
517px; left: 105px;"><div class="appmagic-borderfill-container"
style="background-color: rgb(186, 202, 226); border-style: solid; border-
width: 2px; border-color: rgb(0, 18, 107); border-radius: 5px; margin:
-1px;"><div class="appmagic-border-inner" style="margin: -1px;"><div
class="react-knockout-control" spellcheck="false" style="position:
absolute; inset: 0px;">
<div class="appmagic-textbox" touch-action="pan-x pan-y" appmagic-
control="TextInput1">
<!-- ko if: (mode() === "multiline") --><!-- /ko -->
<!-- ko if: (mode() !== "multiline") -->
<input appmagic-control="TextInput1textbox" class="appmagic-text mousetrap
block-undo-redo" maxlength="10000" data-bind="
attr: {
type: mode() === 'password' ? 'password' : 'text',
title: properties.Tooltip() || null,
'aria-label': properties.AccessibleLabel() || null,
placeholder: properties.HintText,
readonly: viewState.displayMode() ===
AppMagic.Constants.DisplayMode.View,
contenteditable: viewState.displayMode() ===
AppMagic.Constants.DisplayMode.Edit,
'data-control-part': properties.Clear() ? 'text clearable' : 'text',
inputmode: keyboardMode
},
css: {
underline: properties.Underline,
strikethrough: properties.Strikethrough,
readonly: viewState.displayMode() ===
AppMagic.Constants.DisplayMode.View
},
value: text,
event: {
click: handleClick,
change: handleOnChange
},
style: {
fontFamily: properties.Font,
fontSize: properties.Size,
color: autoProperties.Color,
fontWeight: properties.FontWeight,
fontStyle: properties.Italic,
textAlign: properties.Align,
lineHeight: properties.LineHeight,
paddingTop: properties.PaddingTop,
paddingRight: properties.PaddingRight,
paddingBottom: properties.PaddingBottom,
paddingLeft: properties.PaddingLeft
},
disable: viewState.displayMode() ===
AppMagic.Constants.DisplayMode.Disabled" type="text" placeholder="Team
name..." contenteditable="true" data-control-part="text" inputmode="text"
tabindex="15" style="font-family: "Open Sans", sans-serif; font-
size: 21pt; color: rgb(0, 0, 0); font-weight: normal; font-style: normal;
text-align: left; line-height: 1.2; padding: 5px 5px 5px 12px;">
<div class="appmagic-text-clear-container">
<button class="appmagic-text-clear-button" data-control-part="clear" data-
bind="
visible: isFocused() && properties.Clear() &&
properties.Text() && mode() !== 'password' &&
viewState.displayMode() === AppMagic.Constants.DisplayMode.Edit,
event: {click: handleClearClick},
attr: {'aria-label': AppMagic.Strings.TextInputClearButtonLabel}" aria-
label="Clear value" tabindex="16" style="display: none;">
<svg class="appmagic-text-clear-svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12" aria-hidden="true" focusable="false">
<polygon points="12,1.1 10.9,0 6,4.9 1.1,0 0,1.1 4.9,6 0,10.9 1.1,12
6,7.1 10.9,12 12,10.9 7.1,6" data-bind="style: {fill:
autoProperties.Color}" style="fill: rgb(0, 0, 0);"></polygon>
</svg>
</button>
</div>
<!-- /ko -->
</div>
</div></div></div></div>
Tried below to find the web element-
driver.findElement(By.xpath("//div[#class='appmagic-textbox']")).sendKeys("test");
driver.findElement(By.xpath("//input[#class='appmagic-text mousetrap block-undo-redo']")).sendKeys("Test");
Following is the error returned by Selenium-
Any help or suggestions around this would be very helpful.
Thanks In Advance.
Since I am new to Vue and JS. I have some difficulties to making dynamic progress bar. This bar is kind of indication of how many quiz already take. according to he photo below.
Below is my CSS and HTML of creating bar.
.progressbar {
width: 100%;
height: 5px;
background-color: #eee;
margin: 1em auto;
transition: width 500ms;
}
HTML
<div class="progressbar">
<div class="progressbar text-center"
style="background-color: green; margin: 0; color: white;"
:style="{width: progress + '%'}">
{{ progress }}
</div>
</div>
how can I make it increase?
Place progress into the data and its working for me:
data() {
return {
progress: 70,
}
}
If you don't know how to calculate the progress just do it like so:
methods: {
updateProgres() {
this.progress=completedSteps/totalSteps*100
}
}
I would like to customize my tooltip for my table and I used the following example :
https://datatables.net/beta/1.9/examples/advanced_init/events_post_init.html
I copied CSS and JS tooltip file but my tooltip look like a default one.
How can I customize my tooltip ? Do you have examples ?
Cheers
There is nothing fancy about it, really. It is just a <div> following the mouse showing some content. You can use one of the zillion tooltip / popover plugins out there, or you can do it by yourself. Here is an example showing the content of a hovered row in a "tooltip" :
#tooltip {
position: absolute;
z-index: 1001;
display: none;
border: 2px solid #ebebeb;
border-radius: 5px;
padding: 10px;
background-color: #fff;
}
event handlers
$('#example').on('mousemove', 'tr', function(e) {
var rowData = table.row(this).data().join(',')
$("#tooltip").text(rowData).animate({ left: e.pageX, top: e.pageY }, 1)
if (!$("#tooltip").is(':visible')) $("#tooltip").show()
})
$('#example').on('mouseleave', function(e) {
$("#tooltip").hide()
})
demo -> http://jsfiddle.net/0g2axdt5/
The use of animate() is to avoid flicker.
I am trying to set width for Webgrid column. But it is not working.
Anyone help me please.
Please find below my code
#grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
alternatingRowStyle: "webgrid-alternating-row",
mode: WebGridPagerModes.All,
columns:grid.Columns(
grid.Column(columnName:"ID", header: "ID",canSort:true, style: "id"),
grid.Column(columnName:"Name", header: "Name",canSort:true,style: "name")
)
And my css file
.webgrid-table { border: 1px solid #98BF21; }
.webgrid-header { background-color: #A7C942; color: #FFFFFF; text-align: left;}
.webgrid-alternating-row { background-color: #EAF2D3; }
.id { width: 20px; }
.name { width: 40px; }
Anyone help me please?
You need to specify the width of the WebGrid itself in order to solve this issue.
Add this
.webgrid-table { *width*: *specify the width value here* ;border: 1px solid #98BF21;}