Reorganize elements within a twig form to suit your preferences - Symfony 3

I have a form displayed on my page that I need to style according to a provided mock-up for mobile devices.

Here is the mock-up I am supposed to follow:

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

This is how the layout currently looks on my page:

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

And here is the code snippet from my view:

<section class="restaurant__nav col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-3 well">
    <div class="container">
        {{ form_start(form) }}
            {{ form_widget(form) }}
            {% if app.user %}
                <input type="submit" value="{{ 'buy.field' |trans |upper }}">
            {% else %}
                {{ 'not_connected.text' |trans }}
            {% endif %}
        {{ form_end(form) }}
    </div>
</section>

I'm not very familiar with SASS or CSS, but I've attempted to adjust the margins of each element with some difficulty.

Does anyone have any tips or techniques to achieve a layout similar to the mock-up without using specific pixel values like margin-left: 20px?

(Please disregard the RÉSERVER text - my goal is to center the form and ensure equal spacing between elements)

Thank you!

Answer №1

First and foremost, it appears that you are utilizing Bootstrap for your project. This allows for easy alignment of elements using classes such as "col-md-*" to position content on the left side or center within a grid layout. Here is a helpful resource: w3schools

Once your blocks are in place, creating buttons and inputs that appear together can be achieved with an "input-group". There are various ways to implement this feature, with more information available here: getbootstrap.com

For styling your buttons, you can explore useful examples on w3schools

If you wish to center elements, you can use the following CSS properties:

display: block; // if element isn't naturally block
margin: auto;

To understand which HTML elements are considered as Block or Inline, refer to this guide: w3schools

Lastly, ensure that the width of your labels and inputs are consistent by setting them to the same value.

In addition to providing guidance, I have created an example for you to reference: 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

how can I apply a class name to an SVG element within styled components

I've been attempting to style an SVG icon component using styled-components, but I'm encountering some issues as the styles I apply to the close icon are not taking effect. import styled from 'styled-components' import Close from ' ...

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

https://i.sstatic.net/muMSG.png One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery. The problem arises specifically on the iPad when attempting to click into the inputs to enter information - ...

What is the best way to make one element match the height of another element?

I am facing an issue with the height of my two columns as I have another column separating them. The challenge is to make the left and right columns extend in height based on the content added to the center column. One important point to consider is that ...

The vertical overflow from using Bootstrap grid extends into neighboring divs

There is quite a bit of code in this one, so I've decided to showcase it in a codepen. https://codepen.io/anon/pen/WMyQEJ Essentially, I'm utilizing @media queries to expand the #about div in order to accommodate my content that spills over into ...

"Concealing a div based on the toggling of another one - here's

Currently, I have a scenario where clicking on an image inside a div triggers the display of another div while simultaneously wanting to hide the original div containing the image. So far, utilizing only the abreInfo() function achieves the desired toggle ...

Ways to dynamically apply styles to the component tag depending on the visibility of its content

Consider a scenario where you have a component with logic to toggle the visibility of its contents: @Component({ selector: 'hello', template: `<div *ngIf="visible"> <h1>Hello {{name}}!</h1></div>`, styles: [`h1 { fo ...

Grid system that is responsive, while also maintaining a fixed column width

My problem seems simple, but I can't find an easy solution. What I need is to create a grid with fixed widths and a fixed distance between each column. Each column should be 400px wide, and as the browser window is resized, the grid should adjust by ...

What is the best approach to define a *.css file in an ASP.NET UserControl?

I am dealing with a CSS file which includes all of the <style> tags used in my website. Is there a way I can connect this CSS file to my UserControl, allowing me to utilize the styles within the CssClass attributes for my child controls? ...

Please define the class name for the entity in Symfony's Doctrine ORM

While configuring the mappings for the Doctrine ORM in Symfony 4 using YAML, I have encountered an issue. It seems that the entity's class name is automatically generated based on the name of the yml config file and cannot be manually specified. Is th ...

The 100% height setting is not functioning as expected

Why is the code below displaying strangely in Firefox and IE7, even though it works fine in Chrome? The height is set to 100%, but it seems to be not exactly that. Any ideas on how to fix this issue? Thank you! <iframe src ="demoFramesetLeftFrame.jsp ...

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

Unable to adjust opacity level with Bootstrap slider

I am encountering issues with my slider as it is not changing the value properly. Every time I try, I receive an error message in the console saying "Uncaught TypeError: Cannot set property 'opacity' of undefined". What I want to achieve is to a ...

Ensure that only the collapsed portion of the div is clickable, while making sure that the expanded section remains unclick

I have a nested div with 'additional information' inside. When the div is clicked, it expands to show the 'additional information'. To prevent closing when clicking on the text within the 'additional information', I used .st ...

Incorporate exclusively the BS4 modal feature onto a basic index.html webpage

Looking to add only the modal component from Bootstrap 4/5 to a basic HTML page without including the entire library, as it conflicts with my existing CSS template. The BS3 Customize builder only supports versions 3.4.1 and earlier. The issue with this is ...

Unable to modify the width of textarea

I've been struggling to adjust the width of a textarea element, as neither setting rows and cols in HTML nor using CSS has worked for me. The height adjustment was successful with HTML. Any tips on changing the width? form, label { position: rel ...

What is the process for defining an image background with the <img> tag instead of CSS?

I am faced with a challenge of creating 4 columns, each containing an image where text needs to be displayed over the image. While I know this can be done using CSS, I am looking for a way to set the image as a background directly within the HTML file. T ...

Showcase a selection of items in a flexbox positioned vertically as a row

Check out my flexbox item and how it appears here This is the html code: <div id="property"> <div style="background-color:coral;"><img :src="item.property_image" width="200px" height=&qu ...

Creating boxes with equal heights in HTML and CSS

I have created this menu using a combination of html and css. The layout consists of 3 boxes, each with different content. My goal is to ensure that all boxes are the same height within the design. However, due to specific responsive requirements, I cannot ...

The Angular Material md-input-container consumes a significant amount of space

Currently, I am exploring a sample in Angular Material. It appears that the md-input-container tag is taking up a substantial amount of space by default. The output is shown below: https://i.sstatic.net/hQgpT.png However, I have come across the md-input- ...

What is the best way to merge various sass directories into a single css file?

I have a situation where I need to compile two separate scss directories into a single css output file. When compiling a single directory, I would use the following command: sass --watch scss/template.scss:css/template.css Is there a way to combine two d ...