The div element nested within the button is not visible

Fiddle

I am trying to create a unique social button design that resembles the custom Google+ sign-in button:

However, I encountered an issue where the second div element (to hold the right part of the button) is not displaying as expected:

Here is the code snippet:

<div id='p' style='display: inline-block'>Testing Testing 123</div>

And the corresponding CSS:

#p {
    height: 25px;
    width: 50px;
    background: #371e41
}

Answer №1

The button does not have enough space for the letters to show properly. To fix this issue, you can increase the width of the button by adding a CSS rule like width: 300px.

#b {
    height: 25px;
    width: 300px;
    ...
}

Check out this Fiddle for a demonstration.

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

Utilizing the splice method across multiple instances of a string

When facing a string like "This website is blocked by administrator. Please get the admin permissions. You will be allowed only if permission is granted" that needs to be split into three lines for better readability, one solution is using the splice metho ...

Looking to implement https requests in a phonegap app on an iPhone device?

Attempting to make an HTTPS request in a PhoneGap iPhone app using jQuery's getJSON() method is successful in the regular Safari browser. However, when attempting to do the same in Mobile Safari, an error message stating "Download Failed - Safari cann ...

Tips for increasing the complexity of your bottom-line animation

Hello everyone, I am currently learning the basics of CSS and have a question about a specific animation effect. Please bear with me if this type of inquiry is not suitable for StackOverflow. In my index.html file, I have the following code: <n ...

What are the best ways to personalize my code using Angular Devextreme?

Our development team is currently utilizing Angular for the front-end framework and ASP.net for the back-end framework. They are also incorporating Devextreme and Devexpress as libraries, or similar tools. However, there seems to be difficulty in implement ...

Issues with Kendo Grid showing incomplete data and columns

Having trouble populating a kendo grid with column titles, as some columns appear empty despite having data when checked in the console log. $(function () { $("#uploadBtn").click(function () { var url = window.rootUrl + 'Upload/UploadM ...

Attempting to retrieve dynamically generated input fields and cross-reference them with structured length .json data

In the process of developing code, I've implemented a for loop to dynamically generate HTML input fields based on the length of some data in a .json file. My goal is to use jQuery to compare the text entered in each input field with the corresponding ...

Configure WebStorm so that node_modules is set as the library root, while simultaneously excluding it from indexing

Can WebStorm projects be configured to set the node_modules as the library root, while also excluding it from indexing? I thought I saw a project that had node_modules marked as both library root and excluded, but I'm unsure how to do this. Does anyo ...

Here is a way to retrieve the name of a ref object stored in an array using Vue.js 3 and Typescript

I have a Form, with various fields that I want to get the value of using v-model and assign them to ref objects. In order to populate my FormData object with this data, I require both the name and the value of the ref objects. Unfortunately, I am struggli ...

Modify the text when clicked on, but do not change the span

I'm currently attempting to change the text within an anchor (<a href=>) element when another element is clicked. The structure of the HTML is as follows: <h1> <a href=""> replace this text <span class="breadcrumb" ...

Event follows activation of trigger click

I've already gone through this post on Stack Overflow about triggering an action after a click event, but none of the solutions I've tried so far have worked. Let's say I have a menu on my webpage like this: <ul class="nav nav-tabs"&g ...

Issue with ngModelChange and change events not functioning properly in Internet Explorer 11

Within a text input field, I have implemented single-way binding in addition to utilizing a number formatter pipe. I have also set up an (ngModelChange) event handler to remove any commas that are added by the number formatter, and a (change) event to tri ...

Unveiling the Magic: Displaying Quill's raw HTML in Vue.js

Within my Vue.js app, I am utilizing the Quill editor to generate raw HTML content that is saved directly to the database without any cleaning. When fetching this content from the backend, the text and styling are displayed correctly (colors, bolding, etc. ...

Encountering Error: When Running the Command "npm run dev" it's Showing "missing script: dev" Message

I attempted to set up the SVELT GitHub repository locally by following these steps: https://github.com/fusioncharts/svelte-fusioncharts When I tried to launch it using the "npm run dev" command, I encountered this error: npm ERR! missing script: dev To ...

Strikeout list on click of a mouse

Is there a way to apply strikethrough formatting to text with just a mouse click? The CSS for lists is beyond the form field margin. I've tried multiple methods without success. No matter how many times I change the code, I can't seem to get it r ...

Separate the selected option in the TEXTAREA by commas to make it easier to

Can you assist me with integrating this example? I have the following elements: When adding a textarea, I require an option to be selected and separated by a comma. For instance: Here I will select an option: Subsequently, this chosen option must be ad ...

Tips for determining whether a value is present in an array or not

I'm trying to prevent duplicate values from being pushed into the selectedOwners array. In the code snippet below, the user selects an owner, and if that owner already exists in the selectedOwners array, I do not want to push it again. How can I imple ...

How to prevent the scroll bar from affecting a fixed div located at the top of the page

Check out this website: I am struggling with setting up a fixed menu div at the top and a content div below it on my site. I want the scroll bar to only apply to the content div and not the header div at the top, but I can't seem to figure out how to ...

Updating file extension name in ReactJS: A quick guide

Looking to modify a file name and extension within the react.js public folder. Changing index.html to index.php https://i.stack.imgur.com/zp1Ga.jpg ** ...

JavaScript checkboxes not being recognized by Node element

Located on the left side of the page, there is a feature that allows me to include selected options in a list with the same name attribute. These selections will then be sent as part of the entire form to the Node backend. Most of the elements on the page ...

Adjusting the width of the final card in the deck grid

Currently, I am utilizing angular-deckgrid for image display purposes. Within a container, there are two columns in which images are displayed with the column-1-2 class according to the documentation. However, in certain scenarios where only one image is p ...