Creating a stylish look by incorporating bullet points into an active tab while also addressing challenges with vertical alignment and ensuring that the content remains contained within

Currently, I am in the process of enhancing an active tab on my menu by adding a bulletpoint. The script that accomplishes this is depicted below:

$(document).ready(function() {

    //add class active to a tab based on url
    switch (window.location.pathname) {
      case '/admin/statistics':
        $('#statistics').addClass('is-active bulletpoint');
        break;
      case '/admin/articles':
        $('#articles').addClass('is-active bulletpoint');
        $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input id="search-table" type="text" class="search-input" placeholder="Søk"></li>');
        break;
      case '/admin/users':
        $('#users').addClass('is-active bulletpoint');
        $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input type="text" class="search-input" id="search-table" placeholder="Søk"></li>');
        break;
      case '/admin/articles/create':
        $('#create').addClass('is-active bulletpoint');
        break;
      case '/admin/notifications/create':
        $('#notification').addClass('is-active bulletpoint');
        break;
      }
});
.tabs {
  background-color: #353A41;
  border: 0;
  height: 56px;
}

.tabs a{
  color: #FFFFFF;
  font-size: 17px;
}

.tabs a:hover, .is-active {
  background-color: #2A2E34;
}

.bulletpoint {
  list-style-type: disc;
  list-style-position: inside;
  color: #FFFFFF;
  height: 100%;
  line-height: 1;
}

