Tips for adjusting the dimensions of "Graphics" to be just right

The spacing between the length and width of the figure needs to be adjusted properly. However, I am facing some challenges in achieving a smooth result.

I am looking for equal distance between "tr" and "th" elements, similar to this example:

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

Currently, there is inconsistency in the spacing between graphics.

Could someone please provide guidance on how to achieve this?

Below is the code snippet where the width spacing between items seems incorrect:

fieldset.scheduler-border {
  border: solid 3px #000000 !important;
  padding: 10px 10px 10px 10px;
  border-bottom: none;
}

legend.scheduler-border {
  width: auto !important;
  border: none;
  font-size: 36px;
}

tr {
  display: block;
  margin: 1px 0;
}
<form>
  <fieldset class="scheduler-border">
    <legend class="scheduler-border"> Test </legend>
    <table id="ConnectionMonitorTable">
      <thead>
        <tr>
          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect> />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>

          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
        </tr>
        <tr>
          <th width="50%">
            <svg width="150" height="100">
                            <rect  width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
        </tr>
      </thead>
    </table>
  </fieldset>
</form>

Your assistance is greatly appreciated!

htmlcss

Answer №1

To tackle this issue, my preferred method involves utilizing CSS Grid. Each block is enclosed within a div wrapper, and I've established some fundamental grid guidelines. I opted for auto placement in the grid layout by referencing this resource. By using grid-gap, there is guaranteed spacing of at least 30px between grid children. If the viewport is exceptionally wide, the gap will adjust accordingly. The potential of CSS Grid in managing layouts like these becomes evident.

.item-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  …
}

Demonstration

fieldset.scheduler-border {
  border: solid 3px #000000 !important;
  padding: 10px 10px 10px 10px;
  border-bottom: none;
}

legend.scheduler-border {
  width: auto !important;
  border: none;
  font-size: 36px;
}

.item-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  padding: 0 30px 15px;
}

.item-container .item:not(:first-child) {}
<form action="">
  <fieldset class="scheduler-border">
    <legend class="scheduler-border"> Test </legend>

    <div class="item-container">
      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

    </div>

  </fieldset>
</form>

Check out the demo on jsFiddle

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

Tips for extracting HTML tags exclusively from a string

Looking to extract an HTML tag from a string using jQuery (or regular JavaScript)? Here's an example: var htmltag = "<table><tr><td>sample text</td><td><input type='submit' value='Click'/></ ...

jqueryhtml

Using jQuery to remove the 'active class' when the mouse is not hovering

I recently came across this amazing jQuery plugin for creating slide-out and drawer effects: However, I encountered a problem. I want to automatically close the active 'drawer' when the mouse is not hovering over any element. The jQuery plugin c ...

jquerycssjquery-plugins

Retrieving JSON data with Typescript

https://i.sstatic.net/i5vFM.jpg I recently received some data from a request, expecting to return a JSON object that I can utilize in HTML. However, upon running console.log(this.data); I noticed that there are 20 elements in the articles array, but it ...

htmlcssjsonangulartypescript

Incorporating dynamic content changes for enhanced user experience can be achieved more effectively with AngularJS

I am utilizing a REST service to retrieve information for a banner. The goal is to dynamically update the slider on the main page using this data. Currently, I am using $http.get to fetch the data, and then implementing interpolation with additional ng-if ...

javascripthtmlangularjsinterpolation

To emphasize code in an HTML document, you can use the <font color="#xxx"> tag

Can anyone guide me on how to add color highlights to my HTML code in this way? <font color="#1773cc">#include </font><font color="#4a6f8b">&lt;NTL/ZZ.h&gt;</font><br> <br> <font color=&quo ...

htmlhighlight

Apply the transition property to all elements except for the text inside a specific tag

I'm wondering if it's possible to apply a hover transition effect to everything in this tag except the text within it. The desired effect is for the button to fade away while the text remains visible. Below is the code I have written so far: ul ...

htmlcsstransition

Is the value returned by getTime in the format of day-month-year?

