Creating a CSS binding for width: a step-by-step guide

I have a complex layout with multiple elements in different divs that need to be aligned. Hardcoding the width or using JS on page load to specify values in pixels both seem like messy solutions. How can I achieve this without causing a zigzag effect?

Here is the desired result, achieved by hardcoding width: 30%:

Markup:

<div class="panel-body">
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_patchSize</span>
        <input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.PatchSize" initial-value="@Model.Custom.PatchSize" value="@Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Restore" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Clear" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_scanInterval</span>
        <input id="sourceObserver_scanInterval" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ScanInterval" initial-value="@Model.Custom.ScanInterval" value="@Model.Custom.ScanInterval.RenderIfNotEqual(Model.Default.ScanInterval)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Restore" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Clear" />
        </span>
    </div>
    ... (other elements)
</div>
htmlcsstwitter-bootstrap

Answer №1

Here is a straightforward way to adjust the layout with some CSS:

.input-group {
    display: table-row;
}

For instance:

.panel-body {
    border-spacing: 0 1em;
}
.panel-body:before,
.panel-body:after {
    display: none !important;
}
.input-group {
    display: table-row !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-body">
   <!-- Code examples and styling here -->
</div>

Bootstrap introduces pseudo-elements :before and :after on .panel-body, causing extra spacing with border-spacing. Hiding these elements can resolve the issue.

The usage of !important in the provided example was solely for demonstration purposes. In general, it may not be required if your custom styles are loaded after Bootstrap's styles.

Answer №2

If you're looking to achieve a specific design effect, I recommend leveraging the properties of a table element. This approach can also be easily customized for responsive web design.

div.table{
  display: table;
}
div.table div.tr{
  display: table-row;
}
div.table div.tr div.td{
  display: table-cell;
  padding-top: 10px;
}
div.table div.tr div.td div.label{
  background-color: lightgray;
  padding: 10px;
  border: 1px solid gray;
  border-radius: 5px 0 0 5px;
}
div.table div.tr div.td div.value{
  background-color: lightgray;
  padding: 10px;
  border-width: 1px 1px 1px 0;
  border-style: solid;
  border-color: gray;
}
<div class="table">
<div class="tr">
<div class="td">
<div class="label">sourceObserver_patchSize</div>
</div>
<div class="td">
<div class="value">value</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="label">...</div>
</div>
<div class="td">
<div class="value">...</div>
</div>
</div>
</div>

Answer №3

To achieve this desired outcome, you can utilize a monospaced font, set white-space: pre, and add padding to the span elements with spaces up to the longest one.

Here is an example:

<style>
    .input-group-addon {
        white-space: pre;
        font-family: "Courier New", Courier, monospace;
    }
</style>

<div class="panel-body">
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_patchSize          </span>
        <input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.PatchSize" initial-value="@Model.Custom.PatchSize" value="@Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Restore" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Clear" />
        </span>
    </div>
    // more code here
</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

Top-notch Bootstrap 5 navigation bar featuring a centrally aligned brand logo and a sleek dropdown menu

I'm currently working on designing a responsive navbar using Bootstrap 5. My goal is to have the brand text centered along with an icon that includes a dropdown menu, all while ensuring it does not collapse in mobile view. Here's the code I&apos ...

twitter-bootstrapnavbarbootstrap-5

Troubleshooting: SVG Icon Fails to Appear in Bright Theme Due to CSS

My HTML is structured like this. <h2 class="mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0" id="know-your-life"> <a aria-hidden="true" tabindex="-1" href="#know-your- ...

csstailwind-cssshadcnui

The Image Slider functions smoothly in Chrome, but encounters issues in IE11

Here is a link to the code I've been working on: http://jsfiddle.net/wf32jbhx/ I attempted to host images on my SharePoint site, but they ended up stacking on top of each other instead of formatting properly. Oddly enough, everything appears fine in ...

htmlcssgoogle-chromesharepointinternet-explorer-11

"Utilize Bootstrap's responsive 3-column grid layout for a sleek design, complete with hidden col-12 elements below each grid

Looking to create a 100% width column below an element within a column of a bootstrap grid. For better understanding, here is what I'm aiming for: https://i.stack.imgur.com/pl1Fi.png On selecting one of the images (from 1 to x), a hidden div with di ...

htmltwitter-bootstraptwitter-bootstrap-3grid

Issues arising with VueJS array props when integrating Bootstrap

I am attempting to display two divs next to each other while iterating through props (which are essentially an array) in VueJS. When I have just a single element, everything functions properly. However, as soon as I include the v-for directive, the element ...

javascripttwitter-bootstrapvue.js

The descendant selector in CSS fails to apply changes to the element

I am struggling to modify the border of a specific descendant element and so far I have not been successful. Despite using the correct descendant selector in the HTML below, the style change is not taking effect. If anyone has any insights on what could be ...

htmlcss

What are the steps to incorporating the League Gothic font into my website design?

Is there a way to incorporate League Gothic font into my website design? Visit the League Gothic GitHub repository Appreciate any guidance on this matter, ...

htmlcssfonts

Can I retrieve the element of any DOM element I'm currently hovering over using JavaScript?

Suppose I have this HTML snippet: <body> <div id="1"> <span class="title">I'm a title!</span> </div> <div id="2">I'm the first element!</div> <div ...

javascripthtmlhoverevent-listener

How can I dynamically update the content of the right side of the side navbar by clicking on navbar links?

I have a side-navigation bar with content on the right side. How can I display specific content on the right side when clicking on a navigation link? For example, only show the name when clicking on the name link and only show the password field when click ...

javascripthtmlcssbootstrap-5

issue arising where the table's border is not displaying

I'm confused about why the border of the first tbody tr's td is not visible. https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up. Here's what I've figured out: If the natural height of th ...

csshtml-tableborder

The error form is not responding even after attempting to locate the issue

I have created a form and it was working fine, but now when I click on the submit or reset buttons, nothing happens. I've checked my code thoroughly line by line, but can't seem to find the issue. I even tried restoring previous versions, but no ...

htmlangular

Change the type of field from a div to an input when clicked

I'm trying to achieve something unique with a div on my webpage. When the user clicks on it, I want the div to transform into an input field. Initially, the div looks like this: <div>This is the content.</div> But when clicked, I want i ...

htmlangularjs

Unable to achieve full width for a div within a scrollable container

Currently, I am in the process of constructing a new website using Gatsby.js. However, I have encountered a minor issue with some CSS related to code blocks. Since CSS is not my strong suit, I have been unable to resolve it thus far. Below is a runnable sn ...

htmlcss

What is the best way to identify the full URL along with the querystring?

While using a web application on Firefox, I encounter an issue where clicking on a button redirects me to a different page and processes query string parameters that are hidden in the URL. Can anyone suggest tools that can help me identify these query str ...

htmlurlpostget

Bootstrap Dropdown Functionality Malfunctioning

Here is a simple piece of HTML code that I have created: <!doctype html> <html> <head> <meta charset="utf-8"> <title>.:Home Page:. The Indian Sentinel</title> <link rel="stylesheet" href=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for entering text into the redactor editor with selenium IDE

The redactor editor's HTML structure is as follows: <div class="redactor_text redactor_optional redactor_editor" contenteditable="true" dir="ltr" style="height: 373px;"> <p>dummy text​</p> //This is where the text inputted into ...

htmlseleniumide

Retrieve and modify the various elements belonging to a specific category

I'm currently developing a chrome extension and I need to access all elements of this specific type: https://i.stack.imgur.com/sDZSI.png I attempted the following but was unable to modify the CSS properties of these elements: const nodeList = documen ...

javascriptcssgoogle-chromegoogle-chrome-extension

Parsing HTML to access inner content

Currently, I have integrated an onClick event to an anchor tag. When the user interacts with it, my objective is to retrieve the inner HTML without relying on the id attribute. Below is the code snippet that illustrates my approach. Any assistance in acc ...

javascripthtml

Using JavaScript to create a search bar: Can "no results found" only show after the user has completed typing their search query?

How can I ensure that the "no match" message only appears after the user has finished typing in their search query, rather than seeing it while they are still typing "De" and the list displays "Demi"? usernameInput.addEventListener("keyup",function(){ ...

javascripthtmlcssdom-eventsdisplay

Storing HTML labels in an array using a jQuery selector in JavaScript can be a

My code snippet in HTML looks like this: <p style:"text-align:center"><label>Question1</label></p> <p style:"text-align:center"><label>Question2</label></p> <p style:"text-align:center"><label>Qu ...

javascriptjqueryhtmljquery-selectors