Issues with Twitter Bootstrap Tabs not functioning correctly on Ruby on Rails with HAML

I am facing an issue with twitter bootstrap tabs in my (HAML) ruby on rails project. Although the tabs are appearing, the content does not change when I click on different tabs. Additionally, some unexpected statements are showing up at the bottom of the first tab's content on the webpage: - Howdy, I'm in Updates. - Howdy, I'm in Sponsors. - Howdy, I'm in Comments.

The snippet below displays where the tab content is listed:

Thank you for your assistance!

.row#main-content{style:"background-color: white;margin-bottom:40px;"}
  .span8#content-left
      .tabbable
          %ul.nav.nav-tabs
              %li.active
                  = link_to "About", "#tab1", "data-toggle"=>"tab"
              %li
                  = link_to "Updates", "#tab2", "data-toggle"=>"tab"
              %li
                  = link_to "Backerss", "#tab3", "data-toggle"=>"tab"
              %li
                  = link_to "Comments", "#tab4", "data-toggle"=>"tab"

          .tab-content
              .tab-pane.active{id: "tab1"}            
                  
                  // Content for tab 1 here

              .tab-pane{id: "tab2"}
                  %p Howdy, I'm in Campaigns.

              .tab-pane{id: "tab3"}
                  %p Howdy, I'm in Campaign Donations.

              .tab-pane{id: "tab4"}
                  %p Howdy, I'm in Personal Donations.
htmlcssruby-on-railstwitter-bootstraphaml

Answer №1

To ensure the tabs are functioning properly, the .tab-pane must be on the same level, which is not the case in your current setup.

Please refer to the official documentation for more information.

Your markup should resemble the following structure:

.tab-content
  #tab1.tab-pane.active
    //content for #tab1 goes here. 
  #tab2.tab-pane 
    //content for #tab2 goes here. 
  #tab3.tab-pane 
    //content for #tab3 goes here. 
  #tab4.tab-pane 
    //content for #tab4 goes here.

In your provided code snippet:

.tab-content
  .tab-pane.active{ :id: "tab1"}
    = image_tag("content1.png")

.row-fluid#content-left-second-row

The 

.row-fluid#content-left-second-row
element is outside of the tab-content area along with other content. This is why the tabs are not working correctly since tab-content only has one .tab-pane.

You should move all the code between .tab-pane#tab1 and .tab-pane#tab2 inside tab1 like so:

.tab-content
  .tab-pane.active{ :id => "tab1"}
    = image_tag("content1.png")

    .row-fluid#content-left-second-row
      ...
    .row.hr-row
      %hr.hr-row
    .row-fluid#content-left-third-row
       ...    
    .row-fluid#content-left-fourth-row
       ...
  .tab-pane{:id =>  "tab2"}
    %p Howdy, I'm in Updates.
  .tab-pane{:id =>  "tab3"}
    %p Howdy, I'm in Sponsors.
  .tab-pane{:id =>  "tab4"}
    %p Howdy, I'm in Comments.

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

What's the best way to use Flexbox to center a component with a "fixed width"?

As I work on my component, here is the code snippet from my highest parent, App.component: app.component.html <div class="wrapper_flex"> <div style="width:400px; background-color: pink;"></div> <div style=& ...

htmlcssangularflexbox

Prerender is running independently of the dynamic page title and meta tags rendering process

As part of a POC, I was integrating prerender.io with an angular-node application for SEO purposes. My application can be found HERE. The good news is that all three links are being crawled successfully, as confirmed by receiving a 200 OK status for all li ...

javascripthtmlangularjsseoprerender

Optimizing website layout for mobile devices

I have a website with a fixed page layout at . It displays properly on desktop browsers but not on mobile devices. The website is adjusting to fit the browser size, but some components are changing format. Can anyone offer assistance? Thank you! ...

htmlcssfixed-widthpage-layout

Sneaky footer paired with a side panel

Trying to incorporate a sticky footer within the content area of a page that includes a full-height sidebar. Here is a preview of the page I'm currently working on: I have experience using in the past with success, utilizing methods involving percen ...

htmlcss

What methods can be used to control access to document.styleSheets data, and what is the purpose behind doing so?

