The alignment of text in the flex column is incorrect on the right side

The flex column I created is having an issue with the arrow on the right side. It's not displaying properly and is hidden. The arrow should be similar to the one on the left and point to the left direction.

I have used left: 0; for the left side and right: 0; for the right side, but for some reason, the right side arrow is not functioning correctly.

For more details, you can view the code snippet and example on https://jsfiddle.net/wa04ytLn/2/

.row {
  background: #f8f9fa;
  margin: 50px 0 0 0;
}

.col {
  border: solid 1px #6c757d;
  padding-top: 200px;
}

#arleft {
  width: 5px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 100%;
  cursor: pointer;
}

#arright {
  width: 5px;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  height: 100%;
  cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <div id="cleft" class="col-3 col-xs-12 bg-info">
    collapse left
  </div>
  <div id="cmid" class="col col-xs-12">
    <div class="d-none d-md-flex" id="arleft">
      <i class="fa fa-arrow-right" aria-hidden="true"></i>
    </div>
    <div class="d-none d-md-flex" id="arright">
      <i class="fa fa-arrow-left" aria-hidden="true"></i>
    </div>
  </div>
  <div id="cright" class="col-3 col-xs-12 bg-info">
    collapse right
  </div>
</div>
htmlcssbootstrap-4flexbox

Answer №1

By adding the "right:0" style, the red line is positioned on the right side of the div. Removing this code allows us to observe the changes that occur.

https://i.sstatic.net/bX6fu.png

Notice how the arrow is positioned similarly to the left red line. To have the column start from the right, you can utilize "flex-direction: row-reverse;"

Implementing this will give you the desired outcome.

<div class="row">
  <div id="cleft" class="col-3 col-xs-12 bg-info">
    collapse left
  </div>
  <div id="cmid" class="col col-xs-12">
    <div class="d-none d-md-flex" id="arleft">
      <i class="fa fa-arrow-right" aria-hidden="true"></i>
    </div>
    <div class="d-none d-md-flex" id="arright">
      <i class="fa fa-arrow-left" aria-hidden="true"></i>
    </div>
  </div>
  <div id="cright" class="col-3 col-xs-12 bg-info">
    collapse right
  </div>
</div>

__

.row {
  background: #f8f9fa;
  margin: 50px 0 0 0;
}

.col {
  border: solid 1px #6c757d;
  padding-top: 200px;
}

#arleft {
  width: 5px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 100%;
  cursor: pointer;
  align-items: flex-end;
}

#arright {
  width: 5px;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  height: 100%;
  cursor: pointer;
  align-items: flex-end;
  flex-direction: row-reverse;
}

Access the jsFiddle link here: https://jsfiddle.net/bzry4Ltg/

Answer №2

Consider using the CSS property row-reverse

To achieve the desired effect, insert the following code into your existing CSS stylesheet:

#arright {
  width: 5px;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  height: 100%;
  cursor: pointer;
  align-items: flex-end;

  /* apply row-reverse */
  flex-direction: row-reverse;
}

Answer №3

Have you attempted to include the specified css to the right arrow?

.fa-arrow-left {
  position: absolute;
  right: 0;
}

Reference - https://jsfiddle.net/poq39scd/

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

Trouble with updating scope values in the view within IONIC 1 and AngularJS

I recently implemented a feature to save the two most recent login details. The functionality works correctly, but I'm facing an issue where my view only updates upon refresh even though the scope values are being updated. I've tried using $scop ...

