angular-ui-tab-scroll: Odd spacing between blocks and tabs, each separated individually

Greetings! I would like to express my gratitude for this wonderful library!

However, I am encountering an unusual issue when trying to wrap a tabset with tabs that are included separately. This can be done either by adding individual tab elements manually in the DOM, or by using group of tabs added through ng-repeat:

Take a look at this example:

      <scrollable-tabset show-tooltips="false">
        <tabset>
          <!-- 1st Block of tabs-->
          <tab>
              <tab-heading>Tab 0</tab-heading>
              Tab 0 content
          </tab>
           <!-- 2nd Block of tabs-->
          <tab ng-repeat="tab in tabs1" active="tab.active" disabled="tab.disabled">
            <tab-heading>{{tab.heading}}</tab-heading>
            {{tab.content}}
          </tab>
          <!-- 3rd Block of tabs-->
          <tab ng-repeat="tab in tabs2" active="tab.active" disabled="tab.disabled">
            <tab-heading>{{tab.heading}}</tab-heading>
            {{tab.content}}
          </tab>
           <!-- 4th Block of tabs-->
          <tab>
              <tab-heading>Tab 6</tab-heading>
              Tab 0 content
          </tab>
        </tabset>
      </scrollable-tabset>

I have thoroughly examined and compared the CSS of each block, but couldn't find any discrepancies...

Any thoughts on this matter?

Thank you.

javascriptjquerycssangularjstabs

Answer №1

The reason for this issue is caused by the usage of inline-block. When a series of inline-block elements are styled as you would with regular HTML elements, spaces will be present between them.

To resolve this problem, it is recommended to either utilize float, or adjust your HTML formatting to eliminate spaces between elements. The preferred solution would be to use float.

Dealing with Spacing Between Inline Block Elements

Answer №2

A solution for this spacing issue, suggested by efan Dimov, involves using the float CSS property or adjusting the whitespace in your markup as demonstrated below:

Check out this example on Plunker

 <scrollable-tabset show-tooltips="false">
        <tabset><!-- 1st Block of tabs--><tab>
              <tab-heading>Tab 0</tab-heading>
              Tab 0 content
          </tab><!-- 2nd Block of tabs--><tab ng-repeat="tab in tabs1" active="tab.active" disabled="tab.disabled">
            <tab-heading>{{tab.heading}}</tab-heading>
            {{tab.content}}
          </tab><!-- 3rd Block of tabs-->
          <tab ng-repeat="tab in tabs2" active="tab.active" disabled="tab.disabled"><tab-heading>{{tab.heading}}</tab-heading>
            {{tab.content}}</tab><!-- 4th Block of tabs--><tab><tab-heading>Tab 6</tab-heading>
              Tab 0 content</tab></tabset>
      </scrollable-tabset>

To explore different methods to tackle this issue, @chriscoyier has created a helpful codepen: View Chris Coyier's Codepen

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

how to split a string by commas and convert it into an array using angularJS

I need to convert a string, like "12,13", into an array format such as [12,13] in my controller. Even after trying the split function, I couldn't get it to work properly. $scope.mySplit = function(string, nb) { var array = string.split(&ap ...

arraysangularjs

A form field leaves the container element, positioned to the far right using the `float: right;` CSS property

This is the content within the <body> tag. <div id="border"> <p><h1 style="text-align: center;">Welcome to XYZ Airline!</h1></p> <table caption="Select your preferred seat" style="margin-botto ...

htmlcssalignment

Set datatables to perform regex searches that specifically target the beginning of text

