Apphive Docs
Apphive Documentación ( English)
Apphive Documentación ( English)
  • 👋Welcome to Apphive
  • First steps
    • 🔍Apphive
      • Start with a template
      • Start from the beginning
    • 📐Apphive editor
      • Work with containers
      • Responsive design
      • Lateral Menu
    • 📱Apphive Previewer
      • IOS App Preview
      • Android App Preview
    • 🤖Apphive AI
  • Elements
    • 🎮Controls
      • Container
      • Swiper
      • Field
      • Text
      • Button
      • Switch
      • Picker
      • Radio
      • Slider
      • Image
      • Camenra View
      • Map
      • Web View
      • Calendar
      • Icon
      • Video View
      • Graphic View
    • ⚙️Functions
      • 🕹️Controls
        • Generate swiper content
        • Iterate children
        • Modify Control
        • Toogle side menu
        • Add collection to UI
        • Toogle bottom menu sheet
        • Toogle page loading
        • Trigger Event
        • Set palette colors
        • Bubble
        • Show image viewer
      • 👨‍👩‍👧Users
        • Change my password
        • Forget Password
        • Get All Users
        • Get App Users
        • Get User Other App
        • Get Data From Other User
        • Is Logged In?
        • Login
        • Login With Facebook
        • Login With Google
        • Login with apple
        • Logout
        • Set other user custom data
        • Set user custom data
        • Sign Up
        • Update AuthInfo
        • Update data from other user
        • Is Current User Email Verified?
        • Send Email Verification
      • 📀Cloud database
        • Delete database data
        • Get Database Data
        • Save data in DB
        • Upload file
      • 💿Local database
        • Delete all local Data
        • Delete local storage data
        • Get local storage data
        • Set app value
        • Set data DB direct
        • Save local storage data
        • Set page Value
      • ⛓️Logic
        • Arithmetic Operation
        • Array from object
        • Based on current OS
        • Chronometer
        • Concat
        • Conditional
        • debounce
        • forEach
        • Global Formater
        • Value is invalid
        • Object keys
        • Generate Random Numer
        • Range Iteration
        • Regex Test
        • Search in Object
        • Set interval
        • Set timeout
        • Stop set interval
        • Switch
        • Generate uuid v1
      • 🔔Notifications
        • Confirmation alert
        • Input dialog
        • Send Alert
        • Toast notification
      • 📲Phone APIs
        • dismissKeyboard
        • Open phone settings
        • Get connection type
        • GetDeviceInfo
        • Print remote PDF
        • Get Screen Dimentions
        • Is audio playing
        • Make a call
        • Open calendar
        • Ope geo map
        • Open Url
        • Open WhatsApp
        • Pause playing audio
        • Barcode Read
        • read QR code
        • Read SMS (Android)
        • Set Audio Time
        • Share
        • Show file browser
        • Start playing audio
        • Start Recording audio
        • Stop playing audio
        • Stop Recording Audio
        • Take a photo
        • Take a video
        • Vibration phone
        • Resize Image
        • UxCam Record
        • Avoid Suspension
        • Copy clipboard
        • Download file
        • Launch App Review
        • Launch App Update
        • Biometric auth
      • 🗺️Geolocalization
        • Get All fire geolocation
        • Get fire geolocation
        • GeoFire listen item
        • Query fire geolocation
        • Query all fire geolocation
        • Remove fire geolocation
        • Set fire geolocation
        • geoFireSetMultiple
        • Geocoding
        • Get distance
        • Get geolocation
        • Start geolocation tracking
        • Stop geolocation tracking
        • Start geolocation tracking http
        • Coordinate Inside Poligon
      • 💬Push Notifications
        • Request Permission
        • Push Notifications Cancel All
        • Send push
        • Open Remote
        • permissionRequestRemote
      • 🪙AdMob
        • Interstitial Ads
      • 📈Google Analytics
        • Log Event
      • 🚗Navigation
        • Return to last screen
        • Push screen
        • replaceTopPage
        • Replace screen
      • 💵Paymentes
        • inAppPurchaseGetHistory
        • inAppPurchase
        • payUsingAppleWallet
    • 🗄️Database
    • 📲Variables menu
      • Context Data
      • ListContext
      • PreviusOutputs
      • Color value
      • EventOutput
      • Auth
      • Complex
      • Controls
      • General
    • ⌨️Keyboard shortcuts
    • 🔩App processes
      • Params (WebApps)
    • 📠API Functions
  • Compilations and upload to stores
    • ⚙️Settings
      • Change splash screen
      • Get google api key
      • 🔥Firebase
        • Create account in firebase
        • Switch to plan blaze
        • Get realtime database url
        • Get realtime storage url
        • Get services accounts.
        • Enable functions
        • Enable authentications
      • 📘Facebook Developers
        • Facebook for developers
    • 👾Android
      • Compilation
        • Request Apk and Abb in Apphive
        • Download Apk and Aab files
      • Publication
        • Get a developer account in Google Play Store
        • Publish your app in Play Store
        • Background location
      • Settinggs after publishing
        • Log In with Gmail after publishing
        • Log In with Facebook after publishing
        • Copy the database and develop users to Firebase
      • Update app in play store
        • Update version on Play Store
    • 🍎IOS
      • Previous settings
        • Get a Unlimited plan
        • Request iOS permissions
      • Developer account
        • Get a developer account
      • Compilate version on testflight
        • Create a contanier in App Store and generate Testflight version
      • IOS settings in firebase
        • Enable push notifications in Firebase
        • Enable login with Apple record in Firebase
      • Publish in app store
        • Select app to review
        • Take screenshots to publish in App Store
        • Fill the App Store form
      • Updates
        • Update your app in App Store
    • 💻WebApp
      • 💻Domains
      • 💻SubDomine
      • 💻Logins
        • 📡Google
        • ⌨️Facebook
      • 💻Vapid public key
    • ❌Compilation errors
      • Error code: 01
      • Error code: 03
      • Error code: 04
      • Error code: 07
      • Error code: 09
      • Error code: 10
      • Error code: 11
      • Error code: 12
      • Error code: 14
      • Error code: 17
      • Error code: 18
      • Error code: 20
      • Error code: 22
      • Error code: 1039
  • Pricing
    • 💰Subscriptions
      • Get a Premium or Unlimited subscription
  • Resources
    • 📕Others
    • 📘Glossary
    • ❓FAQs
    • 🆘Support
Powered by GitBook
On this page
  • Splitting the containers
  • Align elements within a container
  • Multiple alignments and directions using containers.

Was this helpful?

  1. First steps
  2. Apphive editor

Work with containers

Container Layout Designs

PreviousApphive editorNextResponsive design

Last updated 2 years ago

Was this helpful?

The container is one of the most important controls because it can help you sort your content and create great layouts.

You can add any other control inside a container, even other containers

Splitting the containers

You can split the container into different columns with different percentages in each. To split a container, you must select it and in the data tab select the number of columns you want or add the percentages manually, remember that these percentages must add up to 100

Align elements within a container

All controls inside a container have the same alignment and direction, you can change the alignment with the alignment controls at the top and left of the screen view, to change the alignment you need to select any control inside the container. container

If you selected the offset option on the control, you cannot change the alignment

You can also change the direction of the controls, to change the direction you need to select the container and then click on the style tab:

Multiple alignments and directions using containers.

As we saw before, containers can have only one direction and alignment, and sometimes it is necessary to add elements in more than one direction, to make it possible, you can add a container inside a container to change the direction:

📐