0

I'm trying to use SLDS to build a page that allows users to search for products, then see some product details, plus some other info about related records. I'm having some difficulties getting the HTML right and applying the appropriate CSS classes etc. I have the following:

         <div class="form-element__group">
                <div class="slds-form-element__row">
                    <div class="slds-size--1-of-2">
                        <span class="slds-form-element__label">Product Code</span>
                        <div class="slds-form-element__control">
                            <span class="slds-form-element__static">{!v.product.ProductCode}</span>
                        </div>
                    </div>
                    <div class="slds-size--1-of-2">
                        <span class="slds-form-element__label">Product Name</span>
                        <div class="slds-form-element__control">
                            <span class="slds-form-element__static">{!v.product.Name}</span>
                        </div>
                    </div>
                </div>
            </div>

...I want it to have two product fields on a single row but the value for the second field ends up on the next line. Have tried a few variations, based on the Lightning Design System around use of read only forms but haven't got it working how I wanted.

Improve this question

2 Answers 2

Reset to default
1

OK, here's what I found works. I used slds-grid together with definition lists (dl, dt and dd) tags instead of spans and divs in the markup for each individual cell. The class "slds-page-header__detail-row" gives a lot of padding, so as an alternative if you don't want that then go with "slds-form-element__row" for the outer div.

    <div class="slds-grid slds-page-header__detail-row">
        <div class="slds-col--padded slds-size--1-of-2">
            <dl>
                <dt>
                    <p class="slds-text-heading--label slds-truncate" title="Product Code">Product Code </p>
                </dt>
                <dd>
                    <p class="slds-text-body--regular slds-truncate"> {!v.product.ProductCode} </p>
                </dd>
            </dl>
        </div>
        <div class="slds-col--padded slds-size--1-of-2">
            <dl>
                <dt>
                    <p class="slds-text-heading--label slds-truncate" title="Product Family">Product Family </p>
                </dt>
                <dd>
                    <p class="slds-text-body--regular slds-truncate">{!v.product.Family}</p>
                </dd>
            </dl>
        </div>
    </div>
Improve this answer
0

If you need inline both elements cant be in separate div ,

You may need to get rid of Div and use span ..Check Inline forms in document

http://www.lightningdesignsystem.com/components/forms

<div class="form-element__group">
            <div class="slds-form-element__row">
                    <span class="slds-form-element__label">Product Code</span>
                    <div class="slds-form-element__control">
                        <span class="slds-form-element__static">{!v.product.ProductCode}</span>
                </div>
                    <span class="slds-form-element__label">Product Name</span>
                    <div class="slds-form-element__control">
                        <span class="slds-form-element__static">{!v.product.Name}</span>
                    </div>
            </div>
        </div>
Improve this answer
1
  • If I do this, all items appear on a single line, but I want the fields "stacked"; ie the label sitting above the field. In the guide, it gives an example of this for form input fields (see compound form section on this page but not for read only forms. I'm thinking that maybe I need to put the fields inside cells in a table.
    – donmac23
    Commented Oct 14, 2015 at 22:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .