Tips for adjusting the border-bottom line in real-time as text is selected from a dropdown menu

$('#select').on('change', function() {
  name = $('#select :selected').val();
  //some code here 
});
. bdr-txtline {
  border-bottom: 1px solid black;
}
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div id="Name" class="bdr-txtline">
      </div>
    </div>
  </div>
</div>
I have a dropdown on page1.html. When I select an option, the data is dynamically transferred to another page which has a bottom border line. The options in the dropdown have different lengths, some are short with 3 words and others are longer with 7 or 8 words. I would like the bottom border line to adjust accordingly, either increasing or decreasing in size. How can I adjust the border-bottom line dynamically based on the text coming from the dropdown? Is it possible to set a range of widths for the border bottom line and make it responsive?

Answer №1

you should apply the display:inline-block style to the element with the class bdr-txtline.

.bdr-txtline {
  border-bottom: 1px solid black;
  display:inline-block
}
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div id="Name" class="bdr-txtline">
      two words
      </div>
    </div>
  </div>
</div>



<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div id="Name" class="bdr-txtline">
      more than two words
      </div>
    </div>
  </div>
</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

The left side of the page is anchored with text content while an engaging carousel occupies the right half

Looking to create a section on the website that remains fixed while a carousel scrolls vertically. Once you reach the final slide, scrolling will continue on the page rather than changing the carousel slide. Want it to function similarly to the Creative s ...

How can I retrieve the Google Maps URL containing a 'placeid' using AJAX?

I have a specific URL that I can access through my browser to see JSON data. The URL appears as follows: https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJZeH1eyl344kRA3v52Jl3kHo&key=API_KEY_HERE However, when I attempt to use jQuer ...

Verifying picture quality prior to transferring to a remote server

I am facing an issue with my image upload function to a remote server. The upload function works fine on its own, but when I integrate it into the size validation block, it stops working properly. <p> <input type="file" id="BtnBro ...

Utilizing Jquery Ajax JSON to send information from a database

I have recently revisited an old project and I am seeking advice on some outdated code. Three years ago, I utilized the following code to transfer data from a database to JavaScript arrays using PHP: echo json_encode($result_array); accompanied by JQuery ...

What is causing my 100% height to be excessively large?

I'm facing an issue with my background containers, "background-overlay" and "background-gradient", as they are extending the height of the document beyond the actual content displayed. I am unsure of what could be causing this problem. It might be som ...

Is it possible to have a div set to close upon loading the page?

Is there a way to have the toggle function set up so that when the page loads, the div being toggled starts out closed? I don't want them to be visible until clicked on. Best regards, Joey <script type="text/javascript> $(document ...

jQuery import children into output

When inserting a div every nth-child and later calling the children of the parent, the jQuery inserted elements do not appear in this new list. How can I retrieve the inserted elements as well? Apologies if this is confusing. If it's easier to under ...

Utilizing Django along with JQuery.ajax to extract data from JSON through ajax call

Here is the code snippet: def change(request): users = Account.objects.all().to_json() return HttpResponse(users, mimetype='application/json') This is how my JavaScript looks in the template: $( "#btn" ).click(function() { jQuery.aja ...

What is the JQuery code to select a checkbox and display an input field?

I have created a function that retrieves a JSON response, and the data from this response is displayed in the input fields. This is a table. When I click the edit button, it sends a request to the master_get_items file and receives the response. Table sn ...

Adding icons to a select box can be easily achieved by utilizing Bootstrap 5 along with Bootstrap Icons. With

I am looking to enhance a bootstrap select by adding some icons, similar to the example below: https://i.sstatic.net/lqdQl.png This is what I have attempted so far: <select class="form-select" aria-label="Filter select"> <o ...

function for handling ajax timeouts

Is it possible to trigger a function when jQuery's $.ajax method reaches its timeout parameter? For instance: $.ajax({ ... ... ,timeout:1000(){do something if timeout) ... }); ...

Choose a subclass within a superclass by utilizing the "this" keyword

Whenever a user clicks on the class addMass, I want to add the attribute data-rate to the element with the class currentMass. Since there can be multiple elements with the class addToCart, I need to ensure that the changes are only applied to the one that ...

The personalized confirmation dialog is experiencing malfunctions

I have designed my own custom dialogs using Bootstrap and jQuery, such as Alert and ConfirmDialog. Here is a sample: http://jsfiddle.net/eb71eaya/ The issue I am facing is that in the callback function, I make an AJAX call. If it returns true, I want to ...

Using multiple Django FBVs to capture and save data with Ajax and jQuery

Within my Django application, I have implemented two function views - FV1 and FV2. FV1 is responsible for retrieving data from the database and populating form/formsets. In FV2, the goal is to utilize Ajax to transmit serialized data from the page (conta ...

What is the best way to begin IMA HTML5 SDK ads with sound off?

One challenge I encountered was getting autoplay video to work on iOS 10 using HTML5. To achieve this, I utilized the following code: <video autoplay loop muted playsinline controls> <source src="http://distribution.bbb3d.renderfarming.net/vi ...

Develop with originate effect JQuery animation

Looking for help on creating a popup div that grows outward from the center of a button and slides to the center of the screen when clicked. Struggling to find snippets, any assistance would be appreciated. Special thanks to Jamie Dixon for helping me get ...

Modifying the dimensions of mat-card in Angular Material

https://i.stack.imgur.com/CP16N.png I am struggling to make both components the same height, similar to the left form. I have tried adjusting margins and padding but nothing seems to work. Below is the HTML code for the parent element: <mat-tab label= ...

Utilize jQuery AJAX to showcase JSON data by handling the response of a POST request sent to a JSP

Displaying JSON Data Using JavaScript Code $(document).ready(function(){ $("button").click(function(){ $.ajax({ url:"jsonCreation.jsp", type:'post', dataType: 'json', ...

Finding the correct value for the jquery "id" variable in this custom code can be achieved through the following steps

There are 20 divs with the same bio class: <div class="bio" data-id="<? echo $id; ?>"> <p>the bio1 text</p> <a id="car" href="http://www.mycustomurl.com">my car 1</a> </div> <div class="bio" data-id="<? ...