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

What is the best way to access all of a class's properties in JavaScript?

Is there a way to retrieve all the properties of a class using JavaScript? For example, if I have a class like this: .menu { color: black; width: 10px; } How can I extract "color: black; width: 10px;" as a string using JavaScript? Thanks in advance! ...

Is utilizing the bootstrap grid system to create nested rows a viable option?

Looking to feature 1 larger image alongside 4 smaller images in a 2x2 layout: I initially considered placing everything in one row, then dividing into two columns. In the second column, I would create two rows with two columns each to achieve the desired ...

Analyzing a JSON Structure Containing Numerous Sub-Objects

<script type="text/javascript" src="http://static.stackmob.com/js/2.5.3-crypto-sha1-hmac.js"></script> <script type="text/javascript"> $j.ajax({ dataType : 'json', url : "/api/core/v2/groups/", //or any other res ...

Can we access an element within the document using its context?

One common method to access an element is by using its id: <div id="myId"></div> <script type="text/javascript"> $(document).ready(function(){ $('#myId').something(); }); </script> However, there are inst ...

Use AJAX, PHP, and MySQL to implement a date filtering feature

Having trouble implementing a date filter: The structure of my database is as follows: start_date | end_date 2000 | 2005 This is how my PHP select query looks: if (empty($processo) && empty($ano)){ $pegaSonda = $pdo->prepare("SELECT ...

Issue arising from changing classes in Internet Explorer

I've encountered an issue where I am trying to change the class of an element on a mouseover event, but it doesn't seem to fire as expected. However, when I add an alert in the function, it suddenly works. Here is the code that doesn't work ...

Looking to implement a CSS banner image for seamless customization across multiple pages

Is it possible to change the banner image easily in the CSS without having to update every HTML page? I don't want the image source to be directly on the HTML pages. How can this be achieved? Additionally, there are already two references in the CSS: ...

Having trouble with my jQuery .hover() code not running as expected

Whenever I hover over my divs, I want them to change color. However, the code doesn't seem to be working as expected when I try to do so. I suspect that the issue might be related to the z-index property used in the class that I am trying to hover ove ...

Exploring the world of technology with jQuery, harnessing the power of JSON objects

I'm seeking assistance with creating JSON using JQuery, sending it via Ajax to a .NET webservice, and then deserializing it in .NET in order to save the data to a database. If anyone could provide guidance on where I might be going wrong, that would ...

Display a background color behind an <img> element when the image's dimensions are smaller than the page

Currently, I am utilizing the following CSS for styling an image - check it out here img { border: 3px solid #ddd; margin-left: auto; display: block; margin-right: auto; background: red; } If you would like to view the output, click on this link - see it ...

The issue with executing event.keyCode == 13 in Firefox remains unresolved

I've implemented a function that sends comments only when the "enter" key is pressed, but not when it's combined with the "shift" key: $(msg).keypress(function (e) { if (event.keyCode == 13 && event.shiftKey) { event.stopProp ...

Utilizing Bootstrap Classes in ReactJS: A Comprehensive Guide

Is it possible to incorporate Bootstrap classes in a React application without actually installing the framework? If so, how can this be achieved and utilized effectively? I would greatly appreciate your assistance with this matter. ...

Tips on updating service variable values dynamically

I need to update a date value that is shared across all controllers in my website dynamically. The goal is to have a common date displayed throughout the site by updating it from any controller and having the new value reflected on all controllers. Can yo ...

Exploring the Best Methods to Retrieve the data-id in jstree JSON data

My goal is to retrieve the data-id from a dynamically generated tree form using JsTree (which has checkboxes), but unfortunately, my current approach isn't working. To iterate over the checkboxes and account for multiple selections, I am utilizing the ...

Is JQUERY always setting MVC bool EditorFor value to true?

I am facing an issue with a boolean value on my form: <div class="form-group"> @Html.LabelFor(model => model.IsMonday, "Monday", htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.Editor ...

The Canvas element inside a Bootstrap modal is returning inaccurate mouse coordinates

I am currently troubleshooting an issue with a HTML5 canvas inside a Bootstrap modal. The canvas is designed to be a selection game where objects can be selected and manipulated. Everything works fine in the center of the 600x600px canvas, but there is an ...

Jquery code failing to trigger any response

Recently, I quickly created a jQuery script to dynamically populate a paragraph element in order to easily switch between player and server interaction options. However, I am currently facing an issue where my script does not populate as expected. I have a ...

Enhance the styling of elements generated through JavaScript in VueJs with custom CSS

I need help applying CSS to elements that I dynamically created using JavaScript. buttonClicked(event) { console.log(event); let x = event.clientX - event.target.offsetLeft; let y = event.clientY - event.target.offsetTop; let ripples = document.cre ...

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

While trying to reduce the left padding of the v-select menu checkbox using the F12 debugger, I encountered an issue where the menu suddenly disappears when clicked. This makes it difficult to see the active menu. Attached is a screenshot of the select me ...

Stylish Zigzag Border with a Patterned Background

Recently, I've been experimenting with creating a header that features a unique zigzag border. Traditionally, this effect is achieved using images to achieve the desired look. (1) I am curious if there is a way to implement a cross-browser compatible ...