Issue with Foundation4 Dropdown Persisting Despite Different Behavior Between Two CSS Files

My project involves having two CSS files, both compiled from SASS, that cater to right-to-left (RTL) and left-to-right (LTR) designs. Additionally, there are two separate HTML files, each referencing the corresponding CSS file:

RTL:

<link rel="stylesheet" href="/css/ltr/app.css" />

LTR:

<link rel="stylesheet" href="/css/rtl/app.css" />

In both HTML files, the dropdown is represented in the same way:

<a href="#" data-dropdown="some-dropdown" class="tiny content radius button dropdown">

The issue arises when using the LTR CSS file - the dropdown remains open no matter where I click. However, this problem does not occur with the RTL CSS file.

Does anyone have any ideas on how to fix this?

Thank you,

Dana

htmlcsssasszurb-foundation

Answer №1

It appears the problem was related to a Foundation Dropdown issue.

To resolve it, I included the code snippet below in the foundation.js file (replacing Foundation.rtl = true;):

if (document.documentElement.dir == 'rtl'){Foundation.rtl = true;}
else{Foundation.rtl = false;}

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

Conceal or reveal radio buttons according to information in a table

How can I dynamically add and remove values from a table based on radio button selections? My goal is to add the selected value to the table and hide it from the radio button list, and if the value is deleted from the table, I want to show it back in the r ...

javascriptjquerycssasp.netasp.net-mvc

Angular: Generating components dynamically in HTML is unsuccessful

I possess the capability to dynamically generate components: import { Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; import { FilterComponent } from '../filter ...

htmlcssangulartypescript

The file or directory does not exist: 'G:Aframara Websiteimages' - ENOENT

Currently, I'm in the process of cleaning up the unused CSS in my website's style.css and bootstrap.min.css files during development. I am utilizing PostCSS and Parcel for this task. After installing PostCSS and Parcel, I proceeded to create a p ...

htmlcssnpmpostcssparceljs

The element 'mat-slide-toggle' is unrecognized following the import

I'm currently facing an issue with using <mat-slide-toggle>Click me!</mat-slide-toggle> in a component that already has the MatSlideToggleModule imported. Strangely, I'm still encountering an error stating that it's not a recogni ...

htmlangularangular-materialslidetoggle

The hover effect does not carry over to duplicated HTML

I successfully added a node, but I forgot to include the hover function of the node in my application. The hover function is not necessary, and I need it to work with ie8 compatibility. Here's my HTML: <div id="appendCell" style="color:green; colo ...

javascriptjqueryhtmlcss

AngularJS button click not redirecting properly with $location.path

When I click a button in my HTML file named `my.html`, I want to redirect the user to `about.html`. However, when I try using `$location.path("\about")` inside the controller, nothing happens and only my current page is displayed without loading `abou ...

javascripthtmlangularjsnode.js

Compel the system to handle the file as if it were an

I am currently showcasing programming files on a website in plain, raw text format. I have now decided to implement syntax highlighting using HTML. While it has enhanced the appearance and functionality of the files, there is one issue - I need to create a ...

html

What is the best way to make AngularJS acknowledge invalid input that has already been identified by the browser?

Encountering an issue (specifically in Chrome) where a number input is deemed invalid by the browser, but valid as per Angular. <form name="form_name"> <input type="number" step="any" id="a_number" name="a_number" min="0" ng:model="aN ...

javascripthtmlangularjsvalidation

Tips for creating rounded corners on an image within a bordered padding using CSS

When it comes to rounding the corners of images in CSS using border-radius, I encounter an issue. I have a border around some images with 5px of padding between the image and border. Using border-radius rounds the border, but not the image inside it. Is th ...

htmlcssimagestyling

Steps to create a toggle feature for the FAQ accordion

I am currently working on creating an interactive FAQ accordion with specific features in mind: 1- Only one question and answer visible at a time (I have achieved this) 2- When toggling the open question, it should close automatically (having trouble with ...

javascripthtmlcss

Guide on retrieving inline style that has been overridden by CSS using JavaScript

<div style="background: url(http://www.example.com/image.jpg) center center/cover;"> This specific background image defined inline is being replaced by a rule in an external stylesheet: div { background-image: none !important; } Here's my q ...

javascriptjqueryhtmlcss

`How can the background color be altered based on specific conditions?`

I am attempting to modify the background color. My goal is to change every odd result to a light green (#f0f5f5) to avoid a large white space when the result ends in an even number. I would also like to change the background color of the pagination section ...

javascripthtmlcss

Set the background color of the container row to extend the full width, encompassing

I am working on a grid container and I want to change the background color of the second row within it. Check out my Fiddle This is the HTML markup: <div class="totalContainer totalContainer__space"> <div class="totalContainer__ ...

htmlcss

Utilize CSS to eliminate gaps between spans

I can't figure out how to remove the vertical spacing between these two spans. Any help would be greatly appreciated. The issue I'm facing is the large gap between these two spans: <span class="twentyeight nomargin threshold_green">6</ ...

htmlcssstylesheet

utilize the flex index.html layout

Upon reviewing the template, I noticed that there is code implemented to check if the client has the necessary version. This code performs certain actions based on whether or not the required version is available. Additionally, there seems to be an <obj ...

javascripthtmlapache-flextemplates

Implementing slideDown() functionality to bootstrap 4 card-body with jQuery: A step-by-step guide

Here is the unique HTML code I created for the card section: <div class="row"> <% products.forEach(function(product){ %> <div class="col-lg-3 col-md-4"> <div class="card mb-4 shadow "> &l ...

javascripthtmljquerynode.jsexpress

Is it possible for a dropdown to span 100% of the width

http://jsfiddle.net/gL1xynzr/ Is there a way to style a dropdown menu with the following properties: width: 100%; max-width: 440px; I am planning to include 4 of these dropdowns in one CSS table row to ensure they fit horizontally on mobile phone portra ...

csshtmlsemantic-ui

What could be causing PostgreSQL to remove HTML entities when using ts_headline()?

In the process of developing a prototype for a full-text search capability, I am working on returning the "headlines" of found documents in the search results. Here is an adapted example from the Postgres documentation: SELECT ts_headline('english&ap ...

htmlpostgresqlpostgresql-9.5

Achieving Vertical Stacking and Responsive Scaling for Row and Column Containers on Mobile View Using HTML, CSS, and Bootstrap 4

Utilizing the Bootstrap grid system to organize text boxes in a 2 by 2 layout on a webpage. The desktop view displays the content in rows and columns effectively, but it would be beneficial to have an easy way to adjust the width. However, the problem ari ...

htmlcssbootstrap-4

The Parent Div is styled with a background color, and I would like the sub div to inherit the background from whatever is behind the

I have a website at . When you click on a blue tab (except the middle left one), a larger tab appears with two Divs inside. What I am trying to achieve is having the sub divs show what's behind the green Div, especially while it's in motion. This ...

htmlcssbackgroundtransparency