Having trouble aligning certain items.
In thisFiddle, I have two options: Option1 and Option2. I want to align the toggle switches with the ones in the first two rows.
Specifically, I want the toggle switches to be in the second column of the table and the text below them in the first column.
Any suggestions on how to solve this?
Thank you!
Consider moving away from tables and utilizing bootstrap for a more modern design approach. However, if tables are necessary, ensure that the table rows and columns are consistent in structure.
For an example of proper nesting, take a look at this updated fiddle here
<div class="container">
<table class="table table-bordered">
<thead style="" class="">
<tr class="d-flex">
<th class="col-6">My </th>
<th class="col-6"></th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="text-sm-left col-sm-11">some text
</td>
<td class="text-sm-right col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="text-sm-left col-sm-11">some text
</td>
<td class="text-sm-right col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-sm-12">testtexttex :</td>
</tr>
<tr class="d-flex">
<td class="col-sm-11">Option1
<button type="button" class='btn btn-secondary '>
<span class="fa fa-envelope"></span>
</button></td>
<td class="col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-sm-11">Option2
<button type="button" class='btn btn-secondary '>
<span class="fa fa-envelope"></span>
</button></td>
<td class="col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Utilizing Jquery Form for an Ajax image upload. This is the relevant HTML code: <div class="input_con imageupload_con"> <form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm"> < ...
How do I adjust the size of my card's header text? <b-card header = "We are certified data installers" md="5" class="card" bg-variant="dark" style="border-color: rgb(235, 100, 33); font-size: 30px;" ...
Currently, I am developing an application using node.js and handlebars as the view engine. One issue I am facing is that when a form is submitted, it inserts data into the database. The problem arises because the form passes values that are hidden from the ...
I inserted a YouTube iframe code inside a div element. <div id="box"> <iframe width="300" height="315" src="//www.youtube.com/embed/82fn4mcNGJY" frameborder="0" allowfullscreen></iframe> </div> After applying CSS to sc ...
I feel like I'm losing my mind. Currently, I am in the process of designing a section that consists of four photo boxes - two at the top and two below. In order to achieve this layout, I have turned to utilizing Bootstrap. Unfortunately, this parti ...
Is there a way to display my React app file (App.Js) within my Index.html file? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/fav ...
A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...
I am currently working on developing an HTML user interface that enables my users to rearrange or organize the menu items or utilities according to their preference, much like the HOME screens on Android or iOS devices. I am seeking advice on how I can s ...
I have four lists that I want to display side by side. The first row should show a Doctor and Patient side by side, the second row should show a Pharma Company and Employee side by side. However, in my code, this layout is not working as intended. .tree ...
Currently, I am working on creating a navbar using React. In this navbar, I have three components for the menu bar: text, logo, and buttons. The background color of the navbar is set to transparent, while the components are black by default. However, whe ...
Is there a way to customize the chromecast icon within the JWPlayer skin to have a specific color? I've identified that the styles I need to change are --connected-color and disconnected-color when inspecting the element. Despite my attempts through ...
Is there a way to trigger an animation when the value of countAllOrders changes? Specifically, I am attempting to adjust the margin of a list using keyframes in an Angular animation. Here is my HTML code: <ul class="digits" [@ordersValue]=&q ...
Imagine wanting to create a website using only one HTML template. One idea is to have a single view that handles all possible inputs and outcomes, such as when a new object is created by clicking a button and a form appears while the rest of the page remai ...
Currently experiencing an issue with printing an HTML page styled using Bootstrap 4 (Bootstrap 3.3.7 works fine) on Chrome where the header and footer are partly covered up. Take a look at this screenshot to see what I mean - the date, title, and file/url ...
Hi everyone, I could really use some assistance with a project I'm currently working on. As someone who is new to programming, I am facing a challenge. My goal is to showcase the contents of a plain text file on a webpage. This text file, titled titl ...
Within my MVC 4 application, I am experimenting with simulating an XSS attack. The setup involves a button and a text box that simply outputs the entered value. However, when I input <script>alert('xss')</script> into the text box, an ...
I am working on a straightforward app that requires users to provide specific pieces of information in the following format. Kindly input your domain. User: www.google.com Please provide your vast URL. User: www.vast.xx.com Select a position: a) Bottom ...
When I wanted to stretch a background image on my website so that it always fills the available window area regardless of resolution, I initially used background-size:cover;. Unfortunately, Internet Explorer doesn't seem to support valid CSS, so I had ...
I am interested in developing a unique jQuery plugin that can simulate a virtual HTML5 Canvas, where the canvas is not physically larger than its appearance on the page. However, the content intended for display on the canvas may be much larger and will ne ...
I'm in the process of developing a product page and I'd like to implement a feature where clicking on the Buy button triggers a pop-up menu to appear. I've been attempting to use the Checkbox hack to achieve this but have encountered some di ...