A peculiar glitch in the graphic display

Something strange is happening with my CSS tabs - there seems to be a bug. When I click on the third tab, the vertical line to the left disappears. This doesn't happen in the example provided in the manual. I'm wondering what could be going wrong in my code.

$(function () {
   $('.menu .item').tab();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui top attached tabular menu">
  <a class="item active" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
  <a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
  First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  Second
</div>
<div style="margin-right:0px;margin-left:0px" class="ui bottom attached tab segment" data-tab="third">
  Third
</div>

It's puzzling why the vertical line disappears when clicking "third" but not "second". Can you spot the error?

javascriptcssrenderingsemantic-ui

Answer №1

Upon reviewing the code in semantic.min.css, it appears that the class .ui.attached.segment includes a margin of 0 -1px, resulting in a margin of -1px on both the left and right sides.

Interestingly, the margin for the second tab is overridden by .ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment, whereas this override does not apply to the third tab.

To rectify this issue, a simple solution would involve adding a margin of 0px on both the right and left sides of the third tab.

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

Express removes newlines while reading buffers and sends them back in the response

When processing a GET request, I am taking a file and converting it into a string using the toString() method before sending it back to the client: new Promise((resolve, reject) => { fs.stat(filepath, (err, stats) => { if (err) { reject( ...

javascriptnode.jsexpressrequest

Unable to display information retrieved from an API within a React application

I am facing an issue with rendering questions fetched from an API. I have set up the state and used useEffect to make the API call. However, when I try to display the questions, it seems to disrupt my CSS and show a blank page. I even attempted moving the ...

javascriptreactjs

Unable to display jQuery modal due to error "Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent."

Check out the JS Fiddle demo here. Here is the code in question: $('#infoTable').click(infoModal); function infoModal(){ var table = "THIS IS A TABLE"; $("#dialogContainer").dialog({ appendTo: "#msg-dialog", autoOpen: f ...

javascriptjqueryhtmlcssjquery-ui

Find the nth element of an array using Javascript's map function

Recently, I took on the challenge of learning Javascript independently and came across a rather complex task. I have an array with 18 labels and another 1D array containing all the values. Each label index corresponds to every nth element in the array. F ...

javascriptarraysmapping

How can you pass arguments between commands in discord.js?

I need to transfer arguments; I have attempted to make them global variables, but I am unsure about the correct approach. Command using the arguments : let messageArray = message.content.split(" "); const args = messageArray.slice(1); const invi ...

javascriptnode.jsdiscorddiscord.js

Dynamically add Select2 with a specific class name: tips and tricks

I need help adding a new row with a select2 instance using a class name. The new row is created with the select dropdown, but I am unable to click on it for some reason. var maxGroup = 10; //add more fields group $(".addMor ...

javascripthtmljquery-select2

What is the process for incorporating an image from your local system into jsfiddle?

<img src="file://C:/Users/User/Desktop/food-Wallpaper.png" height="200" width="600"/> <div id="heading"> EXPLORE The top-rated Eateries </div> <div> <select id="location"> ...

javascripthtmlcssjsfiddle

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

javascripthtmlangularjsangularjs-ng-repeatdirpagination

Retrieving the specific value of an input from a group of inputs sharing a common class

After extensive research, I have not found a suitable solution to my specific issue. I am creating a block of HTML elements such as <div>, <span>, <i>, and <input> multiple times using a for loop (the number of times depends on the ...

javascripthtmlajaxtwig

adverse offset and backdrop

To achieve the desired layout, I am trying to adjust the negative margin for the .text div so that it aligns on top of the .image div. <div class="wrap"> <div class="image"><img src="imgage.jpg" /></div> <div class="text ...

htmlcss

Encountered a issue during the installation of an NPM module

I am a beginner in the world of web development. I attempted to set up an npm module using the command npm install grunt-contrib-watch --save-dev, however, I encountered the following error: npm WARN npm npm does not support Node.js v0.10.37 npm WARN npm ...

javascriptangularjsnode.jsnpm

Do not include any null or empty objects when assigning to an array in Mongoose

When using mongoose's find() or findOne() methods, the returned value will be [] and null, respectively, if the where conditions are not met. This can cause issues when assigning these values to an array. Currently, I am filtering out the null values ...

javascriptnode.jsmongoose

Javascript coding for monitoring health status using a three.js health bar

After updating to version r127, my health bar stopped working. I'm not sure what changes I need to make to get it working again. There seems to be an error with the shader in this version. Here is the code: Code: import * as THREE from './thre ...

javascriptthree.js

Is it possible to dynamically change the background image using ReactJS?

I attempted to dynamically change the background image style for the div below: Below is my code snippet for implementation: render: function() { var divImage = { backgroundImage : "url(" + this.state.song.imgSrc + "),url(" + this.state.nextImgSrc ...

cssreactjs

React.js: If you encounter this file type, make sure to set up the necessary loader as no loaders are currently set to process it

I encountered an issue while working on my React project with Material Kit React framework. Specifically, I needed to use NavPills from Material Kit React, but when I attempted to run the npm server, I received the following error message: ERROR in ./node_ ...

javascriptreactjsnpmwebpack

The React page loads before verifying the clients' permissions

In my application, I am using a Javascript query to fetch the data of the current user. This data is then used to verify the user's access permissions for different pages in my React app with the help of Apollo Client and GraphQL. Unfortunately, ther ...

javascriptreactjsgraphqlapollo

When the route is modified, the image fetched from the JSON disappears

When using a div tag to display JSON values on an image, I noticed that the values disappear when navigating to other pages and then returning to the home page. This issue is occurring as I develop with Angular.js NumberJson.get().then(function (resul ...

javascripthtmlangularjs

What is the best way to retrieve the results from the event handler triggered by window.external.Notify("someText") in order to send them back to JavaScript?

Using window.external.Notify("someText") in my Windows Phone 8 HTML5 Application function func() { window.external.Notify("clearTextBox"); } An event handler for ScriptNotify has been implemented private void BrowserScriptNotify(object sender, Not ...

c#javascriptwindows-phone-8

Locate specific text within the content and apply an underline to it

Is there a way to locate specific text on my website and apply an underline to it? Suppose I have some text displayed and I wish to identify all instances of the word hello and underline them. Here is my attempt at the code: $( "body:contains('hell ...

jqueryhtmlcss

The functionality of ajaxStart and ajaxStop are failing to function as expected

At first, I attempted to use ajaxStart and ajaxStop in my webpage, but unfortunately, they did not function as expected. Here is the code snippet : <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Co ...

javascriptjqueryajax