Customization disrupts the uniformity of button dimensions

When localizing a web application, we encountered an issue with browsers using different fonts for different languages. This led to the height of certain HTML objects changing, especially noticeable with input buttons. While this behavior is expected, how would you address this issue? The only solution I've come across (which isn't ideal as it goes against responsive design principles) is to set vertical-align to top and fix the height in pixels.

You can observe this problem by viewing [this fiddle][1]. In Chrome, the buttons will display at different heights due to the use of two different Japanese fonts (Yu Gothic and Simsun). However, in Firefox, they will have the same height.

If you have any suggestions or ideas on how to tackle this issue, please share them!

[1]: https://jsfiddle.net/sxg78tom/3/

htmlcsslocalization

Answer №1

If you need help with aligning input elements, consider utilizing this technique: Check out the Fiddle example here: https://jsfiddle.net/3u1wahy9/

  • One way to ensure consistent height for input elements (such as buttons) is by enclosing them in a div with the CSS style of inline-flex. This will make all elements flexible and maintain uniform sizing. Give it a try!

div{
  display:inline-flex;
}
<div>
<input id="hej" type="submit" value="File" style="vertical-align:top;font-size:1em;"/>
<input id="hej2" type="submit" value="Select" style="vertical-align:top;font-size:1em;" />
</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

Tips for displaying a Bootstrap 4 table on smaller screens

I have a Bootstrap 4 table filled with JSON data. The table renders perfectly on the UI, but users on smaller devices must scroll to view all the data. Despite there not being much data in the HTML table, users still need to scroll on small devices. I wa ...

csshtmlbootstrap-4media-queriesbootstrap-table

I am looking to incorporate a rounds div into the backdrop

My attempt to use border-radius did not solve my issue. I am trying to create a circular background for a specific section of the page, as shown in the image. For my first inquiry: I only want the circular background at the top of the page, not the botto ...

htmlcsssass

Focusing on the initial element following CSS prioritization

Check out this codepen link: http://codepen.io/muji/pen/XpEYzO I am looking to target the first element after it has been sorted using a CSS "order" property and apply another CSS property to it. Is there a way to use jQuery or any other method to identi ...

javascriptjquerycss

Connecting Angular directive to a controller

While diving into some Angular JS tutorials, I decided to apply what I learned in the Ionic framework. Unfortunately, I hit a roadblock when attempting to create a reusable HTML control because the model isn't syncing with the view as expected. Here&a ...

javascriptangularjshtml

Use a PHP form to send an email with HTML formatting, rather than plain text

I am facing an issue with sending emails from a web form. The received email needs to be displayed as HTML and not text. function createMailBodyLine ( $title, $value ) { $value = nl2br(htmlspecialchars($value)); return "<tr> ...

phphtmlhtmlspecialchars

I'm having trouble getting an audio file to play in my Laravel application. I uploaded the audio file to local storage, but when I try to play it using the audio tag, it's not

Having trouble with the path of my mp3 file stored in local storage and saved in the database. When retrieving the record from the database along with the mp3 file, it seems like the path is incorrect and I can't play it. I executed php artisan stora ...

phphtmllaravel

The Challenge of Referencing Javascript Files (including jQuery)

Previously, I had the following code snippet: <head> <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var optPrompt = "- Select One -"; var subCats ...

javascriptjqueryhtmlfilereference

Fancybox2 does not have a scrollbar feature, but you can customize the size

I've been struggling to hide the scrollbar in fancybox. I attempted the solution provided in this link but unfortunately, it did not work for me. The specific page I am working on is My goal is to have a fixed size and no scrollbar visible when fan ...

jqueryhtmlfancyboxfancybox-2

Restrict the number of button clicks to only once every 5 minutes

Similar Question: jquery disable a button for a specific time I am currently developing a PHP-based website. One of the features I want to implement is a button that can only be clicked once every five minutes by the user. After some research, I hav ...

phpjqueryhtml

Struggling to eliminate the scrollbar on a Material UI Dialog

I have a modal window that includes a keyboard, but I'm encountering some issues. Despite adding overflow:'hidden' as inline CSS, the scrollbar refuses to disappear. Furthermore, even when utilizing container-full padding-0 in Bootstrap, th ...

javascriptcssreactjsmaterial-ui

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

csstwitter-bootstrapintellij-ideagradle

Adjust the width of the dropdown menu to match the size of the input box

Within my input box in Bootstrap 4, there is a dropdown button located on the right. Upon clicking the button, a dropdown-menu is displayed. Inside the menu, there is an Angular component containing a table. <link rel="stylesheet" href="https://stack ...

htmlangulardrop-down-menubootstrap-4dropdown

Is it beneficial to modify the title/alt attribute of an image for SEO purposes?

In my application, I utilize Angular and have implemented the ng-repeat directive for images. This means that in my HTML, I only have one img tag for all the image objects fetched from the server. Should I also include unique titles and alt tags for thes ...

htmlangularjsseo

Issues with page loading arise when trying to integrate HTML binding in an Angular 6 project

The code below uses Angular 6 and Bootstrap 4, but it seems to have some issues: getNumberOfPossibleSteps() provides an array of integers: [1, 2, 3, 4] getDropDownElements() gives an array of selectable options for each step like this: ["- select an opt ...

htmlangularbootstrap-4

Having trouble adding a custom font with override to MuiCssBaseline in react-admin, the @global @font-face seems

I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this: ty ...

cssreactjsmaterial-uifont-facereact-admin

Enhancing list types with CSS styles

I am looking to achieve a unique style for my list that resembles the design in the image linked below. I want an ordered list with purple numbers paired with an unordered list featuring yellow bulletshttps://i.sstatic.net/ohReN.png However, my current st ...

htmlcsslist

Ways to modify the header color of a card by utilizing a Select element in Javascript, while ensuring that it does not impact other cards

I am facing an issue with multiple cards, each containing a Select element. When a user selects an option from the Select element, the card header changes color, but it also affects all other card headers. How can I separate them? [data-background-co ...

javascripthtmlcssbootstrap-5

Effortless navigation with smooth scrolling on anchor links in react/next.js

Can smooth scrolling be achieved using only CSS when clicking on an anchor link within a react component? ... render( <a href="#smooth-link">Link To There</a> .... <div id="smooth-link"> .... ...

javascriptcssreactjsnext.js

The <div> tag fails to comply with the Display: inline CSS property

I need help with a web development issue as I am new to this field. My problem is that I am trying to display three divs next to each other, but despite applying display:inline-block to them, they still appear stacked on top of each other instead of side b ...

htmlcssinlinedisplay

The relationship between the size attribute in HTML and CSS styling based on element size

On one of my pages, there is an input field that looks like this: <input type="text" size="20" name="whatever" /> I would like to keep the size attribute for the input field instead of using CSS. Now, I want to add a select box to the same form wit ...

htmlcss