When the direction is right-to-left (rtl), the floating labels in Bootstrap slide towards the center

Seeking to implement floating labels in Hebrew using bootstrap v5.2, I encountered a challenge. When switching the direction to rtl and clicking on the input box, the label slides towards the center.

Here is my code snippet:

<div class="form-floating mb-3" dir="rtl">
        <input class="form-control" id="title" placeholder="כותרת"></input>
        <label for="title">כותרת</label>
    </div>

Upon clicking, you can observe the text shifting towards the center instead of staying aligned to the right

I attempted to only switch the direction back to ltr in the label, which did resolve the issue, however, it did not provide an aesthetically pleasing look with Hebrew (as it sticks to the left side of the box).

htmlcssbootstrap-5direction

Answer №1

To enhance the design, you can add a custom class and apply the following CSS styles:

<style>
    .custom-style>label {
        top: 0;
        right: 0;
        transform-origin: 100% 0;
        transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    }
    .custom-style>.form-control-plaintext~label, .custom-style>.form-control:focus~label, .custom-style>.form-control:not(:placeholder-shown)~label, .custom-style>.form-select~label {
        opacity: .65;
        transform: scale(.85) translateY(-0.5rem) translateX(-0.15rem);
    }
</style>

<div class="form-floating mb-3 custom-style" dir="rtl">
    <input class="form-control" id="title" placeholder="Title"></input>
    <label for="title">Title</label>
</div>

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

"Owlcarousel Slider: A beautiful way to showcase

Currently, I am working on a project that involves implementing a slider. Since I lack expertise in JavaScript, I opted to use a plugin called owlcarousel. The challenge I'm encountering relates to the sizing of the container for the items. I'm ...

javascriptjqueryhtmlcssowl-carousel

Ways to conceal CSS on the page when triggering a different element

I am trying to achieve the functionality of hiding the black arrow when clicking on the green arrow, all without using jQuery. Here is my fiddle: http://jsfiddle.net/t5Nf8/195/ html: <div class="arrow-down"></div> <div class="arrow-up"> ...

javascriptcss

How can I align text to the bottom right and left corners at the same time?

Is there a way to align text so that it appears in both the bottom right and bottom left corners of the page, functioning as a footer? For example: JANUARY (bottom left corner) / 2019 (bottom right corner) If anyone knows how to achieve this using HTML ...

htmlcsssticky-footertext-alignment

Creating a unique layout with Bootstrap 5: Custom column heights and dynamic responsive positioning

I've been working on creating a specific layout: My goal is to have the blue column move under the red column when the page size is reduced. No matter what I attempt, the red box keeps trying to match the height of the blue box. Check out my code h ...

bootstrap-5

Implement a fullscreen hero image on a specific blogroll template page in Wordpress

My portfolio website uses custom page templates for each page. The blog page is not the landing page, but an interior page. I have been able to add a custom hero image to every page template except for the blog page. Currently, I am using the content.php p ...

phphtmlwordpressfullscreenblogs

How to Incorporate Multiple React Components in an HTML File

Attempting to integrate React code into an HTML file has been a challenging process for me. I've been following the official React documentation and successfully implemented their basic like button starter code on my page. Initially, everything worked ...

htmlreactjsjsx

What is the best way to declare media queries for resolutions both above and below 1366?

Is it possible to define different CSS files based on screen resolution in HTML? For example, one file for screens with width of 1366px or lower and another for higher resolutions. Could you kindly provide me with the correct HTML code for this? ...

htmlcssmedia-queries

Click to add a different template into the document

My HTML page consists of a form with multiple input fields and a carousel. Towards the bottom of the form, there is a button labeled Add another quote. This button essentially duplicates the input fields above (all contained within class="quote"). Here&ap ...

javascriptjqueryhtmlangularjsangularjs-directive

Automatically updating markers on Google Maps v3

I'm utilizing the capabilities of Google Maps V3 to showcase various pins. My goal is to update these markers periodically without interfering with the current location or zoom level on the map. I aim for the markers to refresh every x seconds. How c ...

jqueryhtmlajax

applying a blur effect to the Vue modal mask

Trying to incorporate a blur panel behind my modal using vue.js, however, The issue arises when the modal-mask contains nested content. This makes it challenging to apply the filter: blur() property without blurring everything. Currently, I am only able t ...

htmlcssvue.js

How can I dynamically populate a select menu in HTML without the need to submit any data

Looking for help with an input form in HTML that uses a combination of input and select boxes. My goal is to dynamically populate a select menu based on the data entered into the input boxes. For example: Employee One: Jim Employee Two: John Employee Thre ...

javascriptphphtml

How to present retrieved data with spaces or line breaks in PHP

I need help on how to display data with spaces or line breaks. Currently, I am using textarea for the news content when adding and editing, and the data type for my news content is text. This is how I want the content to be displayed: https://i.sstatic.ne ...

phphtmlcss

Extracting HTML element from PHP string and placing it in a different page

In a PHP string, there is an HTML structure including a table within it: <html> <head> <!-- not much going on here --> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="10 ...

javascriptphpjqueryhtml

Finding the nearest span value upon clicking through a specific class

Whenever a user clicks on a hyperlink, my goal is to locate the nearest span element with a specific class and retrieve the text within that class. As of now, it is only returning blank text: Here is the provided HTML code snippet: <div class="plan re ...

javascriptjqueryhtmlonclickclosest

Pixelated Arial font display issue on WordPress

After learning about how Chrome renders fonts and the differences among other browsers, I encountered an interesting scenario. I have two files: one is a WordPress page where the font in the header appears pixelated, and the other is a static HTML page wit ...

cssfont-family

Bootstrap Table with Numerous Rows and Columns

I am striving to create a table layout similar to the one shown in the image using bootstrap 5. https://i.sstatic.net/lEnYX.png My attempt so far looks like this <table class="table table-bordered"> <thead> <tr> ...

htmlcssbootstrap-5

I am trying to update the content in ckeditor when a different option is selected, but for some reason it is not working

jquery issue: the jquery that I added and the content doesn't change even though the "alert(model);" works fine <script> $(document).ready(function() { $("select.modele").change(function() { var modele = $(this) ...

javascripthtmljquerylaravelselect

Can the :after pseudo-element be modified when hovering, except when hovering over the after element itself?

Currently, my CSS code looks like this: class-name:hover:after {} Although it works well, the hover effect triggers even when hovering over the after portion of the element. Is there a way to modify the code so that the :hover only applies when hovering ...

csshover

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed. Currently, it appears like this: As you can see, the links are centered, but not the search bar. This is the existing HTML structure: <!-- Navigation Bar Start --> <div class ...

htmlcsstwitter-bootstrapnavigation

attempting to eliminate on-screen buttons by hovering over the video

Is there a way to make my video play on loop like a GIF without the controls ever showing? I want it to have a seamless playback experience. Any ideas would be appreciated. P.s. Don't worry about any StackOverflow errors when running the snippet. Than ...

javascripthtmlcss