Troubleshooting the CSS problem with vertical tab borders

Below is the code snippet. Make use of jsfiddlelink/show link for a precise view.

JSFIDDLE

This displays a vertical tab using jQuery.

In this implementation, I utilized 

box-shadow: 2px 2px 2px 1px #888888;
, which prevented me from using border-right: 3px solid white when the tab is active.

I aim to merge the box shadow with the div as shown below:

The expected result should look like this..

Code:

    
                $(document).ready(function() {
                    ons.bootstrap();
                    $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
                });
            
 
                .ui-tabs.ui-tabs-vertical {
                    padding: 0;
                    width: 42em;
                    margin-left: 6%;
                }
                /* Other CSS styles */
            
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<!-- More script and link references -->
</ons-navigator>

EDIT:

This is my CSS snippet:

*, *:before, *:after {
    box-sizing: border-box;

Although I added box-sizing: none !important in #a,#b,#c CSS Style, it did not produce the desired result!

jqueryhtmlcss

Answer №1

It might not be the optimal solution, but it definitely does get the job done.

To enhance your tab, I included a white right border of 20px,

and then adjusted the z-index for your content panels with:

#a,#b,#c{
    z-index:50;    
}

And it worked like a charm.

Here is the modified fiddle:

check it out here

Snippet (view in full screen)

$(document).ready(function() {
  ons.bootstrap();
  $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
});
.ui-tabs.ui-tabs-vertical {
    padding: 0;
    width: 42em;
margin-left: 6%;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
    border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
    float: left;
    width: 10em;
    background: #F2F2F2;
    border-radius: 4px 0 0 4px;
   
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    margin: 0.2em 0;
    border: none;
    border-width: 1px 0 1px 1px;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    right: -2px;
    z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
    width: 100%;
    padding: 0.6em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
    cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
    padding-bottom: 0;
    width:200px;
    border-right:20px solid white;
    border-left: 4px solid #7fcc28;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
    margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
    float: left;
    width: 23em;
    border-left: none;
    border-radius: 0;
    position: relative;
    left: 10px;
top: 7px;
}
#a,#b,#c{
    z-index:50;
  box-sizing: none;
}

*, *:before, *:after {
    box-sizing: border-box;
    outline:0;
  }
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css">
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://onsen.io/OnsenUI/build/js/angular/angular.js"></script>
<script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<ons-navigator>
  <ons-page>

    <div style="min-height: 150px;"></div>
    <ons-list-item modifier="tappable" style="line-height: 500px; padding: 0 45px; background-color: #F2F2F2;">
      <ons-row>
        <div id="tabs" style="background-color: #F2F2F2;">

          <ul>
            <li style="box-shadow: 2px 2px 2px 1px #888888;">
              <a href="#a" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 1</a>
            </li>
            <li style="box-shadow: 2px 2px 2px 1px #888888;">
              <a href="#b" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 2</a>
            </li>
            <li style="box-shadow: 2px 2px 2px 1px #888888;">
              <a href="#c" style="font-style: Arial; font-size: 14px; color:#666666;">Vertical Tab 3</a>
            </li>
          </ul>


          <div id="a" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
            something writes here 1
          </div>
          <div id="b" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
            something writes here 2
          </div>
          <div id="c" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
            something writes here 3
          </div>

        </div>
      </ons-row>
    </ons-list-item>
  </ons-page>
</ons-navigator>

Updates

  • I have adjusted the width of your tabs to address this issue.

However, I must note that using * in your CSS is generally considered bad practice, mainly due to situations like this one.

Answer №2

To modify the tabs appearance, you may utilize the following code snippet:

   .ui-tabs.ui-tabs-vertical .ui-tabs-panel{left: 0;}/*adjusts the position of the panel*/

    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {/***custom styling for active tab*/
        border-left: 4px solid #7fcc28;
        box-shadow: -3px 1px 2px 1px #888888 !important; /*adds a shadow effect to the active tab*/
        margin-bottom: 0.2em;
        padding-bottom: 0;
    }

Answer №3

Is this something you're looking for? (Don't forget to view it in full page)

