Is there a way to move the newly visible element next to the existing visible element?

I have a question regarding the layout of select boxes in HTML. In my code, I noticed that the hidden select box appears below the visible select box when it is displayed. I believe this happens because the button takes up the available space next to the visible select box, causing the second select box to "drop" below.
Is my assumption correct?
If so, how can I adjust the positioning of the button to place the second select box next to the first select?

<html>  
<body>  
    <table>  
        <tr>
            <td id="t">  
                <div id="select1">  
                    <select>  
                        <option>  
                            John Smith    
                        </option>  
                        <option>  
                            Bill Johnson  
                        </option>  
                        <option>  
                            Mary Jones    
                        </option>  
                    </select>   
                </div>  
                <div id="select2" style="display:none">  
                    <select>  
                        <option>  
                            CA      
                        </option>  
                        <option>  
                            AZ     
                        </option>    
                        <option>    
                            NV      
                        </option>   
                    </select>   
                </div>
            </td>  
            <td><input type="submit" value="Press me!" onclick="doit()"/>  </td>
        </tr>  
</table>  

<script type="text/javascript">  
    function doit() {  
        document.getElementById("select2").style.display="block";  
    }   
</script>    
</body>  
</html>
javascripthtmlcss

Answer №1

Check Out the Demo Here.

Div elements typically display as block-level, causing the next element to appear on a new line. By using the inline property, you can make it stay on the same line.

To achieve this behavior, you can use the display:inline property:

<html>  
 <body>  
    <table>  
        <tr>
            <td id="t">  
                <div id="select1" style="display:inline">  
                    <select>  
                        <option>  
                            John Smith    
                        </option>  
                        <option>  
                            Bill Johnson  
                        </option>  
                        <option>  
                            Mary Jones    
                        </option>  
                    </select>   
                </div>  
                <div id="select2"  style="display:none">  
                    <select>  
                        <option>  
                            CA      
                        </option>  
                        <option>  
                            AZ     
                        </option>    
                        <option>    
                            NV      
                        </option>   
                    </select>   
                </div>
            </td>  
            <td><input type="submit" value="Press me!" onclick="doit()"/>  </td>
        </tr>  
</table>  

<script type="text/javascript">  
    function doit() {  
        document.getElementById("select2").style.display="inline";  
    }   
</script>    
</body>  
</html>

Answer №2

Have you considered placing the second select in a different cell for better organization?

For example:

<table>
<thead>
    <tr>
        <th colspan="2">Select Header</th> <th>Button Header</th>
    </tr>
</thead>
    <tr>
        <td id="t">
            <div id="select1">
                <select>
                    <option>
                        John Smith
                    </option>
                    <option>
                        Bill Johnson
                    </option>
                    <option>
                        Mary Jones
                    </option>
                </select>
            </div>
         </td>
         <td>
            <div id="select2" style="display:none">
                <select>
                    <option>
                        CA
                    </option>
                    <option>
                        AZ
                    </option>
                    <option>
                        NV
                    </option>
                </select>
            </div>
        </td>
        <td><input type="submit" value="Press me!" onclick="doit()"/> </td>
    </tr>
</table>

Answer №3

If I comprehend your inquiry correctly, then the solution would be... 

<html>  
<body>  
<table>  
    <tr>
        <td id="t">  
            <div id="select1" >  
                <select>  
                    <option>  
                        Jane Doe    
                    </option>  
                    <option>  
                        Mike Smith  
                    </option>  
                    <option>  
                        Sarah Johnson    
                    </option>  
                </select>   

                <select id="select2" style="display:none">  
                    <option>  
                        TX      
                    </option>  
                    <option>  
                        FL     
                    </option>    
                    <option>    
                        NY      
                    </option>   
                </select>   
            </div>
        </td>  
        <td><input type="submit" value="Click here!" onclick="execute()"/>  </td>
    </tr>  
</table>  

<script type="text/javascript">  
    function execute() {  
        document.getElementById("select2").style.display="inline";  
}   
</script>    
</body>  
</html>

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

A simple guide to viewing a sequential list of loaded stylesheets in Google Chrome

I've been trying to figure out the loading order of CSS stylesheets in Google Chrome, but I'm finding it a bit confusing. Despite my attempts to use Dev Tools -> Network tab -> filter for Stylesheets, I keep getting different results each t ...

htmlcssgoogle-chrome

Efficiently bridge the divide when a div element in a row is concealed

I have a set of square divs lined up beside each other, each measuring 200x200 pixels, arranged in rows and columns using the inline-block property. I'm currently using jquery to fade out one of these divs when it's clicked on. However, after the ...

htmlcssanimation

Dropdown menus in HTML and Ruby on Rails are not responsive on mobile devices and cannot

<div class="dropdown pull-right"> <a id="dropdown" data-toggle="dropdown" aria-haspopup="false" aria-expanded="true"> <%= theme_icon_tag "settings" %> </a> <ul class="dropdown-menu" aria-labelled ...

