fundamental
fundamental copied to clipboard
Published
20 hours ago •
SAP
SAP
Longer text seem to break the flow
Playing with standard components' design, I noticed that longer text, in paragraph tag or without, seem to break the design.
In below exaample, when the text is uncommented:
<section class="fd-section">
<div class="fd-section__header">
<h1 class="fd-section__title">Fonts</h1>
</div>
<div class="fd-panel">
The section
<!-- is a page-level structure container used to divide a page into stacked
sections with appropriate padding applied. These should be used to separate large groups of content
on a
page.
-->
</div>
</section
no text at all is visible on the right hand side, in <main class="fd-app__main"> block.
Is this structure correct and is the whole page below properly structured?
If yes, how to add longer text, without breaking the page?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Longer texts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://unpkg.com/[email protected]/dist/fiori-fundamentals.min.css" rel="stylesheet">
</head>
<body>
<!-- http://localhost:4001/layouts/shell-layout.html -->
<div class="fd-shell fd-shell--fundamentals">
<div class="fd-shell__header">
<!-- http://localhost:4001/components/shellbar.html -->
<div class="fd-shellbar">
<div class="fd-shellbar__group fd-shellbar__group--start">
<a href="#" class="fd-shellbar__logo"><img src="//unpkg.com/fiori-fundamentals/dist/images/sap-logo.png"
srcset="//unpkg.com/fiori-fundamentals/dist/images/[email protected] 1x, //unpkg.com/fiori-fundamentals/dist/images/[email protected] 2x, //unpkg.com/fiori-fundamentals/dist/images/[email protected] 3x"
width="48" height="24" alt="SAP"></a>
<div class="fd-shellbar__product">
<span class="fd-shellbar__title">Fiori Fundamentals</span>
</div>
<div class="fd-shellbar__subtitle">
aurelia
</div>
</div> <!-- fd-shellbar__group -->
<div class="fd-shellbar__group fd-shellbar__group--end">
<div class="fd-shellbar__actions">
<div class="fd-shellbar__action fd-shellbar__action--show-always">
<div class="fd-user-menu">
<div class="fd-popover fd-popover--right">
<div class="fd-popover__control">
<div class="fd-user-menu__control" aria-controls="WV3AY276" aria-expanded="false"
aria-haspopup="true" role="button">
<span
class="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-11">WW</span>
</div>
</div>
<div class="fd-popover__body fd-popover__body--right" aria-hidden="true" id="WV3AY276">
<nav class="fd-menu">
<ul class="fd-menu__list">
<li><a role="button" class="fd-menu__item">Settings</a></li>
<li><a role="button" class="fd-menu__item">Sign Out</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div> <!-- fd-shellbar__group -->
</div> <!-- fd-shellbar -->
</div> <!-- fd-shell__header -->
<div class="fd-shell__app">
<div class="fd-app">
<div class="fd-app__navigation fd-app__navigation--vertical">
<div class="fd-app__navigation fd-app__navigation--vertical">
<!-- http://localhost:4001/components/side-navigation.html -->
<nav class="fd-side-nav">
<div class="fd-side-nav__group">
<h1 class="fd-side-nav__title">nav group</h1>
<ul class="fd-side-nav__list" mousedown.trigger="toogle($event)">
<li class="fd-side-nav__item">
<a href.bind="navItem.href" class="fd-side-nav__link" aria-haspopup="" aria-expanded=""
aria-controls="ac0" id="list0" href="#/getting-started">
getting started
</a>
</li>
<li class="fd-side-nav__item">
<a href.bind="navItem.href" class="fd-side-nav__link has-child" aria-haspopup="true"
aria-expanded="" aria-controls="ac1" id="list1" href="#/">
foundation
</a>
<ul class="fd-side-nav__sublist" id="ac1" aria-hidden="false">
<li class="fd-side-nav__subitem">
<a class="fd-side-nav__sublink" href.bind="childItem.href" href="#/colors">
Colors
</a>
</li>
<li class="fd-side-nav__subitem">
<a class="fd-side-nav__sublink" href.bind="childItem.href" href="#/grid">
Grid
</a>
</li>
<li class="fd-side-nav__subitem">
<a class="fd-side-nav__sublink" href.bind="childItem.href" href="#/spacing">
Spacing
</a>
</li>
<li class="fd-side-nav__subitem">
<a class="fd-side-nav__sublink" href.bind="childItem.href" href="#/typo">
Typography
</a>
</li>
</ul>
</li>
<li class="fd-side-nav__item">
<a href.bind="navItem.href" class="fd-side-nav__link" aria-haspopup="" aria-expanded=""
aria-controls="ac2" id="list2" href="#/layout">
layout
</a>
</li>
<li class="fd-side-nav__item">
<a href.bind="navItem.href" class="fd-side-nav__link" aria-haspopup="" aria-expanded=""
aria-controls="ac3" id="list3" href="#/components">
components
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<main class="fd-app__main">
<article class="fd-page">
<header class="fd-page__header fd-has-background-color-background-1">
fd-page_header
</header>
<div class="fd-page__content fd-has-background-color-neutral-2">
<!-- http://localhost:4001/layouts/section.html -->
<section class="fd-section">
<div class="fd-section__header">
<h1 class="fd-section__title">Theme Colors</h1>
</div>
<div class="fd-panel">
Panel
</div>
</section>
<section class="fd-section">
<div class="fd-section__header">
<h1 class="fd-section__title">Fonts</h1>
</div>
<div class="fd-panel">
The section
<!-- is a page-level structure container used to divide a page into stacked sections
with appropriate padding applied. These should be used to separate large groups
of content on a page.
-->
</div>
</section>
</article>
</main>
</div>
</div>
<div class="fd-shell__footer">
fd-shell__footer
</div>
</div>
</body>
</html>
Easy reproducible with http://localhost:4000/demo-pages/sidebar-app-demo.html, just replicate the paragraph text "Optional page intro lorem ipsum dolor" multiple times and refresh.