Positioning a Form with Sliding Out Effects Using CSS

Hello, I recently came across a tutorial online that helped me create a form slide effect on my website.

However, the issue I'm facing is that the form is positioned to the left and I would like it to be placed on the right instead.

For reference, here is the link to the demo.

Below is the code snippet from the tutorial:

.feedback {
  position: fixed;
  left: 0;
  bottom: 0;
}

.feedback a {
   display: block;
   height: 20px;
   width: 100px;
   text-align: center;
   background: red;
   border: 2px solid #fff;
   outline: 1px solid #a1a1a1;
   padding: 5px;
   float: left;
   cursor: pointer;
   color: #FFF;
   font-weight: bold;
   font-size: 18px;
}

I attempted to modify the code by changing the left:0 to right:0 and float:left to float:right.

Although this adjustment worked perfectly in Firefox, when testing it in Chrome, the form easily broke down and shifted far to the right...

If anyone could offer some assistance or advice, I would greatly appreciate it! Thank you!

Answer №1

Simply switch the left:0 to right:0 and it should work like a charm. I've tested this in Chrome using the example you provided.

.feedback {
    position: absolute;
    right: 0;
    bottom: 0;
}

UPDATE

I've found that the previous solution doesn't hold up when hiding and then attempting to show the form again. To fix this issue, make the following adjustments:

.feedback {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 482px;  /*modified*/
}

.feedback a {
    display: block;
    height: 20px;
    width: 100px;
    text-align: center;
    background: #F00;
    border: 2px solid #FFF;
    outline: 1px solid #A1A1A1;
    padding: 5px;
    float: right;   /*modified*/
    cursor: pointer;
    color: #FFF;
    font-weight: bold;
    font-size: 18px;
}

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

How to turn off validation for md-input-container in Angular 2

While working on a form in Angular 2, I encountered an issue when adding the required attribute to my <input>. The problem resulted in unwanted margins as shown in this image: https://i.sstatic.net/W6JSF.png I am seeking a solution to only apply the ...

Issues with unresponsive links (HTML5/CSS)

As a beginner, I've encountered an issue where my previously working links are no longer functioning. Can anyone help identify what could be going wrong? Below is the HTML code: <!doctype html> <html> <head> <meta charset="UTF-8 ...

Having excessive space within an H1 heading

Having an issue with a PHP file on my test server that is displaying extra white space, which is highlighted by a red box. This whitespace is also shown in the developer tools view. When the file is outputted, all of the content appears on one line. Code: ...

Ajax using JQuery received a 200 status code, but did not register as a 'success'

I am attempting to utilize AJAX in order to send a query to Google Books and showcase the results on my website. My approach involves using JQuery to dispatch the request and manage the response, as demonstrated below: var userQuery = [gathered input from ...

JavaScript AJAX functions work well when using jQuery, but they may not function properly

Here is the code snippet I am working with: Controller Section def some_method respond_to do |format| format.js { render js: "alert();" } end end JavaScript Section The code above triggers an alert(); jQuery.ajax({ url: url }); However, the ...

Develop a form containing a date input in a special character-free format, along with a validation feature

I am looking to design a form that necessitates users to input a date in the following format: "ddmmyyyy". No slashes, dots, or any other special characters should be included. Only entries matching this specific format will be accepted as valid, any other ...

Can someone please tell me the specific HTML entity that Flickr uses for the arrow icons in the action menu?

When viewing an image on FLickr () and clicking on the Actions menu button, a pop-up menu with an arrow icon appears. Interestingly, this icon is not a simple image, but rather a combination of two characters (◢◣). Has anyone been able to determine th ...

delete local ios css style datetime input

I am facing an issue with the new ios 16 version in Safari where input time and input datetime are being displayed incorrectly. Is there a way to fix this problem? I have tried using -webkit-appearance: none; but it did not work. https://i.sstatic.net/em ...

What is the best way to create an HTML template with a table where the first column is divided into four cells and the second column only has one

Currently, I am working on a template using HTML and CSS. One issue that I am facing involves designing a table template with HTML and CSS. The specific problem occurs in the second row of the table where there are 4 cells in the first column and only one ...

Having difficulty sending ajax to the controller function

Currently, I am facing an issue with updating my database using AJAX in Laravel. The goal is to change the value in the enable column from 1 to 0 when a toggle button is clicked. Below script is included in the view: $(".toggle-btn").change(function() { ...

Is there a way to organize and streamline my repeated jQuery code by placing it within a subroutine or function

Being new to jQuery, I successfully created my first program using it. This program consists of hyperlinks on an image where clicking a word triggers jQuery code that changes the page's appearance and calls an Ajax routine for searching and displaying ...

Challenges with the direction of Telerik's GridNumericColumn

Currently, I have implemented a telerik RadGrid with the direction set to RTL. Within this grid, there is a telerik GridNumericColumn which is causing an issue. The problem lies in the way it displays numbers: 500- instead of -500 I am seeking adv ...

Ways to ensure that a jQuery function does not run until another one has finished

My JQuery functions are as follows: First Function $(function(){ $(".staffDiv div").hide(); $(".staffDiv img").hover(function(){ $(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast"); $(this) ...

A dysfunctional JS object

I am grappling with a rather intricate object and have simplified it by removing unnecessary functions. However, I am facing an issue when I try to initialize it and I can't figure out the reason behind it. Safari is throwing this error at me: [Error] ...

Why does Chrome DevTools evaluate JavaScript before recalculating styles?

According to an article, CSS is considered render-blocking, so JavaScript will evaluate after constructing a CSSOM (also known as recalculating styles in dev tools). However, it appears in Chrome dev tools that JavaScript is evaluated before CSSOM. Why is ...

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

React not displaying images with relative paths

In the past, I used to import images in React like this: import person from '../images/image1.png' And then use them in my code like this: <img src={person} alt="" /> Now, for some reason, I want to directly specify the image pa ...

CSS: Handling Background Images Responsively

I'm experiencing an unusual issue where the image is not appearing, even though the div box shows up when I highlight elements on the page. Validation and inspection also show no issues. Here is the code: <div class="mainImage"></div> A ...

Schedule Master: A sophisticated tool for time management

I have been following the instructions to implement a date time picker from this tutorial. I downloaded the necessary js and css files and placed them in the respective directories. However, when I click on the calendar icon, the calendar does not pop up. ...

Having trouble finding the correct route using an ajax request

Having trouble finding the correct route through an ajax call In my view, I have 2 HTML buttons that are generated using PHP <?php if ($comment_exist == null): ?> <p><input type ="button" id = "sb" value="I Comment"></p> &l ...