Here is my JavaScript code for using datatables, I want to have the search function only filter results that start with the specified keyword. For example, if I have [hello, hello_all, all_hello] and my search term is "hel", I should only get [hello, hel ...

javascriptjqueryregexdatatables

Navigate to a different page in NextJs without causing a page refresh or altering the current state of the application

Recently, I encountered a challenge in my NextJS application while attempting to incorporate dynamic routes as endpoints on my server. Specifically, when accessing localhost:3000/register, the register.tsx file is loaded successfully. However, within one ...

javascriptreactjsnext.js

Is the automatic garbage collection of components a built-in feature of

Consider this scenario, where I have the following HTML document: <html> <head>... including all the necessary js and css files here...</head> <body> <div class="placeholderForExtPanel"></div> </b ...

javascriptextjsgarbage-collection

Encountering an issue with the factory test within the controller, as it indicates that

Seeking assistance with testing the function below within a controller. getEmployeeList is a function within the controller that loads data in the UI upon controller initialization. It relies on a factory, but after implementing the code snippet below in ...

angularjsjasminekarma-jasmine

The class 'ConsoleTVsChartsCharts' could not be located

Attempting to implement Laravel charts using the package consoletvs/charts:6.*, Utilizing service providers ConsoleTVs\Charts\ChartsServiceProvider::class, With an alias: 'Charts' => ConsoleTVs\Charts\Charts::class, ...

javascriptphplaravelcharts

Implementing conditional statements in Puppeteer web scraping

Attempting to extract data from a table... Each country name is wrapped in an <a> tag, however some are not. Unfortunately, when the structure of the HTML changes, the program crashes Code => Output => I have experimented with the following ...

javascriptnode.jsweb-scrapingpuppeteercheerio

Displaying PHP output within a JavaScript expression

Let's dive into a scenario involving a basic HTML document and some JavaScript that's loaded within it: <!-- doc.html --> <!doctype html> <html lang="en"> <head> <script type="text/javascript" src=" ...

phpjavascripthtml

The body can only stretch up to a certain percentage of its width, not a full 100%

Recently, I've been encountering an issue with my webpage where the body does not stretch 100% the width of the screen. I've tried numerous CSS rules to fix it, but nothing seems to be working. When you view the page in a browser, it appears to c ...

htmlcssstretch

ui router how to validate state upon loading

When my application loads, it automatically checks if the user's session on the server is still valid. If the user is logged in, the application will redirect them to their dashboard if they are not already there. The session validation is handled by ...

angularjsangular-ui-router

Which is the superior choice: Classic Ajax or jQuery Ajax?

I have a question about using AJAX. I'm stuck between choosing traditional AJAX and jQuery AJAX. When I use jQuery AJAX, sometimes it behaves strangely in Internet Explorer. This is surprising to me because jQuery is supposed to be a cross-browser lib ...

javascriptjqueryajax

inputting an array of strings into the value attribute of an input element using jQuery

Whenever a user writes something in the input field with id="clientAdd" and presses enter, that text should be displayed as a tag inside a div. These tags are then saved as an array of strings, which I want to pass as the value for the hidden input field w ...

javascriptjqueryhtml

The import error states that the object 'useHistory' is not available for export from the module 'react-router-dom'

Struggling with importing useHistory from 'react-router-dom' and encountering the error message: import error: 'useHistory' is not exported from 'react-router-dom'. Despite searching for solutions like Attempted import error: ...

javascriptreactjsreact-router-dom

I need to locate a div element with the class name of "dhx_cal_light" and adjust its height style to 460px

Is there a way to locate a div element with the class "dhx_cal_light" and modify its height to 460px? Here is the HTML snippet: <div class="dhx_cal_light" style="visibility: visible; height: 511px; display: block; top: 80px; left: 633px;"> This is ...

jquery

What is the best way to connect a fresh post to a different URL in ReactJS and Redux?

Currently, I am working with Redux and ReactJS to develop a discussion platform. One of the key features I am trying to implement is where users can input the title and content of their post, which will then be submitted to create a new post. After submit ...

javascripthtmlurlreactjsredux

Mongoose and Next.js: Encountered Runtime Error - Cannot Access Undefined Properties (Token)

For some reason, the Model I defined is not working properly, despite being similar to another one that works without errors. Can anyone help me figure out why? If you need to see a minimal, reproducible example, check it out here. The problematic code: ...

javascriptmongodbmongoosenext.jsmongoose-schema

Retrieve a remote text file using vanilla JavaScript instead of relying on jQuery

Currently, I am aiming to retrieve the content of a text file using JavaScript for parsing purposes. Although I previously relied on jQuery and JSONP for this task, I now prefer to achieve it without any framework. Despite numerous attempts, none have bee ...

javascriptajaxxmlhttprequest

I seem to be facing some challenges with loading and parsing XML using jQuery. Can anyone please guide me on what might be going wrong

I'm having trouble retrieving settings from an XML file. It seems like the object is not being loaded correctly or maybe my selector isn't working as expected. The log message inside the appendImages function isn't showing up, and I'm u ...

jqueryxmlajax

Struggling to make css selector acknowledge the margins on the right and left

I am trying to style two inner divs within a containing div by floating the first one to the left and the second one to the right. Additionally, I want to add a margin of 15px on the left for the first div and on the right for the second div. The challenge ...

htmlcss