This is my code from my aura lightning component
<aura:attribute name="options" type="List" default="[
{'label': 'Carry forward all the data', 'value': 'option1'},
{'label': 'Create blank version', 'value': 'option2'}
]"/>
<lightning:radioGroup name="radioGroupRequired"
options="{! v.options }"
value="{! v.options.value }"
onchange="{! c.handleChange }"
type="radio"
class="slds-m-around_medium"
/>
This is the current output
I want to increase the spacing between these rows of radioGroup.
I am unable to specify this spacing in the custom CSS classes.
Related
I am trying to emulate the Lookup column link style in another column using column formatting.
The Lookup column links have a specific color and position within the column cell.
As shown below, I want the links in My Column to look like those in Lookup Column.
Using browser developer tools, I can see that there are differences in the HTML of each column:
Lookup column link HTML:
<div role="gridcell" aria-readonly="true" aria-colindex="7" class="ms-DetailsRow-cell cell-223 cellUnpadded-111" data-automationid="DetailsRowCell" data-automation-key="LookupColumn" style="width: 190px;">
<div>
<button type="button" class="ms-Link od-FieldRender od-FieldRender-lookup root-211" aria-label="My Lookup Value Here" role="link" tabindex="-1">
My Lookup Value Here
</button>
</div>
</div>
My Column link HTML:
<div role="gridcell" aria-readonly="true" aria-colindex="8" class="ms-DetailsRow-cell cell-113 cellUnpadded-111" data-automationid="DetailsRowCell" data-automation-key="MyColumn" style="width: 299px;">
<div class="customField_ab5ae447">
<div class="sp-field-customFormatter">
<a style="margin-left:30px;" target="_blank" href="https://some-link-here.com" rel="noopener noreferrer " data-interception="off" tabindex="-1">
click here to view something
</a>
</div>
</div>
</div>
This is the JSON I have used to create a link in My Column:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"style": {
"margin-left": "30px"
},
"elmType": "a",
"txtContent": "click here to view something",
"attributes": {
"target": "_blank",
"href": "https://some-link-here.com"
}
}
]
}
How can I modify the JSON so that the link has the same style as the Lookup column link?
Edit:
There is a similar question here, but the answers do not produce the same styling as the Lookup link column.
through the screenshot I notice the lookup column is also using column formatting. You could edit lookup column using column formatting to see what JSON code are using in it. Then compare which style it is using, such as font, color and so on.
Or, you could provide the JSON code in Lookup Column for further research.
Using Ignite UI for Angular Data Grid and I want to make an editor for the name of a column. However, the grid control seems to disable any input controls I put into the header template.
How can I enable input controls in the header template for my grid?
The code below creates a grid with an input control in the header. The input control cannot be clicked or the value edited.
<ng-template igx-header #editColumnMapping let-column>
<input type="text" name="textInput" [value]="column.header" />
</ng-template>
<igx-grid #grid2 [data]="[[1], [2], [3], [4]]">
<igx-column header="Values" [headerTemplate]="editColumnMapping" field="0"></igx-column>
</igx-grid>
Your code looks correct. I have created a sample for you in StackBlitz
<igx-grid #grid1 [data]="data">
<igx-column header="Rank" field="Id" [headerTemplate]="hTemplate"></igx-column>
<igx-column header="Athlete" field="Name" [headerTemplate]="hTemplate"></igx-column>
...
<ng-template #hTemplate let-column>
<div (click)="fieldInput.focus()">
<span >{{column.header}}</span>
<br />
<input #fieldInput [(ngModel)]="column.header" style="width: 100%">
</div>
</ng-template>
The sample is working with both the latest 9.0.0-beta.6 and 8.2.13
I have HTML I want to give border-bottom property to the <Label> element which is a child of <StackLayout>.
My problem is the border-bottom is taking full width like a div in the web. I want this Label element to be inline like a span so that it's width should not be more than its content width.
<StackLayout *ngIf="!places.length">
<Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-5"
borderBottomColor="#F16051" borderBottomWidth="2" text="View All Activities"></Label>
</StackLayout>
Below is the layout I'm getting now. But I don't want that orange line to be end to end. Instead its width should always be equal to the text present inside that Label.
Instead of StackLayout, you can have FlexboxLayout with the justifyContent="center".
<FlexboxLayout justifyContent="center" *ngIf="!places.length">
<Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-
5" borderBottomColor="#F16051" borderBottomWidth="2" text="View All
Activities"> .
</Label>
</FlexboxLayout>
Try setting horizontalAlignment on Label to center
<Label horizontalAlignment="center" ...
Add horizontalAlignment="center" to the label. This will center the component, making it only the size it needs to have.
Example playground: https://play.nativescript.org/?template=play-vue&id=8kZUFY
This HTML for the Kendo Angular dropdown leaves a single comma for the empty/default value and does not allow me to go back to an empty value once I've selected a value. I've played with all sorts of ternary operators on my template to no avail. Should I make a pipe for all instances of LastName, FirstName to make things easier?
<kendo-dropdownlist id="cost-engineer-dropdown"
formControlName="CostEngineerId"
[defaultItem]="{ text: 'Select an Engineer', value: '' }"
[data]="costEngineer | async"
[textField]="'LastName'"
[valueField]="'Id'"
value="this.LastName"
(valueChange)="valueChange('this.Id')"
(selectionChange)="selectionChange($event)"
[formControl]="masterProjectFormGroup.get('CostEngineerId')"
[valuePrimitive]="true"
[(ngModel)]="CostEngineerId"
>
<ng-template kendoDropDownListItemTemplate let-dataItem>
{{dataItem?.LastName}}, {{dataItem?.FirstName}}
</ng-template>
<ng-template kendoDropDownListValueTemplate let-dataItem>
{{dataItem?.LastName}}, {{dataItem?.FirstName}}
</ng-template>
</kendo-dropdownlist>
I'm using ExpressionEngine 2.5.3 and Google Maps for ExpressionEngine 3.0.190 (aka 3.1 beta) with the following code:
{exp:gmap:init id="map1" class="gmap" scrollwheel="false" style="width:930px;height:500px" clusterStyles="{url: '/assets/images/cluster-icon-blue.png', textColor: '#fff', textSize: '12', height: 52, width: 53, anchor: [0, 0]}" overviewMapControl="true" overviewMapControlOptions="{opened:true}"}
{exp:channel:entries channel="people" status="open" disable="categories|category_fields|member_data|pagination" limit="1000" dynamic="no" sort="asc"}
{cf_people_geo_location id="map1" show_one_window="true" icon="/assets/images/aabc-map-icon-white.png" infobox="true" offsetY="-45" offsetX="15" closeBoxMargin="5px" class="ui-infobox-dark" closeBoxURL="/themes/third_party/gmap/css/images/white-close-button.png" style="width: '250px'" clearanceX="10" show_one_window="true" clustering="true"}
<p>View {title} »</p>
{/cf_people_geo_location}
{/exp:channel:entries}
Is it possible to set the zoom level that the map uses on page load? It seems to set it automatically based on the points being plotted, but I'd like to override this value and zoom in a few notches.
Thanks,
Ste
Use the extend_bounds parameter and set it to "false"
https://objectivehtml.com/google-maps/documentation/tag/marker#extend_bounds
Try this:
{exp:gmap:init id="map1" class="gmap" scrollwheel="false" style="width:930px;height:500px" clusterStyles="{url: '/assets/images/cluster-icon-blue.png', textColor: '#fff', textSize: '12', height: 52, width: 53, anchor: [0, 0]}" overviewMapControl="true" overviewMapControlOptions="{opened:true}" zoom="10"}
{exp:channel:entries channel="people" status="open" disable="categories|category_fields|member_data|pagination" limit="1000" dynamic="no" sort="asc"}
{cf_people_geo_location id="map1" show_one_window="true" icon="/assets/images/aabc-map-icon-white.png" infobox="true" offsetY="-45" offsetX="15" closeBoxMargin="5px" class="ui-infobox-dark" closeBoxURL="/themes/third_party/gmap/css/images/white-close-button.png" style="width: '250px'" clearanceX="10" show_one_window="true" clustering="true" extend_bounds="false"}
<p>View {title} »</p>
{/cf_people_geo_location}
{/exp:channel:entries}
There is a zoom="" parameter for the gmap tags, except sometimes I found it didn't work (or I didn't use it correctly somehow).
To get it zoomed to the level I wanted, I manually added some regular Google Maps (not the addon) code closer to the end of the page:
<script>
map1_map.setZoom(15);
</script>