Various options can be chosen to alter the margin

$('#cpseltop').change(function() {
var a = $(this).val();
$('.cpselhide').hide();
$('#cpsel' + a).show();
});
.cpselect{
display:block;
border:1px solid #999;
border-radius:9px;
outline:none;
width:100%;
padding:2px 5px;
cursor:pointer;
font-size:12px;
margin:7px auto;
text-transform:uppercase;
}

.cpselauth, .cpselmoder{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='cpselect cpseltop' id='cpseltop'>
<option value='status'>STATUS</option>
<option value='auth'>AUTHORS</option>
<option value='moder'>MODERS</option>
</select>

<select class='cpselect cpselstatus cpselhide' id='cpselstatus'>
<option value='all' data-max=54>ALL</option>
</select>

<select class='cpselect cpselauth cpselhide' id='cpselauth'>
<option value='all'>ALL</option>
</select>

<select class='cpselect cpselmoder cpselhide' id = 'cpselmoder'>
<option value='all'>ALL</option>
</select>

Selecting AUTHORS and MODERS causes the margin between cpseltop and the next dropdown to increase compared to when I select STATUS!

What is the reason behind this behavior?

javascripthtmlcss

Answer №1

The challenge you are currently experiencing is related to margin collapsing, particularly when the Status is selected. In this scenario, the select tag that follows the main one is displayed with a display:block, causing its margin to collapse with the adjacent element. However, for the other select tags, they retain a display:inline-block property, preventing their margins from collapsing with the first one.

To resolve this issue, you can opt for either top or bottom margin exclusively or modify the style of .cpselect by setting it to display:inline-block:

$('#cpseltop').change(function() {
var a = $(this).val();
$('.cpselhide').hide();
$('#cpsel' + a).show();
});
.cpselect{
display:inline-block;
border:1px solid #999;
border-radius:9px;
outline:none;
width:100%;
padding:2px 5px;
cursor:pointer;
font-size:12px;
margin:7px 0;
text-transform:uppercase;
}

.cpselauth, .cpselmoder{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='cpselect cpseltop' id='cpseltop'>
<option value='status'>STATUS</option>
<option value='auth'>AUTHORS</option>
<option value='moder'>MODERS</option>
</select>
<select class='cpselect cpselstatus cpselhide' id='cpselstatus'>
<option value='all' data-max=54>ALL</option>
</select>
<select class='cpselect cpselauth cpselhide' id='cpselauth'>
<option value='all'>ALL</option>
</select>
<select class='cpselect cpselmoder cpselhide' id = 'cpselmoder'>
<option value='all'>ALL</option>
</select>

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

How can I fix the issue of clearInterval not functioning properly in an Electron JS application?

The clearInterval function is not working properly in this code. What can be done to fix this issue? var inter; ipcMain.on("start-stop",(err,data)=>{ console.log(data.data) function start(){ inter = setInterval(fu ...

javascriptnode.jselectron

CSS Dynamix - Include the parameter ?value to resolve caching issues

I came across a discussion on the issue of Dynamic CSS caching problem where it was suggested to append ?value to the end of the css file name for better caching. I am currently using themes and the css files are loaded automatically. Is it possible to use ...

csscachinghttphandler

Enhancing the visual appeal of HTML code in "view Source" by injecting it using a System.Web.UI.WebControls.Literal

I am currently placing code within a literal in the following manner. ImageItem.Text = string.Format("<div class=\"thumb\"><img src=\"{0}\" width=\"132\" height=\"99\" /><a class=\"more\"> ...

.nethtml

submit content to an iframe on a separate webpage

Work has been a challenge for me lately as I try to achieve a specific task. The starting page features a textbox and a button. My goal is to post the value entered in the textbox to an iframe on a different web page called iframeholder. The catch is tha ...

htmlpostiframe

Issue with sending files to web API using Angular FormData

After stepping through the code, I noticed that my formData is empty when it reaches the API side, with the parameter pFileToUpload having a value of null. Step 1: HTML <div class="form-group"> <input type="file" id="f ...

c#htmlangularapi

Using Chrome in Application Mode with Shortcuts Disabled

When trying to utilize Chrome in application mode as a host for an HTML5 application, it becomes evident that there are significant limitations. For instance, pressing CTRL+T launches a new Chrome browser window, allowing the user to input text into the a ...

htmlgoogle-chrome

Retrieve all items on the webpage using the pattern "_ followed by 10 random characters" through JavaScript

On my webpage, there is a table containing table rows in the following format: <tr id="_C15DKNWCSV">text</tr> I am attempting to scan the webpage and extract all table rows that have an id in the format: id="_(10 RANDOM CHARACTERS)" I want ...

javascripthtmlarraysobjectjquery-selectors

Retrieve the temporary file path using JavaScript/jQuery

Here is the code snippet: <div> <label class="control-label" for="Name">Add XML</label> </div> <div> <input id='upload' name="upload[]" type="file" accept=".xml"/> </div> <script src="//c ...

javascriptjquery

Send the user to an Angular route once they have successfully authenticated with Google

I'm facing an issue with redirecting users to an Angular route. Here's the scenario: When I'm on the login page and click on Google login, I get redirected to Google for authentication. After successfully logging in, I want to be redirecte ...

javascriptnode.jsangularexpress

Tips for looping through nested JSON data in Google Sheets

In my attempt to iterate through the nested "line_items" element in a JSON response triggered by a post event, I aim to populate a Google Sheets spreadsheet using Google Apps Script. My objective is to write the elements within each "line_item" into new ro ...

javascriptgoogle-apps-scriptgoogle-sheets

Conducting various calculations and showcasing them all on a single webpage

Uncertain about what to name this, but let's see if you understand my question. I have a table on a standard HTML page and I am performing some calculations using Javascript/jQuery. Example: function addThem() { var result; result = userIn ...

javascriptjqueryhtml

Determining the percentage of a bar in d3.js when hovering over it

I am working with a d3 chart and looking to implement a tooltip feature that displays the label of the bar section along with the percentage it represents in relation to the total bar. Initially, I considered calculating the height of the hovered section t ...

javascriptd3.js

Modify the color of the text to be white

How can I modify the code below to change the text color to white? The original code is inspired by this question. I am unsure about how the text color was originally set to blue. .footer-background { padding-top: 20px; padding-bottom: 20px; bac ...

htmlcsstwitter-bootstrap-3

React does not support having two :focus selectors on a single JSX element

I'm working with a React script that includes a specific element. I want to apply more than one :focus-within selector in CSS, but for some reason only the dropdown selector is being expressed when I focus on the element. Here's the code: React J ...

htmlcssreactjsflexboxfocus

Ways to adjust the dimensions of an SVG icon in a React application

Trying to figure out how to display an SVG icon and text on the same line in React and Next.js. After some research, I've managed to achieve it. However, I'm struggling to control the size of the SVG icon in relation to the text. Ideally, I want ...

cssreactjssvgnext.js

Avoid automatic background resizing to match the full width of the header text

I've been trying to use CSS to style my <h1> element in a specific way, but it seems the default browser behavior is getting in the way: Despite my efforts, the browser continues to display it like this: Anyone have any suggestions on how I ca ...

htmlcss

Display error page when unable to load ng-view template

Is there a way to display a standard error page or template if a certain template cannot be loaded using ngRoute in Angular? I've come across suggestions that subscribing to the $routeChangeError event might help, but I'm not sure what steps to ...

javascriptangularjsngroute

What is the best way to display input fields only if the previous input has a valid value?

My challenge involves creating a form with 3 to 10 text input fields. Initially, the form will display only 3 inputs (minimum). I am looking for an efficient way to dynamically show additional input rows as each previous row is filled out with a valid val ...

javascriptjqueryformsloops

Rendering elements dynamically using ng-repeat following an AJAX request

Feeling frustrated, I made an $http request ApiService.get_request_params("api/endpoint").then( function(data) { $scope.customers = data }, function(err) { } ); The $scope.customers should be bound to an ng-repeat. I can see the ...

javascriptangularjsajax

Determining the true width of a span element using jQuery

I am trying to determine the actual width of a span element within a div, but when I attempt to do so, it gives me the width of the entire div instead. Here is the code I am working with: <div class="content"> <span class="type-text" id="ta ...

jqueryhtmlcss