Preventing Page Content Overflow in Semantic-ui SideNav

I am currently working on a webpage that includes a side navigation bar. I recently started using semantic-ui and its grid system, but I'm facing an issue where the content of the page flows under the side nav and gets hidden. I have tried various solutions such as placing the sidenav in a 4 width column and the rest of the page in a 12 width one, but it hasn't resolved the problem. The vertical menu also has the 'left fixed' option enabled.

I experimented with different parameters and classes for the sidenav, including trying to make it visible without being fixed. However, according to the documentation, the content should not flow beneath the sidenav, so I'm unsure of what I'm doing wrong.

Below is a snippet of my code:

<html >
    <head>
        <link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
        <link rel="stylesheet" type="text/css"  href="/stylesheets/app.css">
        <link rel="icon" type="image/png" href="images/favicon.ico">
    </head>

    <body>

    <div class="ui inverted teal menu">
      <div class="right menu">
        <a class="ui item">Sign In</a>
        <a class="ui item">Login</a>
        <a class="ui item">Logout</a>
      </div>
    </div>

    <div class="ui left fixed vertical menu teal inverted">
        <div class="header item"><a href='/'>MyApp</a></div>
        <%  for(var cat in allCats) { %>
            <div class="item">
                    <a class='header' href="/<%= cat %>" ><%= cat %></a>
                    <div class="menu">
                    <ul>
                        <% for(var subCat in cat) { %>
                                <li><a class="item" href="cat/subCat" ><%= subCat %></a></li>
                        <% } %>
                    </ul>
                    </div>
            </div>
        <% } %>
        <a class="item">About Us</a>
    </div>

<h1 class='title-format'>Welcome to MyApp!!!</h1>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>

    </body>
</html>

A simple h1 element displaying "Welcome to My App" seems to go under the side navbar when resizing the window.

Any help would be greatly appreciated!

javascripthtmlcsssemantic-ui

Answer №1

By utilizing the classes stackable, computer reversed, and tablet reversed, I was able to achieve the desired outcome. Take a look at the example below for the working demonstration.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<link rel="icon" type="image/png" href="images/favicon.ico">

<div class="ui inverted teal menu">
  <div class="right menu">
    <a class="ui item">Sign In</a>
    <a class="ui item">Login</a>
    <a class="ui item">Logout</a>
  </div>
</div>

<div class="ui grid stackable computer reversed tablet reversed">
  <div class="thirteen wide column">
    <h1 class='title-format'>Welcome to MyApp!!!</h1>
  </div>
  <div class="three wide column">
    <div class="ui left vertical menu teal inverted">
      <div class="header item">
        <a href='/'>MyApp</a>
      </div>
      <%  for(var cat in allCats) { %>
        <div class="item">
          <a class='header' href="/<%= cat %>">
            <%= cat %>
          </a>
          <div class="menu">
            <ul>
              <% for(var subCat in cat) { %>
                <li>
                  <a class="item" href="cat/subCat">
                    <%= subCat %>
                  </a>
                </li>
                <% } %>
            </ul>
          </div>
        </div>
      <% } %>
      <a class="item">About Us</a>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>

Answer №2

For creating a Grid layout, refer to the documentation:

If you want fixed width columns, it seems that you may need to use custom CSS classes since the default semantic-ui classes might not support it.

Here is an example of the HTML:

<div class="ui grid">
   <div class="sixteen wide column"> ... </div>
   <div class="custom-sidebar wide column"> ... </div>
   <div class="custom-content wide column"> ... </div>
</div>

You can define the widths in the CSS as follows:

.ui.grid > .column.custom-sidebar {
    width: 16em !important;
}
.ui.grid > .column.custom-content {
    width: calc(100% - 16em) !important;
}

Incorporate this CSS into your code:

.ui.grid > .column.custom-sidebar {
    width: 16em !important;
}
.ui.grid > .column.custom-content {
    width: calc(100% - 16em) !important;
}

If you are using HTML and CSS, ensure to link the needed stylesheets:

<html >
    <head>
        <link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
        <link rel="stylesheet" type="text/css"  href="/stylesheets/app.css">
        <link rel="icon"       type="image/png" href="images/favicon.ico">
    </head>

    <body>
    <div class="ui grid">
    <div class="sixteen wide column">
      <div class="ui inverted teal menu">
        <div class="right menu">
          <a class="ui item">Sign In</a>
          <a class="ui item">Login</a>
          <a class="ui item">Logout</a>
        </div>
      </div>
    </div>
    <div class="custom-sidebar wide column">   
    <div class="ui left fixed vertical menu teal inverted">
        <div class="header item"><a href='/'>MyApp</a></div>
            <div class="item">
                    <a class='header' href="" >cat</a>
                    <div class="menu">
                    <ul>
                                <li><a class="item" href="cat/subCat" >subcat</a></li>
                    </ul>
                    </div>
            </div>
        <a class="item">About Us</a>
    </div>
    </div>
    <div class="custom-content wide column">
    <h1 class='title-format'>Welcome to MyApp!!!</h1>
    
    </div>
    </div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>


    </body>
</html>

Answer №3

It turns out the solution was surprisingly simple - no need to rely on the grid system at all. Just a bit of CSS tweaking did the trick:

#sidenav {
    min-width: 200px;
}

#mainViewArea {
    margin-left: 200px;
    padding: 20px;
}

That's all it took!!!

A big thank you to those who offered assistance and pointed me in the right direction. Hopefully, this solution will benefit someone else as well.

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

Is it feasible to alter cookie data within a jQuery ajax call?

