Tips for repairing buttons in the CSS container

The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel.
I attempted to utilize z-index, but it did not produce the desired outcome.

https://i.sstatic.net/a7C8Y.png

$('#click').click(function()
{   
    $("#search-box").toggle();     
});
   .panel{
margin-top:60px;
margin-left:30px;
margin-right:30px;
}

.panel-heading{
font-size:30px;
text-align:center;

}

.table-box{
margin-top:30px;
}


   
 #search-box{
height: 200px;
    width: 400px;
    background:red;
    display: none;
    font-size: xx-large;

}

 #seat{
height: 20px;
    width: 40px;
    background:pink;

}
    
<! doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >

<!-- Custom CSS -->
    <link href="custom_css/main.css" rel="stylesheet" type='text/css'>  

  
<!---Font Awesome--->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>


</head>  
  <!-- Body content here... -->

javascriptjqueryhtmlcss

Answer №1

Just get rid of the unnecessary </br> and </div> tags from the child table.

$('#click').click(function()
{   
    $("#search-box").toggle();     
});
   .panel{
margin-top:60px;
margin-left:30px;
margin-right:30px;
}
...
  }
    
<! doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >

<!-- Custom CSS -->
    <link href="custom_css/main.css" rel="stylesheet" type='text/css'>  

  
<!---Font Awesome--->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
...
    <script src="custom_js/main.js"></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

What is the best way to provide an accessible title to an SVG icon using a tooltip in MUI?

When a tooltip is used with an icon button, the button automatically takes on the accessibility name of the tooltip title. This setup, as demonstrated in the documentation example, ensures that a screen reader announces it as "Delete, button", which is ben ...

javascriptreactjssvgmaterial-uiaccessibility

How to Safeguard an AJAX Service Request using jQuery and PHP (with a Session Token)

Currently, I am developing a framework where form submissions are handled through jQuery ajax calls to a .php service file. Here is a snippet of the jQuery code for reference: var dataSerialized = $(form).serialize(); var service = $(form).attr("action") ...

javascriptphpjqueryajaxsession

retrieveSourceData(), postmodification of Handsontable with Vue

How can I use getSourceData() after a change event in Vue? I need to access the instance of Handsontable, but I'm not sure how to do that in Vue. Essentially, I need to retrieve all rows that have been edited. For example: const my_instance = this.$ ...

javascriptvue.jsvue-componenthandsontableref

Dropdown for state selection within WooCommerce for specific countries

I am encountering a challenge in configuring a form with default WooCommerce country and states selection dropdowns. Essentially, my goal is to present the Country selection first, followed by the State selection based on the chosen country. For instance, ...

javascriptphpjquerywordpresswoocommerce

Having trouble choosing an item from the Select2 drop-down menu

I have been developing an application that incorporates Select2 (version 3.5.1). The HTML used to create the dropdown / autocomplete field is as follows: <input id="mySelect" class="form-control" type="hidden"> The snippet above includes the form-c ...

javascripthtmljquery-select2

What is the method for obtaining an element with a class name that does not match a specific value?

I'm trying to figure out how to select an element with a class name that is different from the value passed in. For example: $(document).ready(function () { $(document).on('change', '#allRolesDD', function () { var toS ...

javascriptjquery

SPFx WebPart - Tabbed Interface

I am new to developing SPFX WebParts and currently working on creating a Tab WebPart. The HTML appears to be rendering correctly, but I'm facing issues with the Javascript functionality not firing as expected. Any assistance or guidance on how to prop ...

javascriptjquerysharepoint-onlinespfxspfx-extension

One source of HTML content for a div element across multiple webpages

Could you please provide guidance on where to start investigating or researching for this issue? I am interested in having a single source for the content of a <div>, which can be used across multiple pages. This way, I can update one source and hav ...

jqueryhtml

Trouble with the functionality of the Bootstrap collapse button

I am facing an issue where clicking on the collapse button does not trigger any action. I have tested it on both of my laptops, ruling out any problems with the web browser. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

jqueryhtmlcsstwitter-bootstrap-3

Switch the URL to render the view using Express 4

I am facing an issue with a post request where the views are rendering to /link/123 instead of /anotherlink. Although I could use res.redirect('/anotherlink'), I need to render different data. app.post('/link/:id',function (req, res, n ...

javascriptnode.jsexpress

Please confirm the modal by adding a textarea with a newline in SweetAlert2

Every time I attempt to add a line break in the textarea input field, the modal pops up. I have tried adding these lines of code as well, but nothing seems to be working: allowEnterKey: false, focusConfirm: false, Does anyone have any advice for solving ...

javascriptjqueryhtmltextareasweetalert2

Taking on The Notch: How Can I Improve?

I'm currently working on a website for my friend's bar, but I'm facing an issue with Chrome where the content can't push past the "notch". Interestingly, Safari displays it fine on mobile, while Chrome has this unsightly white space. I ...

htmlcssiosgoogle-chromemobile

What is the process for configuring sendmail in a node.js environment?

After setting up Sendmail on my Nginx server and configuring SMTP for sending emails in my Node.js project, I still encountered issues with emails not being sent. I tried using Sendmail directly, but I'm unsure of how to properly configure it. Here i ...

javascriptnode.jsnginxsendmail

Instructions on retrieving an element inserted through an ajax response

I've encountered an issue with the following code: $(document).ready(function(){ $('#dl-cat').mouseenter(function(){ $.ajax({ type: "POST", url: "../control/Controlador.php", data: {lang: $('html'). ...

ajaxjquery

The Click Event Is Triggering Even with Correct Callbacks Being Set

I am struggling to understand why these functions are not executing properly. I know the correct syntax for binding a function, like this: $('#idOfThing').bind('click', foofunc); function foofunc() { ///do things } However, I am facin ...

javascriptjqueryjquery-callback

Introducing an exception to every jQuery post() method

Our app utilizes AJAX with jQuery to manage user information. We determine the success or failure of an API call by checking data.success or data.error respectively. Additionally, we implement the jQuery error() function in each post() method to handle any ...

jqueryajax

An in-depth guide on incorporating an Editor into a Reactjs project

Currently, I am working with Reactjs and using the Nextjs framework. My goal is to integrate the "Tinymce" editor into my project and retrieve the editor value inside a formsubmit function. How can I achieve this? Below is my current code: const editor = ...

javascriptreactjsnext.js

The object in three.js disappears from the scene but remains visible

I am attempting to showcase text as a sprite in three.js and aim to move the sprite along with an object. I achieve this by utilizing a canvas to generate a texture, which is then mapped using SpriteMaterial to create a sprite from it. However, when I remo ...

javascripthtmlthree.js

Choose the data attributes you want to include and attach them to input elements using plain JavaScript

Creating a User Information form with a select element containing four options, each with data attributes. Under the select are input types to populate the data attributes when selected. Looking for help in achieving this using plain JS and onchange event. ...

javascripthtml

What is the best way to shade the background when a hyperlink is pressed?

I am currently working on customizing the navigation bar for my website. My navbar consists of five elements, and I want to make an element appear darker when it is clicked. Here's what I have attempted so far: Utilizing jQuery to modify the ac ...

phpjqueryhtmlcssnavbar