.tabs-title > a {
   display: block;
   padding: 1.25rem 1.5rem;
   line-height: 1;
   font-size: 0.75rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js*></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrackcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<ul class="tabs">
  <li class="tabs-title" id="create"><a href="{{ url('/admin/articles/create') }}">Add New Post</a></li>
  <li class="tabs-title" id="articles"><a href="{{ url('/admin/articles') }}">My Posts</a></li>
  @if (Auth::user()->hasRole('admin'))
      <li class="tabs-title" id="statistics"><a href="{{ url('/admin/statistics') }}">Statistics</a></li>
      <li class="tabs-title" id="users"><a href="{{ url('/admin/users') }}">Users</a></li>
      <li class="tabs-title" id="notification"><a href="{{ url('/admin/notifications/create') }}">New Message</a></li>
  @endif
</ul>

While the bulletpoint has been successfully added, it seems to lack vertical alignment within the tab. The desired alignment needs to be achieved to keep it neatly enclosed. Here's what it currently looks like:

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

Various methods have been attempted to align the bulletpoint vertically, but unfortunately none have yielded satisfactory results.

javascripthtmlcss

Answer №1

Your CSS code looks good, but there is a small change needed:

display: block; property of .tabs-title > a selector should be changed to display: inline-block;

.tabs-title > a {
   display: inline-block;
   padding: 1.25rem 1.5rem;
   line-height: 1;
   font-size: 0.75rem;
}

UPDATE

If you want the li elements to be aligned next to each other.

Wrap your li inside a div like this:

<ul class="tabs">
  <div><li class="tabs-title is-active bulletpoint" id="create"><a>Nytt inlegg</a></li></div>
  <div><li class="tabs-title" id="articles"><a>Mine innlegg</a></li></div>
  <div><li class="tabs-title" id="statistics"><a>Statistikk</a></li></div>
  <div><li class="tabs-title" id="users"><a>Brukere</a></li></div>
  <div><li class="tabs-title" id="notification"><a>Nytt melding</a></li></div>
</ul>

And add the following CSS:

.tabs div {
   display: inline-block;
   width: auto;
}

Answer №2

Check out the solution below:

JavaScript

<script>
    $(document).ready(function () {
        // Applying active class to tabs based on URL
        switch (window.location.pathname) {
            case '/admin/statistics':
                $('#statistics').addClass('is-active bulletpoint');
                break;
            case '/admin/articles':
                $('#articles').addClass('is-active bulletpoint');
                $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input id="search-table" type="text" class="search-input" placeholder="Search"></li>');
                break;
            case '/admin/users':
                $('#users').addClass('is-active bulletpoint');
                $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input type="text" class="search-input" id="search-table" placeholder="Search"></li>');
                break;
            case '/admin/articles/create':
                $('#create').addClass('is-active bulletpoint');
                break;
            case '/admin/notifications/create':
                $('#notification').addClass('is-active bulletpoint');
                break;
        }
    });
</script>

HTML

<ul class="tabs">
    <li class="tabs-title" id="create"><a href="{{ url('/admin/articles/create') }}">New Post</a></li>
    <li class="tabs-title" id="articles"><a href="{{ url('/admin/articles') }}">My Posts</a></li>
    @if (Auth::user()->hasRole('admin'))
    <li class="tabs-title" id="statistics"><a href="{{ url('/admin/statistics') }}">Statistics</a></li>
    <li class="tabs-title" id="users"><a href="{{ url('/admin/users') }}">Users</a></li>
    <li class="tabs-title" id="notification"><a href="{{ url('/admin/notifications/create') }}">New Notification</a></li>
    @endif
</ul>

CSS

<style>
    .tabs {
        background-color: #353A41;
        border: 0;
        height: 56px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .tabs > li{
        display: inline-block;
    }

    .tabs a{
        color: #FFFFFF;
        font-size: 17px;
    }

    .tabs a:hover, .is-active {
        background-color: #2A2E34;
    }

    .bulletpoint {
        list-style-type: disc;
        list-style-position: inside;
        color: #FFFFFF;
        height: 100%;
        line-height: 1;
    }

    .tabs-title > a {
        display: block;
        padding: 1.25rem 1.5rem;
        line-height: 1;
        font-size: 0.75rem;
    }

</style>

I trust this information will be of use to you.

Answer №3

A more streamlined approach would be to utilize pseudo elements for applying the necessary styling.

HTML

<ul class="tabs">
  <li class="tabs-title" id="create"><a href="{{ url('/admin/articles/create') }}">New Post</a></li>
  <li class="tabs-title" id="articles"><a href="{{ url('/admin/articles') }}">My Posts</a></li>
  @if (Auth::user()->hasRole('admin'))
      <li class="tabs-title" id="statistics"><a href="{{ url('/admin/statistics') }}">Statistics</a></li>
      <li class="tabs-title" id="users"><a href="{{ url('/admin/users') }}">Users</a></li>
      <li class="tabs-title" id="notification"><a href="{{ url('/admin/notifications/create') }}">New Message</a></li>
  @endif
</ul>

CSS

.tabs {
  background-color: #353A41;
  border: 0;
  height: 56px;
}

.tabs a{
  color: #FFFFFF;
  font-size: 17px;
}

.tabs a:hover, .is-active {
  background-color: #2A2E34;
}

// Styling is removed from the base class and applied using pseudo-elements
.bulletpoint::after {
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #fff;
  right: 10px; // slight padding
  top: 50%; // centering vertically
  transform: translateY(-50%); // adjusting vertically
}

// Adding position: relative to .tabs-title so bullets depend on parent element
.tabs-title {
  position: relative;
}

.tabs-title > a {
    display: block;
    padding: 1.25rem 1.5rem;
    line-height: 1;
    font-size: 0.75rem;
}

To include the bullet point, simply toggle the .bulletpoint class on any .tabs-title element as needed. Detailed explanations of each rule can be found within the code itself.

Answer №4

It appears that the foundation css is overriding the user agent styles in this case.

Please ensure that the following code snippet is included:

ul {
    list-style-type: disc;
}

To effectively override foundation's styles, use 

list-style-type: disc !important;

Here is the updated fiddle link for reference: https://jsfiddle.net/nashcheez/8yoL5pvy/4/

Additionally, I have attached a screenshot below for visualization:

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

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

Issue Encountered While Attempting to Show a Div Element within a Function

Check out this HTML code snippet: <div class="div1" id ="div1" onclick="onStepClicked()" style ="text-align:center">Step 1</div> And here is the corresponding Script: function onStepClicked() { var elem = document.getElementById(&apo ...

javascripthtmlfunctiononclick

Revamping the appearance of Youtube's DOM elements to enhance user experience

Each Youtube video includes a column div with two children: primary and secondary. https://i.sstatic.net/c4ayc.png https://i.sstatic.net/8bFf3.png The primary div contains a 'ytd-comments' element which houses all comments. I attempted to move ...

htmlcsspolymerdom-manipulationhtml-rendering

Utilizing external functions within AngularJS Controller

I need to execute an external JS function that fetches data from a REST endpoint, which takes some time. The problem is that the graph is loading before the data is retrieved and inserted into it. External JS: function callEndpoint() { var sensorID = ...

javascriptangularjs

What is the best way to implement multiple reCaptcha in a single component in vue.js?

I am facing an issue with adding reCaptcha to 2 tabs within a component. The code I implemented only displays the captcha in the first tab. <div class="tab-content clearfix"> <div class="tab-pane active" id="1a"> <form> <div cla ...

javascriptvue.jsvuejs2recaptcha

Trouble with visibility of Angular controller variables on scope

I recently adjusted my code to align with John Papa's Angular style guide, but encountered an issue where my controller is no longer visible in ng-inspector. If I can successfully display vm.message, I believe I can resolve the remaining issues (thoug ...

javascriptangularjshtmlng-controller

Issues with loading Webpack, Gulp, and React

Below is my setup. When I execute gulp in the directory containing these files, a plethora of errors like the following are generated. They all share a similar signature but fail to locate different parts of react-bootstrap, react-dom, or similar. Module ...

javascriptnode.jsreactjswebpackgulp

The issue I'm facing with Backbone.undo.js is that it is failing to track my second span and is unable to save

I have developed a small application where I can edit spans by clicking on them. An interesting issue arises when trying to edit the second span - it automatically changes the value of the first span to match the second one. Moreover, I am unable to reve ...

javascriptjqueryhtmlbackbone.js

There was an unexpected error: Unable to access the 'bool' property of an undefined object

{ "name": "unique-react", "version": "2.0.1", "private": true, "scripts": { "start": "webpack-dev-server --hot --port 3002 --open --inline", "build": "cross-env NODE_ENV=production rimraf dist && webpack", "package": "webpack -p ...

javascriptreactjsnpmundefinedreact-proptypes

Angular TS class with an ever-evolving and adaptable style

Currently, I am working with angular 9. Does anyone know a way to dynamically change the CSS of a class in a component? .stick-menu{ transform: translate(10px,20px); } I am looking to dynamically adjust the position of x and y values. For example: .stic ...

cssangulartypescript

The elements in the navigation bar stay in view for a short period of time even after the collapsible navbar has been

After collapsing the navbar, the navbar items remain visible for a short period of time, as shown in the second image below. Here is the HTML code: <nav class="navbar navbar-dark fixed-top" style="background-color: transparent;> <a class="navb ...

cssbootstrap-4navbar

What is the best way to manage connection leaks in Node.js?

I developed a server application using Node.js. After executing lsof -p 10893 (where 10893 is the process ID of my Node.js app), I observed the following output: node 10893 root 19u IPv4 (num) 0t0 TCP ip-X.X.X.X->ip-X-X-X.X:45403 (ESTABLISHED ...

javascriptnode.js

JavaScript client unable to establish WebSocket connection with server

I have exhausted all tutorials from various sources, including StackOverflow, but none of them seem to resolve my issue. My problem lies in establishing a connection between a client and a server using WebSockets; I always encounter the error message WebSo ...

javascriptnode.jsexpresswebsocket

When attempting to utilize yarn link, I receive an error message indicating that the other folder is not recognized as a module

After successfully running "yarn link," I encountered an issue when attempting to use it in a different project. The error message displayed was ../../.tsx is not a module. What could be causing this problem? const App: React.FC = () => { const [op ...

javascriptreactjstypescriptyarnpkg

Troubleshooting: Unable to preview Facebook Page plugin

When I visit the Facebook developer site to get the code for a Facebook page plugin, I use this link. The preview feature works perfectly with pages like "facebook.com/Nike", but when I try it with my own page, "facebook.com/BargainHideout", it doesn&apos ...

javascripthtmlcssfacebook

Pressing a button to input a decimal in a calculator

I am encountering an issue with inputting decimals in my JavaScript. I have a function that checks if the output is Not a Number (NaN). If it is, I want it to output a decimal instead. I attempted to add another conditional statement like this: var opera ...

javascript

Display or hide an image in Angular when a button is clicked

I am facing an issue in my code where I want to show and hide an image through a link when a button is clicked. Currently, when I click the button, the image opens in a new tab in Chrome instead of displaying it on my app's page. I need to link the UR ...

javascripthtmlangulartypescript

Tips for managing the response from a POST request using jQuery

I'm currently working on sending data via POST to my ASP.Net MVC Web API controller and retrieving it in the response. Below is the script I have for the post: $('#recordUser').click(function () { $.ajax({ type: 'POST', ...

javascriptjqueryajaxasp.net-mvc-4asp.net-web-api

I am unable to reach my pages through their URL directly, I can only access them through links within Next.js

My next JS application runs smoothly during development, but encounters an issue when published online. I can only access the pages through links on the home page that direct to those specific pages. For instance, trying to navigate directly to www.examp ...

javascripturlnext.js

What is the best way to distinguish between inline javascript and dynamically created content in Express/Node.js?

I've encountered a bit of a noob-question despite having a few years of experience in web development. Despite searching Programmer Stack Exchange and Google, I haven't found an answer, so here goes. Currently, I'm working with the Express ...

javascriptnode.jsrefactoringexpresspug

Obtaining the value right after initializing useState in React

Currently, I am utilizing the useState hook within my functional component in React. However, I find myself puzzled by a particular issue. [myRoom,setMyRoom] = useState('test1'); Whenever I try to use the setMyRoom function to update the value ...

javascriptreactjs