Place checkboxes adjacent to newly added choices

Currently, my HTML code looks like this:

<label name="diet" for="">Diet:</label>
  @foreach($diets as $diet)
      <p> {{ $diet->titel }} </p>

      <input type="checkbox" id="diet[]" for="diet[]" name="diet[]" value="{{ $diet->id }}" class="dieet{{ $diet->id }}">

As for the CSS code:

#form_new_recipe

    {
        margin: 0 auto;
        max-width:min-content;
        color: white;

        label{
            display: block;
        }

        input, textarea{
        margin-top:20px;
        margin-bottom:20px;
        display: block;
        }

        input[type="text"], textarea{
            margin-top:20px;
            margin-bottom:20px;
            display: block;
            width: 600px;
        }
    }

My query is: How can I align my checkboxes next to the options added? (Working with a backend developer on this)

Additionally, I'm looking to align the added options horizontally next to each other (to some extent).

Answer №1

<label type="tag" for="">Tag:</label>
  @foreach($tags as $tag)
<label><input type="checkbox" id="tag[]" for="tag[]" name="tag[]" value="{{ $tag->id }}" class="tag{{ $tag->id }}">{{$tag->name}}</label>

Is this what you're looking for? The label is displayed next to the input and it's clickable too.

Answer №2

Success!

    <label name="menu" for="">Menu:</label>
  @foreach($menus as $menu)
  <input type="checkbox" id="{{$menu->name}}" value="{{ $menu->id }}" ><label for="{{$menu->name}}">{{$menu->name}}</label>  

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

Green and red values hovering within the keyframe

Currently, I'm facing a dilemma involving keyframes. I have a table populated with values retrieved from a JSON fetch and need to implement a hover effect where values less than 5 show in red, while those equal to or greater than 5 appear in green. Be ...

Visual Studio Code version 1.42 is now automatically converting <br> tags to <br /> when formatting code

This issue just started occurring. I'm not exactly sure what triggered it, but it could be related to my attempt to activate the Preitter extension. As a newcomer to Visual Studio Code, I am currently working on HTML5 documents. Strangely, whenever I ...

Place the HTML onto a fresh page

After rendering a control in asp.net code and converting it to HTML on a button click, the next step is to transfer the HTML to a new page in order to display all the information it contains. Is there a specific control in asp.net that can be utilized in ...

Angular is encountering a CORS issue with the "No Access-Control-Allow-Origin" error when trying to access a CSS file

Currently, in my Angular 5 application with a Web API back-end, my main goal is to reference a CSS file on a production server. I'm facing a cross-origin issue when trying to access the CSS file hosted on the IIS server website. Even though CORS is e ...

Having trouble changing a CSS property (margin-right)?

I have created a simple HTML list that consists of various items: <div id="menu"> <ul> <li>apples</li> <li>&#149</li> <li>bananas</li> <li>oranges</li> <li>grape ...

Concealed Button in Javascript

I've got a JavaScript function that effectively hides a link or button for a specific period of time. JavaScript: <script type="text/javascript"> function showNextButton() { document.getElementById("nextbutton").style.visibility = " ...

Elements positioned absolutely using the ::after and ::before pseudo-elements do not adhere to the very bottom of the body

Feeling a bit crazy right now! Haha. I'm facing a challenge in positioning an image at the bottom of a webpage. It seems to work fine when the page width is larger, around 1360px, but as soon as I shrink it to 1206px or less, the image gets pushed up, ...

Displaying jQuery content tabs with excessive whitespace visible

My project utilizes a jQuery content tab plugin featuring 6 tabs with different content sections (Company, The founders, Team, Accolades, Careers, Philosophy). I am encountering an issue in Chrome where clicking on the Company tab after any other tab res ...

Retrieve the selected options from the checkbox and transfer them to the input text field

In the following example, I am attempting to extract all values of the inputs once they are checked and display them in a text input that will be sent via email. However, I am facing an issue where only the last option is being printed in that input instea ...

How to use TypeScript to modify button styling with an OnClick() event handler

Learning TypeScript with Existing Code Transition Currently, I am delving into the world of TypeScript and in the process of converting my CoffeeScript code to TypeScript (specifically Lit Web Component). Confusion on Translation Process I'm encount ...

"Enhance Your Video Experience with a Custom

Currently, I am working on designing a front-page that features a YouTube video as the background with a fixed transparent navigation. Although I have successfully implemented both elements, I am struggling to make sure the video background starts at the t ...

Editable content tag

Is there a way to set the maximum number of rows in the contenteditable attribute? I would like to limit users once they reach the character capacity for sending data via POST method. I am currently working with HTML 5. Contenteditable is a new attribute ...

Sending the router outlet parameter to the parent element

Main component: <main-component> <sub-menu [menuItems]="routerlist"></submenu> <router-outlet></router-outlet> </main-component> Definition of router-outlet in TypeScript: To populate the menu list, I have initial ...

Where could one possibly find the destination of the mysterious <circle>?

I want to implement a simple pulsating animation on a circle svg element. I attempted using a transform: scale(..,..) animation, but it seems to be shifting the entire circle within its container instead of just scaling the element itself. This is the cur ...

What could be the reason for the malfunctioning of the "subscribe" button?

Whenever the subscribe button is clicked, it should send an email to the "subscriptions" section of the database. Unfortunately, when I click the button, nothing seems to happen. My understanding of this is very limited and I can't seem to troubleshoo ...

Concealing a button within a specific interface

I am currently facing an issue with a data table that includes two control buttons: edit and save. My problem lies in hiding the save button on the initial preview. Basically, what I want to achieve is displaying only the Edit button on the first page. Wh ...

Theme.breakpoints.down not being acknowledged by MUI breakpoints

The Challenge: Implement a hamburger menu to replace the navMenu on tablet and smaller screens After successfully compiling in VS code terminal, encountering an error in the browser: Error Message: TypeError: Cannot read properties of undefined (reading ...

Do you require assistance with creating an image slideshow?

My first day working with HTML was a success as I successfully built a navigation bar that looks pretty cool. Take a look at it here. Next on my list is to incorporate a slideshow into my site, possibly using JavaScript or jQuery plugins. I'm aiming ...

Adjust the positioning of a class element

I have an eye icon that changes position when clicked. Initially, it is set to left: 10%;, but if there is a DOM element with the ID login-section, it should be repositioned to left: 50%;. I attempted to use document.getElementsByClassName('fa-eye-sl ...

Activate the console.log functionality if it has been previously turned off

When working on a project, I noticed that console.log is disabled. Although Firefox alerts me about this, I don't have the time to locate where in the code it's disabled. Is there a method for overriding the disabling of console.log specifically ...