Menu that collapses with Ionic's flexbox styling

Recently delving into the world of Ionic and flexbox, I'm faced with a challenge in organizing my layout effectively.

I aim to create a vertical menu where users can choose from various topics, each with its own set of subtopics. Upon selecting a topic, a new row should materialize displaying the corresponding subtopics. It's crucial that the topics are presented side by side.

https://i.sstatic.net/yHFRd.png

The issue lies in utilizing a row and col-50 to showcase the topics next to each other, then nesting another row within each col-50 with a col-100. This setup hinders the width of the subtopics row as it is confined within the parent col-50, failing to utilize 100% width.

https://i.sstatic.net/KAIUZ.png

What would be the most straightforward approach to resolving this predicament?

csslayoutionic-frameworkflexbox

Answer №1

Take a look at this, it might be what you're searching for: creating an Ionic menu using flexbox

I've successfully implemented this in my project as well: Ionic menu with flexbox

Here's a snapshot of the menu:

https://i.sstatic.net/KUso6.jpg

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimal techniques for leveraging CSS within Mui and Reactjs

Just starting out with mui, I'm currently working on styling CSS for mui components like so <Typography variant="h5" sx={{ fontWeight: "bold", color: "#1a759f", display: "flex", ...

javascripthtmlcssreactjsmaterial-ui

Having trouble with your website div not appearing correctly on Firefox?

I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...

htmlcssfirefoxsass

Changing the CSS property in an external SVG image to customize its appearance

I currently have an assortment of html and svg files that include: home.html <html> <head> <style> span { filter: invert(100%) } </style </head> <body> <span><img src="my.svg" /></span> ...

csssvg

Is it feasible to have fixed headers adopt the width property?

Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the ...

htmlcsshtml-tablewidthfixed-header-tables

When viewing my website on a mobile device, all elements that are supposed to be hidden on the desktop version are displayed properly. However, when I resize the

I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, ...

cssmobile

What is causing the additional space at the bottom?

Why does my centered black border triangle have an extra bottom margin causing a scroll bar to appear? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100%; background: blue; } .canvas { border: 10px s ...

csslayoutscreenpaddingmargin

Adjust transparency in Bootstrap slider with picture indicator

Currently, I am in the process of creating an HTML page featuring a Bootstrap carousel. To enhance user interaction, I have replaced the standard selector with images that, when clicked, will transition the slider to display corresponding content. In orde ...

htmlcssbootstrap-4bootstrap-carousel

The positioning of drawings on canvas is not centered

I'm facing an issue while attempting to center a bar within a canvas. Despite expecting it to be perfectly centered horizontally, it seems to be slightly off to the left. What could possibly be causing this discrepancy? CSS: #my-canvas { border: ...

javascripthtmlcss

Issues with the collapse feature in Bootstrap 5.1.3 accordion

I'm currently utilizing an accordion style to display various sets of information on a website. While all the correct information is being displayed, I am facing an issue where the accordion items are not collapsing as expected. Below is the code snip ...

phphtmlcsstwitter-bootstrapbootstrap-5

Adjusting the width of bars using JavaScript

Can anyone assist me with adjusting the width of bars in a horizontal bar graph based on percentage data? Check out my code on jsfiddle here Thank you in advance! var data = { "box1": { "bar1": "80%", "bar2": "60%", "bar3": ...

javascriptjqueryhtmlcss

dynamic text overlay on a bootstrap carousel

Having limited knowledge in html and css, I am using a bootstrap carousel slider with text. I am trying to change the color of the box randomly. https://i.sstatic.net/TozUP.jpg Here is the code that I am currently using: <ol class="carousel-indicato ...

javascripthtmlcsstwitter-bootstrap

Title Frame and Interactive Sidebar Content

Hello, I am a newcomer in the world of WordPress website design and I have been struggling with a minor CSS issue on my site (www.dimjaa.org) for the past couple of days. Despite my efforts, I have been unable to find a solution on my own. I am reaching ou ...

csswordpress

Counting JSON data items in Ionic2 can be achieved by iterating through the object

Encountering a new issue, I need to tally @NAME in order to populate array FACET[] and display @KEY Myjson " RESULT":{ "FACET":[ { "@NAME" : "creator", "@COUNT" : "20", "FACET_VALUES ...

htmljsontypescriptionic-frameworkionic2

Customizing Bootstrap Navigation: Creating Space Between Menu Items

I've configured my Bootstrap navigation with a dropdown toggle for "Coverage". I'm looking to decrease the spacing between each list item (li) under this dropdown. What CSS setting should I use to achieve this? Interestingly, when I apply float: ...

csshtmltwitter-bootstrap

instructions on incorporating a sidebar into a .NET web page utilizing a master page that lacks a sidebar

I am facing a dilemma regarding adding a sidebar to one specific page of my .net project. The master template does not include a sidebar, so I'm wondering how I can achieve this on just that one page? Here is the code snippet for the Master Template. ...

.nethtmlcss

Why are my video files exhibiting inconsistent behavior?

I've encountered an issue with the code on my website where I'm trying to display a 40-second video. The video converter I used seems to have added extra video types, which may be causing the problem. Here's what the HTML code looks like: ...

csshtmlvideoautoplay

Ensure that the <pre> tag's vertical and horizontal overflow is clipped outside of its container, displaying scrollbars as needed

Within a div element set to a specific size of 300px by 300px, there lies a pre tag containing a snippet of source code. The size of the snippet can vary. My goal is to style both the div and the pre tag in a way that prevents horizontal wrapping of the so ...

csshtml

navigate to various pages depending on the selected radio button

Is there a way to navigate to different pages based on the selection of radio buttons in my form? For example, I have 3 Ionic radio buttons named: 1. USO 2. OASO 3. TFTSO I want to redirect to a different page when USO is selected, another page for OASO, ...

javascriptjqueryhtmlangularjsionic-framework

What are some techniques for creating a responsive table in CSS that includes images?

After much searching, I am confident that using "Skeleton CSS" will help achieve my goal. The concept is simple, but implementation is proving to be difficult. I am trying to create a table with multiple images that will change width to 750px when display ...

htmlcss

How can I apply a unique CSS class to specific rows within an h:dataTable?

I am looking to apply unique CSS classes to certain rows within my <h:dataTable>. Is it possible to manipulate and style the individual table rows in a customized manner? ...

cssjsfdatatable