htmlruby-on-railsmobiledrop-down-menubootstrap-4

Attempting to grasp the concept of Promises in Angular 2

I have encountered an issue while working with the Google API service and I am stuck at the promise response stage. Here is the code snippet for reference: getPromise: Promise<any>; loadSheets: Array<any>; constructor(public _checkAuthApiServ ...

javascriptangulartypescriptangular-promiseobservable

Can React components receive props or data when they are inserted into regular HTML code?

I have a project where I need to make updates to an old-fashioned website. The current layout is table-based and coded by hand. My idea to streamline the process is to use React to minimize repetitive coding tasks. Specifically, I want to loop through an a ...

javascripthtmlreactjs

CSS designs that adapt with the screen: Triangles in

I'm currently working on creating a responsive triangle using CSS. I want both the height and width of the triangle to adjust as the window size changes. Below is my static code: #triangle { z-index: 2; width: 0; height: 0; position:absolute ...

htmlcss

Updating state with new data in React: A step-by-step guide

Recently, I delved into the world of reactjs and embarked on a journey to fetch data from an API: constructor(){ super(); this.state = {data: false} this.nextProps ={}; axios.get('https://jsonplaceholder.typicode.com/posts') ...

javascriptreactjs

Sending data between components in Angular can be achieved by using various methods. One common approach is to utilize

I am encountering an issue with a component named customers.component Below is the code from the customers.component.ts file: @Component({ selector: 'app-customer', templateUrl: './customer.component.html', styleUrls: ['./cu ...

htmlangulartypescript

use ajax to dynamically append a dropdown menu

Currently working on creating a form that includes a dropdown menu populated with elements from a database. The challenge I'm facing is ensuring that once an element is selected from the dropdown, another one appears dynamically. My goal is to use AJA ...

javascripthtmljqueryajax

Creating Awesome Icons in Kendo Grid with Code In this tutorial, we will learn how to programm

Looking to have a Kendo grid display a green fas-fa-clock icon if isActive is true, and a grey far-fa-clock icon if false. Clicking on the icon should toggle between true and false. Currently, the grid just shows the word true or false in the column. Cod ...

javascripthtmlcssangularkendo-ui

executing various functions while scrolling through the window

I have a layout with main divs containing sub divs, each with specific CSS classes that include images. My single-page website has a lot of images, so I want to implement a window scroll effect. After researching on Google, I couldn't find a suitable ...

jqueryhtmlcss

Problem with javascript querystring code

Currently in the process of writing some vanilla JavaScript code to manipulate query strings without using jQuery. Here's what I have so far: // If there is no viewid in the query string, append it as a new key if (newUrl.indexOf("viewid") == -1) { ...

javascript

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

javascripthtmlcss

jQuery alert: A TypeError was caught stating that the object being referred to does not have the 'dialog' method available

For a few days now, I have been tirelessly searching for a solution to this issue and it has caused me quite a bit of stress. My problem lies in echoing a JQuery popup script within php: echo '<link rel="stylesheet" href="http://code.jquery.c ...

phpjavascript

Is it normal for ASP.NET Control to return null with JavaScript getElementById?

When I am using JavaScript, I encounter the following error during execution: Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object This is the code I am working with: <asp:Content ID="content2" ContentPla ...

javascriptasp.netwebformsgetelementbyid

My Bootstrap/Flexbox layout is not behaving as anticipated. Can anyone identify any issues in my code?

I'm currently working on a MVC website that features a login/signup form. I have been trying to utilize bootstrap to format the forms. My main goal is to center the entire form on the screen, but so far I have only been successful in centering it on t ...

cssbootstrap-4flexbox

Knockout JS cooperates well with Ratchet and push.js, but things take a turn when I incorporate a data-transition

For my mobile web app, I'm utilizing the Ratchet.js/push.js library to create the UI. This library handles links by pushing the to-be-loaded file into the ".content" DOM element instead of loading the entire page. However, a drawback is that push.js d ...

javascriptjqueryhtmlratchet-2push.js

My simple application is experiencing a problem where ComponentDidMount is not being invoked

I used a tool called create-react-app to build this simple application. Strangely, the ComponentDidMount method is never getting invoked. import React, { Component } from "react"; class App extends Component { componentDidMount() { console.log("M ...

javascriptreactjslifecycle

Ways to show that a function is running and causing the DOM to refresh

In my Angular application, I have a page that loads initially. When I click on the "Change" button, it triggers a function: ng-click = "changeFunction()" This function re-evaluates and updates the content of the page, especially in areas like {{textVaria ...

javascriptangularjs

Obtain the window title and the names of all visible application processes on a Mac

Is there a way to retrieve the window title and corresponding process name on a Mac? As of now, I can only grab the window title using AppleScript: tell application "System Events" to get the title of every window of (every process whose visible is true) ...

javascriptnode.jsnpmelectronapplescript