The vertical tabs in JQueryUI lost their functionality when a few seemingly unrelated CSS styles were added

Check out the JsFiddle demo here

I embarked on a mission to craft JQueryUI Vertical tabs by following the guidance provided in this example.

The source code within the aforementioned link contains specific CSS styles:

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

Although the tabs function correctly without these CSS modifications, they inexplicably align HORIZONTALLY instead of VERTICALLY.

In an attempt to rectify this, I transcribed the styles into a separate styles.css file and included it within the <head> section of my webpage. Unfortunately, this adjustment caused the tabs to appear vertically but rendered them non-functional. Clicking on a tab header would no longer reveal its corresponding content.

Henceforth, the perplexing dilemma remains: why has this occurred, and how can it be resolved?

javascriptjqueryhtmlcssjquery-ui

Answer №1

When you click on the text, it is functioning properly because the content was not filling the full width of the li.

The li a element is receiving the default CSS properties, so you will need to override them with the following code:

.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
    display: block;
    float:none !important
}

See a working demo here: https://jsfiddle.net/op22ezxe/1/

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

JQuery enables nested sorting functionality

I need to enable the sortable feature specifically for the charts. Index.cshmtml <div id="sortable" class="col-lg-9"> <div class="col-lg-12 col-md-12 padding hidden" id=@($"chartNumber{Model.Charts[ ...

javascriptjqueryjquery-uirazor-pages

Angular 6: A guide to dynamically highlighting navbar elements based on scroll position

I am currently building a single page using Angular 6. The page is quite basic, and my goal is to emphasize the navbar based on scrolling. Below is the code snippet I am working with: .sticky { position: sticky; top: 0; } #i ul { list-style-type: ...

htmlcssangulartypescript

Webstorm encounters difficulties compiling Sass

While attempting to utilize Sass in the Webstorm IDE, I noticed that it is defaulting to Ruby 1.8 (OS Default) instead of my preferred RVM Ruby Version (1.9.x). To address this issue, I tried setting the path for Sass in the Watcher-Configuration: PATH=$ ...

javascripthtmlcsssasswebstorm

Utilize jQuery to trigger the click action for every Submit button within a Div element

I have a form that contains multiple submit buttons. Before the form is submitted, the following jQuery code is executed: $(":submit").click(function () { $("input[name='social']").val($(this).prevAll(".social").html()); $("input ...

jquery

Managing state changes with a slider in ReactJS

I am currently working with the Foundation slider found at this link: click for doc. To access the slider's current value, they recommend using a hidden input like this: <div class="slider" data-slider data-initial-start="50" data-end="200"> & ...

javascripthtmlreactjs

"Encountered an issue while attempting to scrape data from Rotten Tomatoes website

One of my tasks is to extract information from a webpage on Rotten Tomatoes. This is the screenshot of the page https://i.sstatic.net/i3gwp.png Based on the image, it seems that span class= descriptor is the parent class of a class, and div class = info ...

pythonhtmlcssweb-scraping

The $.ajax call to the asmx Web Service on the website functions properly in Internet Explorer, but encounters errors when used in Firefox and Chrome

My question is unique and not a duplicate of any existing questions on this topic. The calling pages and the asmx web service are within the same website, at the same hierarchical level, and have proper permissions. Here's my issue: I am working on a ...

jqueryasp.netajaxasmx

Only certain fields are returned by JQuery's form serialize() method

Encountering an issue with the serialize() function in jQuery when attempting to submit a serialized form via AJAX. Some of the field values are not being retained. Suspecting a problem with either my HTML structure or jQuery code: <div id="register" ...

javascriptjqueryajaxformsserialization

When working with NodeJS and an HTML form, I encountered an issue where the 'Endpoint'

Having trouble sending input data from a form to my nodejs endpoint. When I try printing the req.body, it shows up as undefined and I can't figure out why. Here is the relevant API code snippet: var bodyParser = require('body-parser') var e ...

javascripthtmlnode.jsexpressrequest

Determine in JavaScript if one date occurs exactly one week after another date

Currently, I am tackling a date comparison task for our application. The main objective is to compare the Start Date inputted by the user with the Operator/Region Effective Date, which signifies when a new list of product prices becomes valid. Our aim is t ...

javascriptreactjstypescript

Triangles positioned on the edges of a division element

I am attempting to create a DIV with angled corners, as depicted in the image below: https://i.sstatic.net/1a9LY.png So far, I have successfully implemented the top right corner using a tutorial. Here is the code snippet that accomplishes this: .lifeatb ...

css

Icon that can be clicked before

I'm struggling to figure out how to make the link icon in my code clickable so that users can click anywhere within the card to navigate to another page. I experimented with (" attr(href) ") but it resulted in adding the URL text next to the ...

htmlcsspseudo-element

Several jquery functions fail to operate as expected

After spending the entire day attempting to troubleshoot my code, I am still unable to figure out why it's not functioning properly. I have several jQuery functions, but when I try to combine them, one of them fails to work. Here is the current state ...

jqueryanythingslider

Using an array to set the center of a map - Google Maps API

I'm attempting to populate a HTML menu with values from a JavaScript multidimensional array using setCenter. Example of HTML Menu <li><a onclick="map.setCenter(cityList[0][1], cityList[0][2]); return false"><script>document.write( ...

javascriptarraysapigoogle-maps-api-3

Is it possible to utilize Angular translate to support multiple languages for individual components or modules?

Utilizing ngx-translate to switch the language of my application has proven to be quite challenging. My application consists of different languages specifically for testing purposes and is divided into separate modules with lazy loading functionality. As ...

javascriptangulartypescriptngx-translate

Having trouble navigating to the link using Selenium WebDriver

I encountered an issue when trying to click on a link as it displayed an "Element Not Found" message. Below is the HTML code I used: <a id="expTo" class="formblue_link padRight10 exportLinkActive" style="display: block; margin-left: -50px; margin-b ...

javascriptfirefoxselenium-webdriver

Is there a way to customize the title on the Configuration Page within a Joomla Component?

Problem with updating string in Language File: COM_OHANAH_CONFIGURATION="Ohanah Konfiguration" I have tried adding the above string to the Language File, but it doesn't seem to reflect the changes. I have checked other Joomla Components and they all ...

phphtmlxmljoomla

The function responsiveTable does not exist

I recently added the following code to my aspx page: <script src="../Scripts/jquery.responsivetable.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#grdStudent').responsiveTable( ...

javascriptjquery

An error was encountered: The object 'object object' does not have the 'on' method available

I want to experiment with this website: However, I am encountering an error without any events triggering. I am confused why the method "on" is not being found even on page load. <head> <link href="css/scrollable-horizontal.css" rel="styleshe ...

javascriptjquerygoogle-chromescrollable

background gradient coloring and image blending

I have created a special class that includes a gradient background color: .banner { background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D; } Additionally, I have defined another class that adds a background ...

htmlcss