Eliminate the horizontal scrollbar

I am currently working on enhancing the appearance of this HTML form using CSS.

Although I have made progress, I am facing an issue with an unexpected horizontal scrollbar that I cannot seem to remove.

To address the layout problem of having 2 columns, I opted to place the form in an iFrame within Wix and adjust the width to display the fields vertically. However, increasing the widths results in the persistent presence of the scrollbar.

If anyone can provide assistance with this matter, it would be greatly appreciated! The code is provided below for reference.

The current appearance can be viewed here: Screenshot

<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">

<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: Please add the following <FORM> element to your page.             -->
<!--  ----------------------------------------------------------------------  -->
<style>
    /*.inpcls{
        border-radius: 0;
        font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: rgba(255, 255, 255, 0.95);
        box-sizing: border-box !important;
        color: #000000;
        border: 2px solid rgba(145, 145, 145, 1);
        padding: 3px;
        margin: 0;
        max-width: 100%;
        min-width: 100%;
        min-height: 100%;
        text-overflow: ellipsis;
    }*/
    .inplft{
        padding-left: 14px;
        font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
    }
    .inprht{
        padding-right: 0px;
        font: normal normal normal px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
    }
    .div1{
        /*left: 119px;*/
        width: 350px;
        position: absolute;
        /*top: 264px;*/
        /*height: 379px;*/
    }
    .d2{
            /*left: 58px;*/
        position: absolute;
        /*top: 23px;*/
        height: 42px;
        width: 30px;
    }
    .mrglft{
       margin-left: -%;
    }
    .a{
        border-radius: 0;
        font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: rgba(255, 255, 255, 0.95);
        box-sizing: border-box !important;
        color: #000000;
        border: 2px solid rgba(145, 145, 145, 1);
        padding: px;
        margin-top: 2%;
        height: 42px;
        width: 302px;
        text-overflow: ellipsis;
    }
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" >
<!-- <div class="div1"> -->
<form action="https://test.example.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

// Form fields go here

</form>
htmlcssforms

Answer №1

Make sure to adjust the styling of your .row element as it currently has a margin of 0 -15px, causing it to extend beyond 100% width.

A quick fix for this issue is to add padding: 0 15px; to the parent element.

Answer №2

There seems to be some issues in your approach that need to be resolved.

To begin with, make sure you load Bootstrap before your own CSS. This way, you can easily override Bootstrap styles as needed. The sequence of resource loading matters because external libraries set the groundwork for your code, but your custom styles should have the final say in how things look.

Another problem causing the horizontal scroll is likely due to elements overflowing the page boundaries. @NetPax's solution may eliminate the scroll bar but may lead to parts of your content being partially hidden at certain window widths. In this case, the culprit causing the overflow could be all the <div class="row"> tags. Remember that divs are block-level elements and occupy the full width available. Bootstrap's row class includes a -15px margin on either side and is typically used alongside the container class, which adds 15px padding.

You'll need to either find an alternative to row or wrap your row elements within a container. Below, I've implemented these changes along with ensuring Bootstrap loads before your custom CSS. Feel free to ask if you have any questions.

