Adjust the width of a DIV based on the width of its text content in CSS

Not long ago, I stumbled upon this fantastic example demonstrating how to incorporate material design elements in buttons.

These buttons are created using a combination of classes that allow for easy customization with just a simple modification. However, I encountered an issue where I wanted the buttons to adjust their width based on the text they display.

Essentially, a button is structured like this:

<div class="button flat">
    <div class="center" fit><b>NOT NOW</b></div>
    <!--An additional tag included in the [original example][2]-->
    <paper-ripple fit></paper-ripple>
</div>

I needed the width of the parent div (with classes "button" and "flat") to adjust based on the text within the inner div (with class "center"). Despite my attempts using CSS alone, I couldn't figure out how to determine the "real width" of the inner div's text or how to wrap it. This led me to a solution involving jQuery/JavaScript. You can view the fiddle here demonstrating that solution.

However, I'm now wondering if it's possible to achieve something similar to this in the JSFiddle, but using only HTML and CSS.

Thank you in advance.

Answer №1

To adjust the size of buttons, consider implementing the CSS min-width rule within the .button class

.button {
      display: inline-block;
      position: relative;
      min-width:60px;
      width:auto;
      height: 32px;
      line-height: 32px;
      border-radius: 2px;
      font-size: 0.9em;
      background-color: #fff;
      color: #646464;
    }

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 update the value of an HTML tag every few seconds using jQuery?

Looking to create a unique script that will dynamically change the content of a div every 4 seconds. Is there a way to achieve this through any specific method? ...

Leveraging Angular to dynamically adjust the height of ng-if child elements based on parent

I'm struggling with a few things in my current setup. I have a view that consists of 3 states - intro, loading, and completed. My goal is to create a sliding animation from left to right as the user moves through these states. Here is the basic struc ...

I am curious as to why the Bootstrap 4 dropright selected menu appears as a default browser button in Chrome, while it functions seamlessly in Firefox

An issue has been identified that is specific to Chrome. The dropright selected menu appears differently in Chrome compared to Firefox, where it displays correctly with a white background. !https://i.sstatic.net/BulRA.jpg The Bootstrap version being used ...

Mapping with Star Components

As a newcomer to ReactJs, my task is to create a 5-star review component with the ability to display half-star ratings. I previously implemented this in Angular5. Within the map method, I need to loop through the following elements: <!-- full star -- ...

Having trouble with Wookmark not working in Jquery UI?

Hey there, just wanted to share that I'm currently utilizing the Wookmark jQuery plugin $.post('get_category',data={type:'All'},function(data) { $.each(data,function(item,i){ var image_ ...

Having trouble with file uploads using PHP and Jquery

I am attempting to implement this solution for uploading a file using Ajax and PHP with Jquery, but unfortunately, it is not functioning as expected. Below is a snippet of my HTML form utilizing bootstrap: <form role="form" enctype="multipart/form-da ...

Problem with full-page navigation sliding in and fading in and out

Upon the user's click on <a href="#slide-nav" class="slide-nav-trigger">, a full-page navigation smoothly slides into view. This animation is triggered by CSS and uses jQuery for event delegation. The Dilemma Instead of abruptly turning on and ...

I am looking to adjust the height of my MUI Grid component

Recently exploring React, and I'm looking to set a height limit for MUI Grid. I've structured my project into 3 sections using MUI grid components. My goal is to restrict the page height in order to eliminate the browser scrollbar. If the conten ...

Is there a way to make images load only when the navigation buttons are clicked in a scrollable (jquery tools) rather than loading all images at once?

I came across this great demo tutorial that I'm currently following: The issue with the tutorial is that it loads all the images at once, which significantly impacts performance. My goal is to have it load a set of images each time you click the arro ...

Transfer information from a Json file to the Parse.com backend using the Rest API

Good evening everyone, I'm facing a challenge in loading data from a .json file into the Parse.com backend. While I successfully managed to manually add json data using the terminal on my Mac by following the example provided by Parse.com: curl -X P ...

Pass Form ID To Function In A Dynamic Way

I have multiple forms on my webpage and I want to use the same ajax function for all of them. It currently works well for one form by fetching the id with getElementById and then passing it to the ajax function. My goal is to dynamically pass down the form ...

What could be causing the malfunction of my navbar and carousel functionality?

I am currently facing some challenges with the carousel in my HTML code. I am unable to get it to display images properly. Additionally, there is an issue with the background color of my navigation bar - it doesn't stay at 100% width. Also, when using ...

What is the best way to use HTML and CSS to center images and headings on a webpage?

This task is really testing my patience... I'm attempting to create a layout that resembles the following: Logo img|h1|img The horizontal lines flanking the subtitle serve as a visual guide, like this --- Subtitle --- Below is the snippet of H ...

Swipe-enabled responsive image carousel

Seeking a dynamic image slider with the ability to navigate through images effortlessly. Here's what I have in mind: While attempting this guide: I encountered an issue where setting the 'maxImages' variable above 3 resulted in only 3 im ...

Choose a numeric value and then adjust it to display with exactly two decimal places

My goal is to create a code that achieves the following tasks: Add an ID to every nth child Round the number in each nth child to 2 decimal places Prefix the numbers with a pound sign (£) Loop through until all the nth children in a table are processed ...

No values being passed in POST request during Ajax call

I'm dealing with a situation where I have a table that has sortable rows. These rows are generated from a mysql database using a field called "displayorder" to determine the order. My goal is to use AJAX to update the database whenever a row is dragge ...

Developing a Customized Modal with Backbone.js

As a newcomer to Backbone, I have been trying to create a Modal in my application by setting up a base Modal class and then extending it for different templates. However, despite conducting some research, I haven't been able to find a solution that fi ...

Enhance your HTML code using JavaScript (specifically jQuery)

Is there a way for me to transform the following code into a more visually appealing format? <td> <a href="/Test/Page/2">Previous</a> <a href="/Test/Page/1">1</a> <a href="/Test/Page/2">2</a> 3 ...

A single column in Bootstrap displaying text vertically

Looking to rotate the "VERTICAL_TEXT" (third bootstrap column) by 90 degrees, I attempted the code below: <div class="row"> <div class="col-xs-2" style="background-color: yellow;"> <span>FOO1</span><br/> & ...

The bug in Polymer 1.0 where a custom element is causing issues when clicking under the toolbar

Issues have arisen with a custom element I created, named <little-game></little-game>. Here is the template code for <little-game></little-game>: <template> <a href="{{link}}"> <paper-material elevation=& ...