Hello ! I have a child component TermsOfServices which is reused in 2 parent components OptInPage and ReadTosPage. In my child component I have FABs with a slot=“fixed” property which suddenly no longer work since I split my component into a single component. Before the code of the child component was integrated into OptInPage. As I understand it, the slot property must be managed from the parent. How can I restore the fixed position of my FABs? Thanks in advance.
Fabs in TermsOfServices component :
<Fab position="right-bottom" slot="fixed" color="pink" onClick={() => this.handleNext()}>
{currentTosId + 1 === termsOfServices.length &&
<Icon ios="f7:check" aurora="f7:check" md="material:check" />}
{currentTosId !== termsOfServices.length &&
<Icon ios="f7:chevron_right" aurora="f7:chevron_right" md="material:chevron_right" />}
</Fab>
{currentTosId > 0 && (
<Fab position="left-bottom" slot="fixed" color="pink" onClick={() => this.setState({ currentTos: currentTosId - 1 })}>
<Icon ios="f7:chevron_left" aurora="f7:chevron_left" md="material:chevron_left" />
</Fab>
My OptinComponent :
<Popup opened={opened} className="demo-popup-swipe" tabletFullscreen>
<Page id="crowdaa-optin_page">
<Navbar title={formatMessage({ id: 'press_yui_tos_title' })}>
<NavRight>
<Link onClick={() => logout()}>
<FormattedMessage id="press_yui_comments_popup_edit_close" />
</Link>
</NavRight>
</Navbar>
<Block>
{ opened && <TermsOfServices onSucceeded={() => { onSucceeded(); }} /> }
</Block>
</Page>
</Popup>
My ReadTosPage component :
<Page id="crowdaa-readtos_page">
<Navbar backLink title={formatMessage({ id: 'press_yui_tos_title' })} />
<Block>
<TermsOfServices
handleGoBack={this.handleGoBack}
isReadOnly
/>
</Block>
</Page>
- Remove slots from FAB
- Such
TermsOfServices should be placed in page root with slot="fixed" instead
<Page id="crowdaa-readtos_page">
<Navbar backLink title={formatMessage({ id: 'press_yui_tos_title' })} />
<TermsOfServices
slot="fixed"
handleGoBack={this.handleGoBack}
isReadOnly
/>
</Page>
Thanks for your reply however it works partially, I don’t have the scroll bar to go down on my page, do you have any idea what is going on?
Can you show maybe a screenshot of what is happening? And the resulting HTML code?
I cannot go down by scrolling however the page is long.
ReadTosPage :
<div class="page page-previous" aria-hidden="true">
<div class="page-content">
<div class="block"><h2><span>Utilisateur</span></h2></div>
<div class="press-yui-UserProfile author block">
<div class="press-yui-UserProfile__oval oval"></div>
<div class="press-yui-UserProfile__infos author-infos">
<div class="press-yui-UserProfile__avatar press-yui-UserProfile__avatar--no-avatar">
<i class="icon ion-md-person" style="font-size: 65px;"></i></div>
<div class="author-name">amelie</div>
<a class="button button-fill button-large button-raised" href="#"><span>Se déconnecter</span></a>
</div>
</div>
<div class="pages-list list">
<ul>
<li class="">
<div class="item-content">
<div class="item-media">
<div slot="media" class="item-media bg-color-black">
<i class="text-color-orange icon ion-ios-moon"></i>
</div>
</div>
<div class="item-inner">
<div class="item-title"><span>Activer le mode sombre</span></div>
<label class="toggle"><input type="checkbox" value=""><span class="toggle-icon"></span>
</label>
</div>
</li>
<li class="">
<a class="item-link" href="/community/publicProfile/">
<div class="item-content">
<div class="item-inner">
<div class="item-title">
<span>Vos publications</span>
</div>
</div>
</div>
</a>
</li>
<li class="">
<a class="item-link" href="/profile/edit/">
<div class="item-content">
<div class="item-inner">
<div class="item-title">
<span>Modifier le profil</span>
</div>
</div>
</div>
</a>
</li>
<li class="">
<a class="item-link" href="/tos/">
<div class="item-content">
<div class="item-inner"><div class="item-title"><span>Conditions d'utilisation</span></div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="crowdaa-TermsOfServices">
<div class="crowdaa-TermsOfServices_content text-align-center">
<h1><span>Conditions d'utilisation 1 sur 2</span></h1>
<div class="block-title">Title1</div><div class="block inset block-strong">
<div class="tos_content">
<div class="col-lg-12"> <h1 class="text-center">Ambition Réunion</h1>
<h2 class="text-center">POLITIQUE DE CONFIDENTIALITÉ</h2>
<p class="text-center">Dernière mise à jour: 01/09/2016</p>
<p>——>All The t ext here<——</p>
</div>
</div>
</div>
<div class="fab fab-right-bottom color-pink"><a><i class="icon f7-icons">chevron_right</i></a></div>
</div>
</div>
</div>
</div>
Need to see whole page HTML content starting from <div class=“page”> and plus please content of the corresponding react page component
I edited the previous message with the code. Here is my page component:
Ok, it is because you’ve put whole TOS content to “fixed” slot -> it won’t be scrollable. It is impossible to have both fixed and not fixed elements in single child component, just won’t work
ok thanks so there is no way to just make my fabs fixed in my child component?
I extracted my Fabs from the component
TermsOfServices and I put them in a new component by passing it a prop slot = “fixed” however it still does not work. I find it difficult to understand the concept of the slot between parent and child. This way there is the scroll but the FABs are not fixed.
Parent TermsOfServices :
return (
<div id="crowdaa-TermsOfServices">
{ (!loaded || !currentTermsOfServices) && (
<div className="crowdaa-TermsOfServices_content text-align-center">
<Block className="row align-items-stretch">
<Col><Preloader size={50} /></Col>
</Block>
</div>
)}
{ loaded && currentTermsOfServices && (
<div className="crowdaa-TermsOfServices_content text-align-center">
<h1>
<FormattedMessage id="press_yui_tos_subtitle" values={{ from: currentTosId + 1, to: termsOfServices.length }} />
</h1>
<BlockTitle>
{ReactHtmlParser(
currentTermsOfServices.title,
{ transform: htmlTransformCallback },
)}
</BlockTitle>
<Block strong inset>
<div className="tos_content">
{ReactHtmlParser(
currentTermsOfServices.html,
{ transform: htmlTransformCallback },
)}
</div>
</Block>
<TosButtons
slot="fixed"
currentTosId={currentTosId}
termsOfServices={termsOfServices}
handlePrev={this.handlePrev}
handleNext={this.handleNext}
/>
</div>
)}
</div>
);
My Fabs in new component TosButtons :
render() {
const {
currentTosId, termsOfServices, handlePrev, handleNext,
} = this.props;
return (
<div>
<Fab position="right-bottom" color="pink" onClick={() => handleNext()}>
{currentTosId + 1 === termsOfServices.length &&
<Icon ios="f7:check" aurora="f7:check" md="material:check" />}
{currentTosId !== termsOfServices.length &&
<Icon ios="f7:chevron_right" aurora="f7:chevron_right" md="material:chevron_right" />}
</Fab>
{currentTosId > 0 && (
<Fab position="left-bottom" color="pink" onClick={() => handlePrev()}>
<Icon ios="f7:chevron_left" aurora="f7:chevron_left" md="material:chevron_left" />
</Fab>
)}
</div>
);
}
This is how HTML/CSS works, to make FAB fixed, it (the FAB) should be a direct child of the <div class="page"> element