/* Custom styles */
.inplft {
    padding-left: 14px;
    font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
}
.inprht {
    padding-right: 0px;
    font: normal normal normal px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
}
.div1 {
    /*left: 119px;*/
    width: 350px;
    position: absolute;
    /*top: 264px;*/
    /*height: 379px;*/
}
.d2 {
    /*left: 58px;*/
    position: absolute;
    /*top: 23px;*/
    height: 42px;
    width: 30px;
}
.mrglft {
   margin-left: -%;
}
.a {
    border-radius: 0;
    font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(255, 255, 255, 0.95);
    box-sizing: border-box !important;
    color: #000000;
    border: 2px solid rgba(145, 145, 145, 1);
    padding: px;
    margin-top: 2%;
    height: 42px;
    width: 302px;
    text-overflow: ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<form action="https://test.example.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

<!-- Form fields go here -->

</form>

Answer №3

Simply include the following code snippet:

overflow-x: hidden;

in the container element. Also, remember to verify the width of the container element and the padding/margin of its child elements as this may enable you to utilize overflow-x effectively.

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

A step-by-step guide to setting up a Slick Slider JS slideshow with center mode

I am working on implementing a carousel using the amazing Slick Slider, which I have successfully used for images in the past without any issues. My goal is to create a 'center mode' slideshow similar to the example provided but with multiple div ...

javascripthtmlcssslick.js

Can you show me a way to use jQuery to delete several href links using their IDs at once?

Currently facing a challenge with removing multiple href links that share the same ID. Here is a snippet of my code: $('.delblk').click(function(e) { e.preventDefault(); var id = $(this).attr('id').substr(7); ...

javascriptjqueryhtmlcss

Strange occurrences with the IMG tag

There seems to be an issue with my IMG element on the webpage. Even though I have set the height and width to 100%, there is some extra space at the end of the image. You can view the problem here: I have also included a screenshot from the developer too ...

css

Track the number of button clicks on the website without ever resetting the count

Hello there! I have a fun idea for my website - it will have a button that, when clicked 5 times, displays the number 5. Even if you refresh the page or load it again, it should still show 5 and allow you to keep clicking. I can create a counter for one ...

javascriptjavahtmldatabaseweb

What is the most effective method for arranging divs in a horizontal layout?

When it comes to creating a horizontal three-column div layout, there are a variety of methods to consider: Position: relative/absolute; Float: left/right; with margin: 0 auto; for center div Float: left; for all divs Display table / table-cell What do ...

javascriptcss

Ensuring various conditions with ngIf

I've created a toggle function that updates the text of a link, but I'm struggling to handle multiple conditions. For example, *ngIf="condition1 or condition2". Below is an excerpt from my code: <a routerLink="/ads" class="tip" (click)="togg ...

htmlangular

I am looking to extract and gather information from a webpage

Here is the HTML code found in the DOM: <center> "1 file " <br> "has been successfully uploaded." </center> I need to extract the text "has been successfully uploaded." using my method. I attempted using ge ...

htmlselenium-webdrivergettext

The intricate arrangement of multiple rows and columns using Bootstrap 4 technology

Struggling with multi-nested rows and columns in Bootstrap 4, I encountered an issue where the line2 was positioned next to line1 instead of below it with a horizontal bar separating them. Can someone help me understand why this is happening? <link h ...

htmlcssbootstrap-4bootstrap-5

How to transform a string into a nested array in JavaScript

I created a list using Django and passed it to index.html. However, I encountered an issue when trying to use it in the JavaScript content. The list is being passed as a string, and although I attempted to use JSON.parse, I received an error message: Unc ...

javascripthtmljsondjango

What is causing the resistance in changing the color of my current navigation items?

I've encountered a small challenge with my header section. Despite multiple attempts, I'm struggling to change the color of the 'current' menu item. It seems that overriding Bootstrap's default color is proving to be more difficult ...

htmlcsstwitter-bootstrap

Overlay displayed on top of a single div element

Trying to implement a loading overlay in an Angular project within a specific div rather than covering the entire page. Here's a Fiddle illustrating my current progress: #loader-wrapper { top: 0; left: 0; width: 100%; height: 100%; ...

htmlcss

Trouble accessing HTML file in web browser

I just finished creating a basic webpage called HelloWorld.html using HTML, JavaScript, and CSS. It runs smoothly when I open it from Eclipse IDE and view it through a browser. The functionality of the page is that it contains 5 buttons, each revealing th ...

javascriptcsshtml

Is it possible to identify when a key is pressed on any part of an HTML webpage?

I am currently seeking a solution to detect when a key is pressed on any part of an HTML page, and then showcase a popup displaying the specific key that was pressed. While I have come across examples of achieving this within a textfield, my goal is to m ...

htmlonkeypress

Learning the ropes of off-canvas design with Bootstrap 3

I'm really struggling to understand how to implement off-canvas functionality in Bootstrap 3. I've searched for examples, but I just can't seem to grasp it. My navigation is set up, but I'm unsure how to make the off-canvas feature work ...

htmlcsscanvastwitter-bootstrap-3

Arrangement of items in a grid with various sizes

I have encountered a challenge that I cannot seem to overcome. In my grid system, there are 18 identical items/boxes. I am looking to remove 4 of those items/boxes and combine them into one large item/box. Refer to the wireframe below for guidance on how ...

htmlcss

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

javascriptjqueryangularjshtmltabs

Arranging Check Boxes Side by Side

I am struggling to properly align the three checkboxes and tables next to each other. I have managed to get the checkboxes on the same row, but aligning them neatly has proven to be a challenge. Using Notepad++ as my development tool, I am facing formattin ...

javascripthtmlcss

Place the text within the contenteditable body of a frame at the specific caret position

Within my iframe object, there is a contenteditable body. I am trying to paste text or HTML elements at the caret position. However, when I attempted this code snippet, I encountered an error message saying Cannot read property 'createRange' of u ...

javascriptjqueryhtmlcontenteditable

Creating a cascading layout with React Material-UI GridList

Can the React Material-UI library's GridList component be used in a layout similar to Pinterest's cascading style? I have utilized Material-UI Card components as children for the GridList: const cards = props.items.map((item) => <Card ...

javascriptcssreactjsmaterial-ui

How to utilize the ternary operator efficiently to evaluate multiple conditions in React

Is there a way to change the style based on the route using react router? I want the description route to display in orange when the user is in the description route, white when in the teacher-add-course route, and green for all other routes. However, th ...

javascripthtmlcssreactjs