Lightning Grid - Columns and Rows? The 2019 Stack Overflow Developer Survey Results Are...
When should I buy a clipper card after flying to OAK?
Are there any other methods to apply to solving simultaneous equations?
Can one be advised by a professor who is very far away?
During Temple times, who can butcher a kosher animal?
What could be the right powersource for 15 seconds lifespan disposable giant chainsaw?
Aging parents with no investments
What do the Banks children have against barley water?
Why can Shazam fly?
Lightning Grid - Columns and Rows?
Does the shape of a die affect the probability of a number being rolled?
Can someone be penalized for an "unlawful" act if no penalty is specified?
Apparent duplicates between Haynes service instructions and MOT
Right tool to dig six foot holes?
How to manage monthly salary
How to answer pointed "are you quitting" questioning when I don't want them to suspect
What tool would a Roman-age civilization have for the breaking of silver and other metals into dust?
Is there any way to tell whether the shot is going to hit you or not?
Did 3000BC Egyptians use meteoric iron weapons?
Is a "Democratic" Oligarchy-Style System Possible?
Write faster on AT24C32
Protecting Dualbooting Windows from dangerous code (like rm -rf)
How to type this arrow in math mode?
Is an up-to-date browser secure on an out-of-date OS?
Is flight data recorder erased after every flight?
Lightning Grid - Columns and Rows?
The 2019 Stack Overflow Developer Survey Results Are InDynamically add and remove rows in lightningLightning data grid break pointsLightning Component - Grid Sizing - Narrow (right) side of Lightning pageLightning is showing unnecessary blue border around slds-grid elementsAligning table rows and columns in two different componentsDisable Checkbox for Parent rows in Lightning Tree GridSLDS Grid Columns Not the Same WidthInvoke Object Quick Action from Enhanced Lightning GridSyntax for Filter on enhanced lighning gridSpace between columns in a grid - not symmetric
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)
Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small"
multipleRows="true">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column1}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column2}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column3}
</lightning:layoutItem>
</lightning:layout>
<lightning:layoutItem size="8" flexibility="grow"
padding="around-small">
{!v.column4}
</lightning:layoutItem>
</div>
</aura:component>
Any ideas on how to create this with Lightning Grid?
lightning-aura-components lightning page-layout enhanced-lightning-grid
asked 2 hours ago
BobbygllhBobbygllh
386
add a comment |
Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)
Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small"
multipleRows="true">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column1}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column2}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column3}
</lightning:layoutItem>
</lightning:layout>
<lightning:layoutItem size="8" flexibility="grow"
padding="around-small">
{!v.column4}
</lightning:layoutItem>
</div>
</aura:component>
Any ideas on how to create this with Lightning Grid?
lightning-aura-components lightning page-layout enhanced-lightning-grid
asked 2 hours ago
BobbygllhBobbygllh
386
add a comment |
Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)
Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small"
multipleRows="true">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column1}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column2}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column3}
</lightning:layoutItem>
</lightning:layout>
<lightning:layoutItem size="8" flexibility="grow"
padding="around-small">
{!v.column4}
</lightning:layoutItem>
</div>
</aura:component>
Any ideas on how to create this with Lightning Grid?
lightning-aura-components lightning page-layout enhanced-lightning-grid
asked 2 hours ago
BobbygllhBobbygllh
386
Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)
Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small"
multipleRows="true">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column1}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column2}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column3}
</lightning:layoutItem>
</lightning:layout>
<lightning:layoutItem size="8" flexibility="grow"
padding="around-small">
{!v.column4}
</lightning:layoutItem>
</div>
</aura:component>
Any ideas on how to create this with Lightning Grid?
lightning-aura-components lightning page-layout enhanced-lightning-grid
lightning-aura-components lightning page-layout enhanced-lightning-grid
asked 2 hours ago
BobbygllhBobbygllh
386
asked 2 hours ago
BobbygllhBobbygllh
386
asked 2 hours ago
BobbygllhBobbygllh
386
asked 2 hours ago
BobbygllhBobbygllh
386
asked 2 hours ago
BobbygllhBobbygllh
386
386
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
answered 1 hour ago
sfdcfoxsfdcfox
264k13210457
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "459"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f257408%2flightning-grid-columns-and-rows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
answered 1 hour ago
sfdcfoxsfdcfox
264k13210457
add a comment |
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
answered 1 hour ago
sfdcfoxsfdcfox
264k13210457
add a comment |
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
answered 1 hour ago
sfdcfoxsfdcfox
264k13210457
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
answered 1 hour ago
sfdcfoxsfdcfox
264k13210457
answered 1 hour ago
sfdcfoxsfdcfox
264k13210457
answered 1 hour ago
sfdcfoxsfdcfox
264k13210457
answered 1 hour ago
sfdcfoxsfdcfox
264k13210457
264k13210457
add a comment |
add a comment |
Thanks for contributing an answer to Salesforce Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f257408%2flightning-grid-columns-and-rows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