$(document).ready(function(){
    ons.bootstrap();
$('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
});
.ui-tabs.ui-tabs-vertical {
    padding: 0;
    width: 42em;
margin-left: 6%;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
    border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
    float: left;
    width: 10em;
    background: #F2F2F2;
    border-radius: 4px 0 0 4px;
   
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    margin: 0.2em 0;
    border: none;
    border-width: 1px 0 1px 1px;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    right: -0.8em; /*modified*/
    z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
    width: 100%;
    padding: 0.6em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
    cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
    padding-bottom: 0;
    border-left: .3em solid #7fcc28; /*modified px to em*/
    background: #fff;
    width: 9.7em; /*added*/
    z-index:7; /*added*/
    box-shadow:0px 5px 2px -2px #888888 !important; /*added, important is for override inline style*/
    
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
    margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
    float: left;
    width: 23em;
    border-left: none;
    border-radius: 0;
    position: relative;
    left: 10px;
top: 7px;
    z-index:5; /*added*/
}
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="http://onsen.io/OnsenUI/build/css/onsenui.css" rel="stylesheet"/>
<script src="http://onsen.io/OnsenUI/build/js/angular/angular.js"></script>
<script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<ons-navigator>
<ons-page>

<div style="min-height: 150px;"></div>
<ons-list-item modifier="tappable" style="line-height: 500px; padding: 0 45px; background-color: #F2F2F2;">
<ons-row>
<div id="tabs" style="background-color: #F2F2F2;">
  
<ul>
        <li style="box-shadow: 2px 2px 2px 1px #888888;">
            <a href="#a" style="font-style: Arial; font-size: 14px; color: #666666;" >Vertical Tab 1</a>
        </li>
        <li style="box-shadow: 2px 2px 2px 1px #888888;">
            <a href="#b" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 2</a>
        </li>
        <li style="box-shadow: 2px 2px 2px 1px #888888;">
            <a href="#c" style="font-style: Arial; font-size: 14px; color:#666666;">Vertical Tab 3</a>
        </li>
    </ul>


    <div id="a" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
        content goes here 1
    </div>
    <div id="b" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
               content goes here 2
    </div>
    <div id="c" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
              content goes here 3
    </div>

</div>
</ons-row>
</ons-list-item>
</ons-page>
</ons-navigator>

Answer №4

Your question lacks clarity in its wording. Are you referring to the text placement within the visible div? If so, you can reference the code on this pen.

$(function() {
  "use strict";

  var hl,
    newsList = $('.news-headlines'),
    newsListItems = $('.news-headlines li'),
    firstNewsItem = $('.news-headlines li:nth-child(1)'),
    newsPreview = $('.news-preview'),
    elCount = $('.news-headlines').children(':not(.highlight)').index(),
    vPadding = (parseInt(firstNewsItem.css('padding-top').replace('px', ''), 10)) +
    (parseInt(firstNewsItem.css('padding-bottom').replace('px', ''), 10)),
    vMargin = (parseInt(firstNewsItem.css('margin-top').replace('px', ''), 10)) +
    (parseInt(firstNewsItem.css('margin-bottom').replace('px', ''), 10)),
    cPadding = (parseInt($('.news-content').css...

(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();
</script>
Prefer a link.
.

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

Utilize AJAX to parse an HTML Table retrieved from an ASP page and extract targeted cell data

Within our work intranet, there exists an ASP page that retrieves data from a variety of sensors. This data is organized in a table format with multiple rows and columns. It struck me as interesting to showcase some of these outputs on our department&apos ...

javascriptasp.nethtmlajax

Smooth Div Scroll experiencing display issues

Trying to integrate the smooth div scroll, specifically the "Clickable Logo Parade" found at: Successfully implemented it on a blank page exactly as desired, but encountering issues when inserting it into the current layout. Could something be causing int ...

javascriptjqueryajax

Clicking in Javascript can hide the scroll and smoothly take you to the top of the page

For my website, I found this useful tool: It's been working great for me, but one issue I've encountered is that when I click on a picture using the tool, its opacity changes to 0 but the link remains in the same spot. I'm trying to figure ...

javascriptjqueryscroll

What is the purpose of having a boolean value if it is not going to be

I've noticed a pattern in several functions where the developer is returning a boolean value, despite it not being utilized: function getUserLoggedIn() { return true; } <a onclick="getUserLoggedIn();"><img src="/profile-image. ...

javascriptjquery

Execute the button click function repeatedly at specific time intervals using Javascript

I have a submit button on my page that uses the POST method to send a value. <button id="log" class="btn bg-purple" formmethod=post value="2" name="start" formaction=start_server.php>Get Log</button> Clicking this button retrieves a log file ...

javascriptphpjqueryhtml

How to retrieve the index of rows while inspecting the rows within a Bootstrap table using

Hello, I am attempting to retrieve the index of rows when I check a specific row in my BootstrapTable. I attempted to use the 'check.bs.table' event, but it does not seem to return the index! $('#gridModalListeDossiers').on('check. ...

jquerybootstrap-4

Enter the text div that has been chosen

I have a mini question regarding how to select text and place it in a selected div. This demo was created from codepen.io. In this demo, you will see a blue button and text in a textarea. I would like to be able to select the text "Select this text", cli ...

javascriptjqueryhtmlcss

Executing a YUI function via HTMLJSGlobal called is feasible

Recently, I stumbled upon the Dial example on the official YUI website and was thoroughly impressed. I managed to get the function working perfectly in a JS file, but now I am facing issues trying to call it within the HTML page with specific parameters su ...

htmlfunctionyui

Problem with Internet Explorer

There seems to be an issue with the center content on this website. In Internet Explorer, a few letters are getting cut off by the sidebar. I've tried adding some extra margin to the right, but it didn't solve the problem. It's happening on ...

cssinternet-explorerhtmlmargins

Pressing an ASP.NET submit button triggers a jQuery Ajax call for closing purposes

I am currently developing a webpage in asp.net that utilizes JQuery UI dialog. This dialog contains a submit button which, when clicked, closes the dialog. I am looking to incorporate a call to a Webmethod upon submission. If the method returns true, then ...

asp.netajaxjsonjquery

save the state of the store navigation panel when the toggler is clicked

I'm currently working on a Bootstrap website with a navigation panel located on the left side. There is a toggler for this navigation panel, <div class="sidebar-toggler"> </div> By clicking on the toggler, it hides the navigation pane an ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to display a button and text upon hovering over an image without using JQuery?

On my current WordPress project, I am faced with the task of creating a gallery that displays text and a button when users hover over an image. I have attempted to use a:hover but have only been able to make limited modifications. Can anyone provide guid ...

javascriptjqueryhtmlcsshover

Implement an innovative solution to automatically close the navbar component in tailwindcss on

I've been attempting to create a unique tailwind navbar component for React, but I've encountered issues when trying to make it close on scroll for mobile view. I found the initial code on this website. After that, I tried implementing the code ...

htmlcssreactjstailwind-css

Enhancing ASP.NET with jQuery for Efficient Ajax Requests

I have a textBox that uses jQuery to trigger an ajax request: <asp:TextBox ID="postcodeTextBox" runat="server" Text='<%# Bind("POSTAL_ZIP_CODE") %>'> $(document).ready(PageLoad); function PageLoad() { $(container + 'parent ...

asp.netjqueryajaxformview

Navigate through JSON data / adjacent data

Currently, I am iterating through a JSON object and generating a list of links. Check out the fiddle link: http://jsfiddle.net/jasonday/hzZ8j/ Each link is assigned an ID based on the storeID in the JSON data. My goal is to have a function that, when a ...

jqueryxmlajaxjson

unearth amplifyjs resource identity

I am currently working on implementing amplifyjs into my MVC4 application. The goal is to make a simple server call that returns JSON data. I was successful in setting this up in a separate sample project. Now, I am trying to integrate the same code into ...

javascriptjqueryamplifyjs

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Objective: Ensure that the radio buttons are mandatory. Challenge: The element mat-error and its content are being displayed immediately, even before the form is submitted. It should only show up when the user tries to submit the form. I attempted to use ...

htmlangulartypescriptangular-materialangular-reactive-forms

Difficulty arises when applying hover effects to animations using callbacks

Currently facing an issue with the hover event in jQuery. There are two side-by-side containers with hover events on both. When hovering, a div containing additional information slides up into view and slides back down when the hover ends. The concept is ...

javascriptjquery

Tips for validating a text box within a dynamically created HTML table (grid)

I am seeking assistance with validating the values in each text box within a dynamically generated HTML table (grid). Upon clicking the save button, I want to check all textbox controls and validate whether they contain a value or not. Any help on this mat ...

jqueryasp.net-mvc-3

Fade background position rollover effect

I'm facing a challenge with animating my background image using background positioning. The CSS is functioning correctly, but when I attempted to enhance it by adding jQuery for a rollover effect, the animation isn't working as expected. Can anyo ...

jquerycss