Recently, I came across the document.styleSheets API, which allows you to access stylesheets used by a website. Using this API is simple, for example, document.styleSheets[0].cssRules will provide all CSS rules for the first stylesheet on a page. When I t ...

javascriptcss

Increase the line spacing within paragraphs by eliminating the extra space at the top and bottom

Trying to adjust line height in a paragraph using CSS. Here is the HTML: <div> <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu au ...

htmlcss

Stripping CSS from my HTML using TinyMCE

I have created a custom Javascript function that retrieves the content of an HTML file from my server and then integrates it into a TinyMCE editor. Here is the function: function LoadTemplate(url) { $.post(url, function (data) { // Access the ...

phpjavascriptjqueryhtmltinymce

When I utilize $router.push() to navigate to a different page, the back button will take me back to the previous page

Within my Vue project, there is an HTML page that I am working on. Here is the link to the page: https://i.sstatic.net/cbtqM.png Whenever I click on the "+"" button, it redirects me to this specific page: https://i.sstatic.net/0rmMD.png This page funct ...

javascripthtmlvue.js

Accessing PHP parameters in JSP files can be accomplished by utilizing specific

The PHP code snippet below checks for a username and password match before redirecting to a JSP page. if($userName==$dbUserName&&md5($passWord)==$dbPassWord){ echo "<input name='username' type='hidden' value='$userN ...

phphtmljsp

Unusual behavior being exhibited by the background in an HTML5 canvas

I have an 800 by 100 image for the background and I'm trying to extract sections from it (like a sprite sheet) in order to create a background. I believe this method is efficient and allows me to experiment and learn how to generate backgrounds in the ...

javascripthtmlanimationhtml5-canvas

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

htmlcss

What is the reason for the absence of a shorthand property in CSS that combines width and height measurements?

Have you ever thought about using a shorter property for specifying an item's width and height in CSS? Currently, we have to write: selector {width: 100px; height: 250px;} While this is already pretty fast, wouldn't it be even quicker if we c ...

cssheightwidthshorthand

TinyMCE toolbar missing the "hr" option

I am encountering an issue while using TinyMCE as my editor. I have added the plugin as instructed, but I cannot find the "hr" button/option in the editor interface. If anyone has any insights or solutions to this problem, please share! This is how I am ...

javascriptjqueryhtmltinymcetext-editor

Vue.js in combination with Ruby and Webpacker is failing to render the view

I have successfully set up Webpacker, Rails and Vuejs to work together. Despite not encountering any errors in the console or logs, I am facing a minor issue that I cannot seem to pinpoint. When I start both the Vue server and Rails server, I can see outpu ...

ruby-on-railswebpackvue.js

Instead of using <div>, try substituting it with a different HTML page

Seeking assistance on an HTML page project that involves jQuery, CSS, and HTML without server-side integration. Encountering an issue when attempting to replace a <div> with content from another HTML file saved on my computer. The main page code sni ...

javascriptjqueryhtmlajaxweb

What is the process of adding background color to text?

Is there a more efficient way to style this text without relying on the span tag? I am looking to add a background color to my text. Code: .subject { color: gold; background: gray; } <h2>Some Subjects</h2> <ol> <li style="bac ...

htmlcss

Randomly positioning an image while the page is loading

I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue. My goal is to have the images load in random positions and then make them draggable using Dragabilly. However, sometimes all the images end ...

javascriptjqueryhtmlcsscoffeescript

jQuery can be used to mask phone numbers with three input fields

I am looking to implement phone field masking using jQuery or JavaScript. I have tried a few jQuery mask plugins, but I am still searching for a better solution. Specifically, I need three input fields for the USA (it is a requirement). The inputs needed ...

javascriptjqueryhtmlinputmasking

Obtaining numerous data points in a multi-select element within HTML

Struggling with determining the values of multiple <select> tags in an HTML file simultaneously? function knowAllValues(){ var color_element = document.getElementById("color"); var size_element = document.getElementById("size"); ...

javascriptjqueryhtml

What is the procedure for injecting CSS with user origin in a browser extension?

I need assistance with a basic browser extension that involves injecting CSS: { "manifest_version": 2, "name": "User Style Sheet Workaround", "version": "1", "content_scripts": [ { ...

cssgoogle-chrome-extensioncss-cascade