https://i.sstatic.net/f1C0G.png
Hey there,
I'm looking to achieve a layout similar to the one shown in the image. Specifically, I want the left side panel to remain unchanged when expanding the Accordion control on the right side. Can someone guide me on how to implement this? Thank you!
Make sure to use the legend and fieldset tags within your form.
To structure your form, utilize the .row class as the parent of col-6 and include the form tag inside.
For additional information, check out this link
Here's an example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-6">
<form>
<fieldset class="border p-2">
<legend class="w-auto">Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
</fieldset>
</form>
</div>
<div class="col-6">
<form>
<fieldset class="border p-2">
<legend class="w-auto">Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
</fieldset>
</form>
</div>
</div>When setting up the left side panel, I experimented with some code that ended up working as expected.
<!--First row starts here-->
<div class="row" style="padding-bottom:8px;margin-left:-350px;font-family:arial;font-size:15px;">
<div class="col-sm-2 required;">
<label>
col 1
</label>
</div>
<div class="col-md-4 required">
@Html.TextBoxFor(c => c.FormCode, new { id = "formcode", @class = "txtboxclass1" })
</div>
</div>
<!--First row ends here-->
I then encountered an issue trying to align Expand 1 and Expand 2 columns properly. Despite modifying the code as shown below, clicking the expand button caused the left side controls to shift downward. How can I correct this?
<!--First row starts here-->
<div class="row" style="padding-bottom:8px;margin-left:-350px;font-family:arial;font-size:15px;">
<div class="col-sm-2 required;">
<label>
col 1
</label>
</div>
<div class="col-md-4 required">
@Html.TextBoxFor(c => c.FormCode, new { id = "formcode", @class = "txtboxclass1" })
</div>
<div id="dvAccordian">
<div class="col-sm-2 required">
<a href="#">Template Code</a>
</div>
<div class="col-md-4 required">
<aClick Here</a>
</div>
</div>
</div>
<!--First row ends here-->
I'm facing an issue with the code I have for searching on my website. Currently, when a user fills in their search word and presses enter, it executes the command. However, I would like to only run the search script when the user clicks a button inste ...
I am currently utilizing this resource to create a gallery of images on my Rails page. Here is the HTML code required to display the images: <a href="assets/gallery/ave.jpg" title="Ave" data-gallery> <img src="assets/gallery/ave_tb.jpg" alt="Av ...
I am experimenting with CSS Grid and running into issues with overlaying content. The structure consists of a top-level container defined as a CSS grid (class="container"), followed by a content grid (class="content") that divides into 3 rows (header, labe ...
I am having trouble using <p/> or <br/> tags to create new lines after a custom ReactJS component that includes Bootstrap CSS with <div className="col-sm-10">. var MyChatClientView = React.createClass({ render: function() { retur ...
I am trying to retrieve the content of a string that I have imported using HTML from within another script. To include the text file in question in the html file: <script src="shaders/fragmentshader.fs" id=fragmentshader></script> After impo ...
I'm working with a bootstrap button <button class="btn btn-primary">Login</button> My goal is to change the cursor to a pointer (hand) on this button when it's not disabled, instead of the default arrow. The disabled property of th ...
I'm in the process of testing a .NET web application with various user agents such as iPhone, iPad, and Android. I've decided to use NUnit and Selenium for the testing. Does anyone have a code snippet in C# or VB that demonstrates how to change t ...
Can data be extracted from a poorly written HTML file without IDs or classes? For example, if there is an unstructured saved HTML file of a profile webpage and I want to extract specific information like 'hobbies', can PHP be used for this task? ...
Is there a way to retrieve the transformation matrix of a DOM element similar to how we can do it with canvas context? Does the DOM provide a getTransform() method for this purpose? ...
I am currently working on designing a mock-up website using CSS codes. If you want to see the mock-up website, you can visit: Here is the specific list I am referring to: https://i.sstatic.net/HA3fC.jpg This is the expected outcome: https://i.sstatic.ne ...
I am attempting to position two divs next to each other. The initial one is 200x200 pixels and the second one should be positioned 10 pixels to the right of the first one. The second div has a height of 200 pixels, and its width needs to extend all the way ...
Upon testing Firefox 5, it has come to my notice that an additional pixel of space is being added between the right column and the table border due to this particular piece of code: <style type="text/css"> table { border: 1px s ...
Currently, I'm in the process of developing a form with multiple steps. At each step, when the next button is clicked, I need to validate the active step page using the map function. My goal is to utilize the map function to validate every input and ...
I am facing an issue with my layout where I have 2 columns, one containing some inputs and the other only a textarea. The problem is that I want the textarea in the second column to extend and fill the remaining height of the first column, but so far I hav ...
Everything on my e-commerce website is functioning perfectly, except for the checkout page. After the customer fills in the bill details, they should be able to place an order. The issue I am facing is that while I am able to retrieve and store the bill d ...
align-content and justify-content don't appear to be working when I test them in both Chrome and Firefox. I'm puzzled as to why they're not functioning as expected. #container { display: flex; flex-wrap: wrap; justify-content: cent ...
Within this JSON array, there is a plethora of person data, each with their own specified type such as "hr" or "accounting". The structure of the JSON array is depicted below: { "0": { "id": "2", "name": "blabla", "type": "hr" ...
How can I correctly check the value of the first tag in a JSON object? Below is my attempt: JObject o = JObject.Parse(@response); switch (o.First.ToString()) { case "players": { //do something } case "errors": { ...
I have successfully added 3 print buttons to my website, each one designed to print a specific portion (div) of the webpage. Here is the code snippet for this functionality: function printPage(id) { var html="<html>"; //html+="<link rel="st ...
The 'quickstart' guide provides a comprehensive overview of using id and class css selectors within the html code. In order to link the map object to a specific div element, a target is required as an argument for the map object. This target val ...