htmlangularjsionic-frameworkscope

Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one. Check out my code snippet below: $( document ).ready(function() { $( ".faq-question" ).click(function() { $(this).toggleClass('open'); $(this ...

javascriptjqueryhtmlcss

Add rows to the table dynamically and then execute the script

My table dynamically creates rows when a button is clicked, and there is an input box with an auto suggest script. The auto complete works fine on the default first box, but not on the dynamically added row. How can I make the auto complete script work o ...

javascriptjqueryhtml

When text is added to div elements, they are mysteriously pushed downward. This strange phenomenon occurs with inline-block elements

Why does the first element get pushed down when its child contains text? What causes inline-block to behave this way? Is there a way to align divs side-by-side while still allowing them to have children? For example, I want the grey box to contain a list ...

htmlcss

The mobile navigation bar may not display correctly on certain iPhones and iPads

Currently using a custom theme on Prestashop 1.6 where minor changes have been made to the CSS file, focusing mostly on colors and fonts. Interestingly, the mobile menu functions flawlessly on Android devices that were tested. However, some Apple devices s ...

cssiphoneipadmenuprestashop

None of the angular directives are functioning properly in this code. The function attached to the submit button is not executing as expected

I've experimented with various Angular directives in this code, but none seem to be functioning properly. I'm wondering if a library file is missing or if there's some issue within the code itself, potentially related to the jQuery file. The ...

javascriptjqueryhtmlcssangularjs

There seems to be an issue with the functionality of the Bootstrap Modal

I've been working on incorporating bootstrap login Modal functionality into my code, but for some reason, the screen is not displaying it. Here's what shows up on the screen: https://i.sstatic.net/UIU2w.png The red box in the image indicates whe ...

javascripthtmlcssbootstrap-4

Background image loading gets delayed causing it to flicker

Instead of having separate files for different elements on my site, I decided to keep all the JavaScript in one large file called my_scripts.js. To speed up loading times, I defer the loading of this file using inline JavaScript and make sure it is the las ...

javascripthtmlcss

Overflow - conceal the scrollbar and prevent scrolling without cutting off the element

Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...

htmlcssoverflow

Exploring etoro data through python web scraping

Attempting to automate the process of logging into my etoro account and extracting data from my portfolio using Selenium. Currently working on Google Colab, here is what I have so far: from selenium import webdriver options = webdriver.ChromeOptions() opt ...

pythoncssseleniumweb-scrapingfinance

When the window is resized, the text and images become jumbled and distorted

As a beginner in CSS, I am encountering an issue where the text and images on my website get distorted when I resize the window. How can I resolve this? HTML <img src="images\titles_03.jpg" class="tt1" > <img src="images\titles_05.jpg ...

htmlcss

Discover the secret to creating a seamless looping effect on text using CSS gradients, giving the illusion of an endless loop

Could use some assistance with looping this gradient smoothly over the text without any annoying jumps appearing during the animation. Is there a way to achieve a seamless movement across the text? Any suggestions on how to approach this? Here is a liv ...

htmlcss

Guide on how to organize a list into three columns using a single ul tag

Is there a way to split a ul list into 3 columns using CSS? This is how my HTML structure looks like: <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li> ...

htmlcssfrontend

What is the process for adding a line of JavaScript directly into the code (instead of using an external .js file)?

I am trying to insert a script tag that will run one line of JavaScript directly into the head of a document instead of inserting an empty script tag with a src attribute. So far, I have the following code: <script type="text/javascript"> var script ...

javascripthtmldom

Password confirmation on the login screen will be displayed in a single line

As someone who is relatively new to HTML/CSS, most of what I have learned has come from this platform or by searching for answers online. I am nearing completion of my assignment, but I am struggling to figure out how to display two label words on the same ...

htmlcssauthenticationlabelscreen

Running a JavaScript function within a designated div element

I'm currently facing an issue with executing a javascript function - onload only in a specific div. I seem to be stuck on this problem, so if anyone could offer some assistance, I would greatly appreciate it. Thank you very much in advance! functio ...

javascriptjqueryhtml

What is the best way to use CSS to hyphenate a capitalized word?

I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...

htmlcssreactjsfirefoxcss-hyphens

Remove the outline on a particular input and retain only its border

Even after trying to use "outline: 0", nothing seems to change. #input_field { outline: 0; width: fit-content; margin: auto; margin-top: 20%; border-radius: 30px; border: 2px solid turquoise; padding: 6px; } <div id="input_field"> ...

htmlcssoutline

Problem with escaping special characters in random string HTML

As I was in the process of creating a JavaScript tool to generate random strings, with or without special characters, I stumbled upon an inspiring snippet that caught my attention: (): function randStr(len) { let s = ''; while (len--) s += ...

javascripthtmlrandomescaping

Learn how to dynamically incorporate multiple Bootstrap collapse elements in PHP

I've encountered an issue with my code that contains both HTML and PHP. The problem arises when there are multiple elements in a collapse, as only the first element works properly. This is due to the fact that each element has the same id named "colla ...

javascriptphpcsstwitter-bootstrap