I'm currently developing a Chrome extension that enables users to capture all HTTP requests for a specific website, edit components of the request, and then send it again. My plan is to utilize jQuery's ajax function to design and dispatch the a ...

javascriptjqueryhttpcookiesgoogle-chrome-extension

Tips on how to align a wrapper-div in the center without affecting the positioning of the

I am looking to keep my page perfectly centered in the browser without affecting the content (similar to how align-text: center works). Specifically, I want to center my wrapper-div. How can I achieve this? Here is a simplified version of my current page ...

htmlcsspositioning

Revitalize website when submitting in React.js

I need assistance with reloading my React.js page after clicking the submit button. The purpose of this is to update the displayed data by fetching new entries from the database. import React, {useEffect, useState} from 'react'; import axios from ...

javascriptreactjsaxiosuse-effect

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Currently in the development phase of my epubReader app. Utilizing CSS to customize the font style within UIWebView, however encountering a challenge with the fixed font size causing fluctuations in the number of pages when changing the font style. Seeki ...

javascripthtmlioscssxhtml

Organizing outcomes from a for each function into an array using javascript

I have a form with multiple values of the same name, and I need to arrange this data in an array before sending it via AJAX. However, when I try to do this using the .push function, I encounter an error that says "Uncaught TypeError: dArray.push is not a f ...

javascriptarraysajax

Issue encountered during installation of the robotjs npm package

Would appreciate any assistance with troubleshooting this issue. I've been grappling with it for 3 days, putting in countless hours of effort. The problem arises when attempting to install the robotjs npm package, as errors keep popping up. I've ...

javascriptnode.jsnpmautomationnpm-install

The AJAX callback is malfunctioning

Attempted to create a basic callback function to become familiar with it, but encountering an issue where it doesn't work upon page load. $(document).ready(getVideoId(function (response) { alert(response); })); function getVideoId(callba ...

javascriptjqueryajax

Issues encountered while establishing a connection to an API in React Native

When attempting to log in a user by connecting to my API, I encountered some issues. It seems that every time my laptop has a different IP address, I need to make changes in the file where the fetch or XMLHttpRequest is located in order for the login proce ...

javascriptreactjstypescriptreact-native

Ways to implement a scrollable v-list component using Vuetify

I have set up a v-list using flex layout, where the v-list expands to fill the remaining space horizontally in a column. However, if the list contains many elements with a total height that exceeds the column's height, the list ends up sticking out of ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Angular first renders a component before removing another one using ng-If

I have two components that are displayed one at a time using an ngif directive. <app-root> <first-Comp *ngIf="showFirst"></first-Comp> <second-Comp *ngIf="!showFirst"></second-Comp> </app-root> Here are some key ...

javascriptangularangular-ng-if

Script for calculating in PHP

I've scoured the internet in search of a sample script that meets my specific needs, but unfortunately, I have come up empty-handed. Essentially, I am looking to retrieve a value from a div and then multiply that number based on user input. For instan ...

phphtmlcalculator

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

I am currently developing a citizenNumber component for use in forms. This component implements ControlValueAccessor to work with ngModel. export class CitizenNumberComponent implements ControlValueAccessor { private _value: string; @Input() place ...

javascriptangularhtmltypescript

Check if a specific string is present in an array using JavaScript

When working with SQL, we can easily check if a string is in a list using the following syntax: Column IN ('a', 'b', 'c') But how can we achieve this in JavaScript without it being so cumbersome? if (expression1 || expressi ...

javascriptstringlist

Leveraging ng-class for selectively applying CSS3 animations based on conditions

When specific conditions are met in my controller, I apply two CSS3 animations to the DOM using ng-class. The animations (shake Y & shake X) are added based on certain criteria being satisfied. Here is a snippet of the relevant JavaScript code: $scope.sub ...

javascriptangularjscssanimation

Is using setTimeout in a group of promises blocking in JavaScript?

Is it possible for multiple requests to be queued up and executed in sequence when calling the function func? The third promise within func includes a lengthy setTimeout that can run for as long as 3 days. Will additional calls to func trigger one after an ...

javascriptnode.jspromisesettimeout

The output is displayed in the console, but does not reflect in the browser

I am encountering an issue with my controller while trying to render the results of an AJAX request on my browser. Although I receive the correct html response using Include for Ajax requests, it only shows up in the console and not on the page itself. Wha ...

javascriptphpjqueryajaxsilverstripe

Alignment of elements in a list at the bottom

I am looking to create multi-level tabs using <li> that grow from bottom to top. Here is the current code I have: div{ width: 200px; border: 1px solid black; } ul{ margin: 0px; padding: 0px; } li{ margin: 2px; width: 20px; display: ...

htmlcss

Transform your .obj files into .glb files effortlessly with npm and Laravel

I've hit a roadblock for 2 days now and can't seem to find a solution. Could someone lend me a hand with this? Query: What's the best way to convert a .obj file to .glb? I attempted using obj2gltf npm package but integrating it with Larav ...

javascriptphpnode.jslaravelnpm

When a global variable is defined after a return statement within a function declaration, it does

Check out this Javascript code snippet: http://jsfiddle.net/ramchiranjeevi/63uML/ var foo = 1; function bar() { foo = 10; return; function foo() {} } bar(); console.log(foo); // should return 10, but returns 1 It's interesting to no ...

javascriptclosures

Developing a Customized Modal with Backbone.js

As a newcomer to Backbone, I have been trying to create a Modal in my application by setting up a base Modal class and then extending it for different templates. However, despite conducting some research, I haven't been able to find a solution that fi ...

javascriptjquerynode.jsbackbone.jsexpress