The button is only partially visible

My HTML code for a small web app has a button that says "ok," but it's too tiny to display the text fully.

I wonder if I'm missing something with the span element?

How can I enlarge the button so that it's bigger and shows the entire "ok" text?

<center>
  <br>
  <br>
  <span id="accept_button" style="display:none;"><button onclick="task.accept_choice();"><h3>ok</h3></button></span>
  <span id="next_button" style="display:none;"><button onclick="task.next_trial();"><h3>ok</h3></button></span>
</center>

htmlcssbutton

Answer №1

there is an issue with using span because it's an inline element, requiring you to set display:block. My suggestion is:

  • wrap the button in a div

  • avoid adding unnecessary child elements to wrap text within the button, as the button itself can be styled

  • refrain from using the deprecated center tag; instead, apply CSS styles to elements

<div id="accept_button">
  <button onclick="task.accept_choice();">ok</button>
</div>
<div id="next_button">
  <button onclick="task.next_trial();">ok</button>
</div>

NOTE: In HTML5, while span can be a parent of h3(or button), this is not the case in HTML4

HTML5:

Permitted parent elements

any element that can contain flow elements, hgroup

7.1 Flow elements:

phrasing elements or a or p or hr or pre or ul or ol or dl or div or h1 or h2 or h3 or h4 or h5 or h6 or hgroup or address or blockquote or ins or del or object or map or noscript or section or nav or article or aside or header or footer or video or audio or figure or table or form or fieldset or menu or canvas or details

Both span and button are considered as phrasing elements

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

Using Slick Slider and Bootstrap CSS to display text on top of images

Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I ...

javascriptcss

Expansion issue with Bootstrap panel

I am currently using Bootstrap 3 for the development of a social networking site. The issue I'm encountering involves displaying comments within a panel footer on toggle. However, the comments are extending beyond the footer area. Can anyone provide g ...

phphtmlcsstwitter-bootstrap-3

What sets the target property of the mousewheel event apart from other events like click, mousedown, and touchstart?

The mousewheel event's target property reveals the DOM element currently being hovered over when using the mousewheel or gesture-capable touchpad. In my experience (specifically in Safari 6, I will verify this in other browsers later), the target ret ...

javascripthtmldomdom-events

What are the specific constraints for CSS within web components?

<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>someone created a very general selector</p> <isolated-stuff></isolated-stuff> </body> <s ...

htmlcssweb-component

Guide to selecting multiple rows at once using ng-options in a list

Need assistance with an HTML list: I have a box displaying a list where users can select multiple items to save. The saving and retrieving process is functional as the selectedList stores the user's previous selections, while fullList contains all av ...

javascripthtmlangularjs

Are there methods to create a link that will open an application if it is already installed, or a website if it is not?

Similar Question: How can I check if a URL scheme is supported in JavaScript on iPhone Safari? Let's say my application is called "exapp" and I want to create a link on a website that can open the application if it is installed. If the user agen ...

iphonehtmlios

Why are my styles not working when referenced from the .module.scss file?

Here is the code snippet from my Sublayout.module.scss file: .pl-6 { padding-left: 6rem !important; } .pr-6 { padding-right: 6rem !important; } .pl-12 { padding-left: 12rem !important; } .pr-12 { padding-right: 12rem !important; } After im ...

javascriptcssreactjssassvite

Show a triangle positioned on the left side of the display

Looking for help with aligning a div to the left side of the screen CSS #nav { position: fixed; height: 50px; width: 50px; display: block; background-color: #000; } This particular div contains an icon that acts as a link HTML <div id="nav"> ...

htmlcss

Edit the contents within HTML strings without altering the HTML structure

If I have a string of HTML, it might look something like this... <h2>Header</h2><p>all the <span class="bright">content</span> here</p> I am interested in manipulating the string by reversing all the words. For example ...

phpjavascripthtmlstring

Is there a way to automatically adjust the positioning of added pins on an image as I scroll through the image?

I have inserted a large image onto my HTML page and to manage its size, I am displaying it within a div that allows for scrolling like a map. Using jQuery, I have placed 3 markers on the image. The issue I am facing is that when I scroll the image, the ma ...

javascriptjqueryhtmlcss

The Bootstrap modal-backdrop dilemma requiring JavaScript intervention

I am encountering some problems with the Bootstrap modal. When I try to open a modal, everything looks good, but when I close it, the screen turns completely black. Upon closer inspection, I found that every time I click on the X to close the modal, there ...

javascriptphphtmlbootstrap-modal

Tips for avoiding a 500 GET error due to an empty request during page loading

I recently encountered an issue with a form containing a dependent drop-down menu that reloads after form submission to preselect the main choice that was made before submission. The problem arises when the page initially loads without any parameters being ...

javascriptpythonhtmldjangoajax

The container cannot contain the overflowing DIV

I have 4 different divisions named outer, inner, title, and content. My goal is to place the inner div inside the outer div, with both the title and content divs positioned within the inner div, one above the other. I have set the outer and inner divs to b ...

css

Utilize jQuery to load a separate external sites div into an iframe

I have a department website that caters to a specific audience. I am interested in including a set of related links from an external site at the conclusion of each article. The links will be organized within a div, like so: <div id="linktoc"><a h ...

jqueryhtmliframeload

What steps should I take to design a polished PDF document?

I have been tasked with automating the invoicing system at our company. Currently, all data is stored in a local MySQL database and someone manually updates an Excel spreadsheet, which is then merged into a MS Word template for generating invoices. The obj ...

htmlcssxmlpdfxsl-fo

Switch the display of a div within a ng-template loop using PrimeNg

Working with the PrimeNg picklist, I have encountered a challenge. Here's what's going on: https://i.sstatic.net/7PHe7.png The main focus is on the first row, while the other rows do not have radio buttons (as they are part of incomplete test d ...

htmlangularprimeng

Displaying Previously Selected Value in HTML Dropdown Menu

Using a combination of PHP and HTML, I have created an HTML table that is generated using a PHP while loop. The dropdown menu on the page displays all distinct portfolio names from my MySQL database by executing the following code: $query2 = "SELECT DISTI ...

javascriptphphtmlmysql

Is it possible to override Bootstrap or not?

It's quite a puzzle to figure out when I can and cannot override Bootstrap classes or IDs with custom CSS. For instance, it seems easy enough to change the default navbar-dark background and font style, but altering the font color and size proves to ...

csssassbootstrap-4

Scrolling problems with numerous bootstrap modals on a Webpage

I am faced with an issue on a page where I have set the property overflow: auto. This page features a hyperlink to open the first modal, and within the first modal, there is a link to the second modal. My steps are as follows: Open Page 1 Click on the l ...

jqueryhtmltwitter-bootstrapbootstrap-4bootstrap-modal

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

Although this question may appear similar to others, there is a key distinction that sets it apart. In search of request efficiency rather than space efficiency, lazy loading could be the solution. However, in situations where content needs to be quickly ...

javascripthtml