I assumed that the input type="date" would display Day-Month-Year format. I'm trying to figure out how to calculate the difference in days based on the input above. Am I making this too complicated? function combinedDate() { (getDate(), getMonth( ...

javascripthtmlformsdate

Using Javascript to retrieve a variable and dynamically updating the source of an HTML iframe

I have two JavaScript variables, 'long' and 'lat', in the code below. My challenge is to append these values to the end of the iframe URL. I would appreciate assistance on modifying the code below to achieve this. The iframe code bel ...

javascriptjqueryhtmliframe

Use jQuery to swap out every nth class name in the code

I am looking to update the 6th occurrence of a specific div class. This is my current code <div class="disp">...</div> <div class="disp">...</div> <div class="disp">...</div> <div class="disp">...</div> < ...

javascriptjqueryhtmlcss

The synchronization of data from $resource to be called from HTML is not functioning properly

Inside the controller, I am able to print the array returned by vm.getProduct(). However, this array is not available in the HTML section. Resource: var DataProvider = function ($resource) { return $resource('&apo ...

javascripthtmlangularjs

Upon including the enctype attribute as "multipart/form-data" in my form and submitting it, the form redirects to a different page

My website has two main pages: The first page is admin.php <?php session_start(); if (!isset($_GET['page'])){ $_GET['page'] = 'home'; }//end if include_once(dirname(__FILE__)."/function.php"); ?> <?ph ...

phphtmlmysql

Elements in Bootstrap Container class failing to align properly

Hello Everyone, I am attempting to achieve the same layout as demonstrated in [original image] where the "browse collection" div and the "request brochure" div are aligned with the four items above them. My approach involves using Bootstrap, and I assume ...

htmlcsstwitter-bootstrap

Using JavaScript to dynamically insert HTML content and create a toggle effect

Within a div, I have a collection of large images that I am attempting to insert into another div using JavaScript toggle functionality. Please test the code snippet provided below. $(".toggleimages").on("click", function(e) { e.preventDefault(); ...

javascriptjqueryhtml

Is it possible for a jQuery selector to retain its object? What can be done to prevent it

One interesting scenario involves a dropdown element within a container. <div class='container' /> <script> var dropdown = "<select class='multi-dropdown'> ... </select>" </script> Every time the value ...

javascriptjqueryhtmldom

using a different path variable within an href attribute

<a id="m1" class="audio {autoPlay:false, addGradientOverlay:true}" href="MusicFolder/" + document.getElementById("DropDownList1").value + "/" + document.getElementById("DropDownList2").value>document.getElementById("DropDownList2").value</a> ...

javascripthtmlasp.net

Trouble with CSS navigation

Hello! In Dreamweaver, I have completed the design for my navigation bar. Here is how it looks: However, when I view it in Firefox, the navigation appears all jumbled up. It's quite frustrating... Below is the code that I'm using: #navbar { ...

jqueryhtmlcss

Are there occasional issues with the proper functionality of Bootstrap modals?

I have encountered an issue with a modal I created for my website using Bootstrap v3.3.2. Occasionally, when triggered, the modal appears but the contents within it do not display properly. It seems to be empty, showing only the background of the modal. ...

htmltwitter-bootstrapbootstrap-modal

Center or left-align the divs

Can anyone offer assistance with this section of code? HTML: <div id="holder"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div> ...

htmlcss

I am encountering an issue with my asp gridview that needs to be resolved

My goal is to display my emails in a Grid view, but unfortunately I keep encountering an error without knowing the reason behind it. I have included the following code snippet to insert my grid view, but every time I attempt to run it, I face failure. &l ...

c#asp.nethtmlgridview

What is the best way to create a sidebar that remains open without triggering a new sidebar every time it is clicked

I am looking to add a sidebar that opens a new view without navigating to a different page. The sidebar remains consistent and I want to avoid duplicating it on all pages. Check out this photo for an example. My goal is to provide additional content or fe ...

javascripthtmlcsssidebar