Fix Fab button layout error

[madsongr]

What’s the correct way to combine fab button in a page containing RadSideDrawer? The way I’m doing only a circle appears at the bottom of the page without the add icon and all the RadSideDrawer content is missing and I don’t want the fab to scroll.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
navigatingTo="navigatingTo"
xmlns:nsDrawer="nativescript-pro-ui/sidedrawer"
xmlns:x="nativescript-statusbar"
xmlns:FAB="nativescript-floatingactionbutton" class="page">

<x:StatusBar ios:barStyle="light" barColor="#f56c0a" />

	<ActionBar title="Assistência" class="action-bar myaction-bar">
        <android>
            <NavigationButton icon="res://menu" tap="{{ toggleDrawer }}" />
        </android>
        <ios>
            <ActionItem icon="res://menu" ios.position="left" tap="{{ toggleDrawer}}" />
        </ios>
	</ActionBar>

	<nsDrawer:RadSideDrawer id="sideDrawer" drawerContentSize="150">

		<!-- side drawer content -->
        <ns:RadSideDrawer.drawerContent>
            <StackLayout class="sidedrawer-left sideDrawer">
                <StackLayout class="sidedrawer-content">
                    <!-- <Image src="res://user72" stretch="none" class="user-png"/> -->
                    <Label text="Perfil" padding="10" tap="{{ cadastrar }}" />
                    <Label text="Indicações" padding="10" />
                    <Label text="Pontos" padding="10" />
                    <Label text="Assistência" padding="10" />
                    <Label text="Conta" padding="10" />
                </StackLayout>
            </StackLayout>
        </ns:RadSideDrawer.drawerContent>

        <nsDrawer:RadSideDrawer.mainContent>

            <ScrollView> 
                <StackLayout class="p-16">


                    <Label class="assistence-label" text="...." 
                    horizontalAlignment="center" textWrap="true" />

                    <TextField class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Assunto" text="{{ assunto }}"></TextField>

                    <TextView class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Descrição" text="{{ descrição }}"></TextView>

                    <Button class="btn mybtn" text="Enviar" tap="{{ enviar }}"></Button>
            
                    <Image class="m-t-10 m-b-10 m-l-15 m-r-15" src="res://play50x50" stretch="none" tap="{{ playAudio }}"></Image>
                    
                    <!-- <Button class="btn mybtn" text="Gravar Áudio" tap="{{ start }}" />
                    <Button class="btn mybtn" text="Parar Gravação" tap="{{ stop }}" /> -->
                    <!-- <Button class="btn mybtn" text="Get File" tap="{{ getFile }}" /> -->
                    <!-- <Button class="btn mybtn" text="Ouvir" tap="{{ playAudio }}" /> -->
                    
                    <!-- <Label class="m-t-10 m-b-10 m-l-15 m-r-15" text="{{ recordedAudioFile }}" color="#3489db" textWrap="true" /> -->

                    


                </StackLayout>
            </ScrollView>

            <FAB:fab tap="{{fabTap}}" icon="res://add" rippleColor="#f56c0a" class="fab-button"
             horizontalAlignment="right" /> 


        </nsDrawer:RadSideDrawer.mainContent>

        
           

    </nsDrawer:RadSideDrawer>

</Page>

[bradmartin]

if the icon isn't showing, then are you sure you have the correct asset bundled in your native app build and named correctly?
As for the layout, use a grid and use the row/col combination that is mentioned on the README for positioning the FAB on a listview. Similar approach just different components.

[madsongr]

@bradmartin Ok, I made the layout works inside the grid but the icon is not showing yet. The name is correct and it's inside the drawable-hdpi like the others images.

I tried changing icon="" to src="" but it didn't work

Another question:
is it possible to open more fabs clicking on that "add" fab? I want to display two options when the user clicks on add: a button to record audio and another one to add image.

I can do that using Ionic but I want to work with NS.

[bradmartin]

Try using `res://icon` as the icon value and see if the ns icon displays. If so your app needs to be rebuilt to get your icon packaged into the native executable

…

On Sat, Dec 2, 2017, 1:49 PM madsongr ***@***.***> wrote: @bradmartin <https://github.com/bradmartin> Ok, I made the layout works inside the grid but the icon is not showing yet. The name is correct and it's inside the drawable-hdpi like the others images. I tried changing icon="" to src="" but it didn't work — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#67 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhNrN2kP3cTaS0ym6MYqKWhh_rV87ks5s8anmgaJpZM4Qy103> .

[madsongr]

Ok, it's working with both res://icon and my icon too. I removed the background-color from the css file and my icon has the same color so I could see it. I don know what's happening because ns icon and my icon are getting too small and background-color is overlaying my icon.