0

I am trying to create a page with the Ionic Framework and Angular which has a sidebar, and some text content against that sidebar. Right now, the sidebar works well, but when I try to add some text content, the text ends up underneath the sidebar. I am assuming this is because the sidebar is positioned as absolute, and thus is out of the document flow.

Here is my current code:

<div id="sidebar_button_container">
  <ion-button href="start-game" color="dark" expand="block">{{ newgame_text }}</ion-button>
  <ion-button href="view-previous-games" color="dark" expand="block">{{ viewgames_text }}</ion-button>
</div>

<div id="text_content">
  Test. Example Text, This is so that I can read it wherever it is.
</div>

#sidebar_button_container {
  text-align: center;

  position: absolute;
  left: 0;
  top: 55px;
  bottom: 0;

  padding-right: 5px;
  padding-left: 5px;

  background-color: #dddddd;
}

@media screen and (min-width:400px) {
  #sidebar_button_container {
    right: 80%;
  }
}

@media screen and (max-width:400px) and (orientation:portrait) {
  #sidebar_button_container {
    right: 50%;
  }
}

@media screen and (max-width:600px) and (orientation:landscape) {
  #sidebar_button_container {
    right: 60%;
  }
}

(Btw, the top position of the sidebar is because there is an ion-toolbar at the top of the page, and the media checks are only tested on my phone and laptop, and are included here only for a more complete picture of my code.)

This is an image of what the issue looks like. In this picture, you can see that the text in the text_content div is hidden behind the sidebar. I would like to know how I could position the text against the sidebar instead of behind it, while keeping the sidebar intact, and preferably without hardcoding a lot of values in when I want to add paragraphs or line breaks.

Menotdan
  • 130
  • 1
  • 11
  • I do it [like this](https://github.com/MintPlayer/MintPlayer/blob/master/MintPlayer.Web/ClientApp/src/app/app.component.html#L10). The sidebar is `position:fixed;height:100%`, the **main-content** is `padding-left:220px` and allow the document to overflow – Pieterjan Jul 19 '22 at 20:00
  • https://codepen.io/mhartington/pen/GRqryG – Najam Us Saqib Jul 20 '22 at 08:13
  • 1
    The simplest way ist to use the [ion-menu](https://ionicframework.com/docs/api/menu) component. – csaar Jul 20 '22 at 13:30
  • @csaar I already figured out how to make the sidebar in this post, however I wonder if you know why my ion-menu (I'm working on a new piece of my website) covers up the entire page? I can't click on any buttons or ion-inputs outside of the menu. – Menotdan Jul 20 '22 at 14:02
  • I have asked a new question about the ion-menu component so if anyone can help me with that instead that would be great. – Menotdan Jul 21 '22 at 01:37

2 Answers2

1

You can try a number of things.

  1. The first one that comes to mind for me at-least is to add a CSS padding-left property to "text_content". Short term I don't think this is the best solution, given you will likely have various screen dimensions, and on smaller screens the padding might push the text too much to the right.

  2. The Second idea that comes to mind would be to create a parent/container div. (as shown below) and try adding some flex-box to the "container" CSS class using the following resource (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

<div id='container'>
 <div id="sidebar_button_container">
   <ion-button href="start-game" color="dark" expand="block">{{ newgame_text 
 }}</ion-button>
   <ion-button href="view-previous-games" color="dark" expand="block">{{ 
 viewgames_text }}</ion-button>
 </div>

 <div id="text_content">
   Test. Example Text, This is so that I can read it wherever it is.
 </div>
</div>
  1. The last potential idea/solution I have would be to make the "text_content' relative to the parent. You can find an example of how to do that here (Position absolute but relative to parent).

I hope this helps you find the solution, this is one of my first Stack Overflow contributions, so apologies for not being able to provide an immediate answer. (If you have a public repository you are willing to share, I could clone down your project, and do some more tinkering myself). Cheers.

ipdxcreative
  • 48
  • 2
  • 7
  • Thank you for this answer, it wasn't exactly what I needed, but the flexboxes helped. I needed to set my sidebar to be statically positioned, and then use the height and width params instead of the absolute positioning params. Then I set up the parent container for both the text and the sidebar and set its display mode to flex. Then it worked as I was hoping. – Menotdan Jul 19 '22 at 20:13
0

You should have a look at ionic grid

You can write something like

<ion-grid>
    <ion-row>
        <ion-col size="2">
            <ion-button
                href="start-game"
                color="dark"
                expand="block"
            >{{ newgame_text }}</ion-button>
            <ion-button
                href="view-previous-games"
                color="dark"
                expand="block"
            >{{ viewgames_text }}</ion-button>
        </ion-col>

        <ion-col>
            Test. Example Text, This is so that I can read it wherever it is.
        </ion-col>
    </ion-row>
</ion-grid>
Ramon Schmitt
  • 106
  • 3