Facing a coding challenge and seeking assistance.
Two input fields are displayed side by side. The second field (in green) is slightly higher, indicating a possible padding or margin setting at the bottom.
Issue does not occur when font size of second input field matches the first, but the second field needs to be larger.
Looking for a solution to align both input fields vertically without altering the font size.
Thank you, BM
Make sure to include vertical-align: top; in both sections. By default, they are aligned based on the baselines of their text content.
#curSelButton {
width: 60px;
height: 40px;
font-size: 15px;
text-align: center;
background-color: white;
border-radius: 2px;
margin: 0px;
padding: 0px;
}
#curSel {
width: 60px;
height: 40px;
text-align: center;
font-size: 25px;
background-color: rgb(0, 255, 0);
font-weight: bold;
margin: 0px;
padding: 0px;
border-width: thin;
}
#curSelButton,
#curSel {
vertical-align: top;
}<table>
<tr>
<td>
<input type="text" id="curSelButton" readonly value="shuffle">
<input type="text" id="curSel" value="ABC" readonly>
</td>
</tr>
</table>Insert another td Element into the tr and place your Button with the class „curSel“ inside.
<tr >
<td >
<input type="text" id="curSelButton" readonly value="shuffle" >
</td>
<td>
<input type="text" id="curSel" value="ABC" readonly >
</td>
</tr>
Replace tables with div and use the CSS property float:left for alignment
<!doctype html>
<html lang="en">
<head>
<style>
#curSelButton {
width: 60px;
height: 40px;
font-size:15px;
text-align: center;
background-color: white;
border-radius: 2px;
margin:0px;
padding:0px;
float:left;
}
#curSel {
width: 60px;
height: 40px;
text-align: center;
font-size:25px;
background-color: rgb(0, 255, 0);
font-weight: bold;
margin-left:3px;
padding:0px;
float:left;
}
</style>
</head>
<body >
<div>
<input type="text" id="curSelButton" readonly value="shuffle" >
</div>
<div>
<input type="text" id="curSel" value="ABC" readonly >
</div>
</body>
</html>
Apply the CSS rule vertical-align: middle to align the input fields vertically.
<!doctype html>
<html lang="en">
<head>
<style>
#curSelButton {
font-size:15px;
background-color: white;
border-radius: 2px;
}
#curSel {
font-size:25px;
background-color: rgb(0, 255, 0);
font-weight: bold;
border-width: thin;
}
#curSelButton, #curSel {
vertical-align: middle;
width: 60px;
height: 40px;
text-align: center;
margin:0px;
padding:0px;
}
</style>
</head>
<body >
<table >
<tr >
<td >
<input type="text" id="curSelButton" readonly value="shuffle" >
<input type="text" id="curSel" value="ABC" readonly >
</td>
</tr>
</body>
</html>Currently, I am facing an issue with setting the height and width attributes for an image as I do not have access to its dimensions from the server. One solution I am considering is setting both the width and height values to auto. For example: img { ...
Is there a way to perfectly center a div vertically? There are plenty of methods for horizontal alignment, but no matter what I attempt, getting vertical centering proves to be a challenge. body { vertical-align: middle;} No effect body {text-align ...
As I peruse a webpage, I notice that there is room for improvement in terms of user-friendliness. The page is filled with a list of movie titles, each accompanied by a link to IMDb. However, the IMDB user rating is only visible when hovering over the titl ...
After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...
When I retrieve data from a REST api, I need to split the name parameter at '2330' and insert a line break. For example, if the name is: ABCD 2330 This is My Name, I want the output on my screen to appear as: ABCD 2330 This is My Name // this par ...
I've been attempting to place an image and an h1 element on the same line. After researching online, I attempted using display:inline; for both the parent div element as well as each individual element. This is my current code: <div style="displa ...
Can anyone help with fixing the issue of my overlay being hidden behind the flash element? The blue bar with the 'Continue' button still shows up on top. I need some CSS changes to make sure that the overlay appears above everything else below it ...
I am currently working on a component that contains multiple instances, each with its own unique internal component (acting as a modal wrapper). I need to customize the size of each modal instance independently. How can I achieve this customization when th ...
I'm working on creating a mini wiki page on my website that will have a table of contents at the top. Users can click on a link in the table of contents and it will automatically scroll down to the relevant section of the page. I know this involves us ...
My application revolves around a webpage created with the use of node and angular. On the root URL (/), I have incorporated a signup and login form without the use of Angular. Upon successful login, Angular scripts and configuration files are loaded on the ...
Currently seeking assistance. I have utilized [ onerror=this.style.display="none"] but it suddenly stopped functioning. Unable to find a solution, is there an alternative to the following method? <img class="basicimg" src='.$row['anncimg&apos ...
Why is it that the code below displays correctly in one line in both FF and IE, but Chrome for some reason is showing it on two lines as if both span and button elements had "display:block;"? Even though the button has a computed display of "inline-block," ...
I have a script that triggers an SSE event to fetch json encoded data from online.php. After some research, I discovered methods for sending JSON data via SSE by adding line breaks. My question is how to send JSON through SSE when the JSON array is genera ...
I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...
Does anyone have a code snippet that can generate a "search box" like the one on www.dx.com? I was shocked to find that searching for "textfield inside image" only yielded results for "image inside textfield". ...
After creating a 3D carousel using jQuery and CSS3, I am looking to enhance it with swiping support. While there are plenty of libraries available for detecting swipes, I specifically want the carousel to start rotating slowly when the user swipes slowly. ...
I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a wi ...
I am looking to enhance the delete confirmation box on my Gridview delete function. Currently, I am using a basic Internet Explorer box for confirmation but I want to display a more stylish confirmation box. Here is the JavaScript code snippet within my gr ...
Creating a streamlined admin tool using PHP and JQuery to handle image data management is my current project. The main goal of this utility is to enable an admin to retrieve images from a database, view associated tags for each image, and add new tags as n ...
One issue I am facing on my webpage involves a button that triggers a right panel to open using the jquery and modernizr frameworks. The button is positioned at the far right of the screen. When clicked, it slides to the left along with the panel it reveal ...