Styling: How can I create indentation for a specific text area while leaving another unaffected?

I am attempting to format this complete form with an indentation:

    <%= form_for([micropost, micropost.comments.build], :html => { :id => "blah_form" }) do |f| %>

        <div class="field">
          <p2>Who are you?</p2>
          <%= f.text_field :commenter %>
        </div>
        <div class="field">
          <p2>What deal are you offering?</p2>
          <%= f.text_area :body %>
        </div>
        <div class="actions">
          <%= f.submit "Submit"%>
        </div>
      <% end %>

However, I do not wish to indent the following text area within this form:

    <%= form_for(@micropost) do |f| %>
      <%= render 'shared/error_messages', object: f.object %>
      <div class="field">
        <%= f.text_area :content, placeholder: "What's something else you want to buy?" %>
      </div>
      <%= f.submit "Post", class: "btn btn-large btn-primary" %>
    <% end %>

Currently, my CSS file specifies:

#blah_form input, textarea, b4 {margin-left:80px}

Answer №1

#custom_form input, textarea, b4 {padding-left:80px}

Instead of having three separate declarations, consider localizing your CSS to just that form:

#custom_form input,
#custom_form textarea,
#custom_form b4 
    {padding-left:80px}

You could also create a new class for the padding:

.pad {
    padding-left:80px;
}

This class can be applied to any elements that require extra padding. To make it more specific for nested elements, you could do something like:

.pad > div {
    padding-left:80px;
}

(Not compatible with ie6) This code specifies that the padding-left should only apply to direct children of elements with the .pad class that are divs.

Answer №2

To eliminate the margin-left from the textarea inside the div, you can add another class to the div and style it accordingly.

For example:

<div class="field no-indent">

In your CSS file:

.no-indent textarea { margin-left:0 }

Furthermore, your CSS code:

#blah_form input, textarea, b4 {margin-left:80px}

This rule is being applied to all inputs within #blah_form, as well as to ALL textareas and elements with a tag of b4 (assuming you meant class b4, in which case it should be .b4).

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

Issue with Ionic Grid: Row not occupying entire width of the container

Currently, I am working on creating a straightforward grid consisting of one row and seven columns. Each column holds a div with a single letter of text inside. My intention is for these columns to evenly space out across the page by default, but unfortu ...

What is the best way to create a stylish vertical line separating two divs stacked vertically?

I am trying to connect two divs that are positioned vertically with a clean and elegant vertical line. Although I attempted using the pipe (|) font, it did not produce the desired result. Can anyone provide guidance on how to create a more aesthetically pl ...

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

I am working with the following code snippet: <div id="instructions"> <h3>Get it done</h3> <ol> <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li> <li>Then whisk ...

When hovering, the CSS border-bottom should extend

I am looking to create an animated border effect. When hovering over the link, I want the border-bottom to extend seamlessly from left to right. After much searching, I am still unsure what this effect is called. Below is the code I have: .a{ width ...

Tips for customizing your MUI slider design

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

The feature of Jquery click and cursor: pointer only focuses on a single element at a

Recently, I created a navbar that includes a dropdown feature. I encountered an issue where I wanted the dropdown to show up when clicking on the navbar-profile class (which contains the profile picture, name, and chevron icon) in the top right corner. Ho ...

Arrange the menu items in a column layout based on a given condition

Can someone assist me with displaying the menu subitems? I have created a plunker. Take a look at it to understand what I need (open plunker in full screen) https://plnkr.co/edit/IMEJFPfl5kavKvnUYaRy?p=preview In the plunker above, there are two dropdown ...

Center a sans-serif font vertically with exact precision while adjusting the font size

My issue is an expansion of a previous problem I mentioned in another question, which can be found here Vertically align sans-serif font precisely using jquery/css. To summarize: I am aiming to align two divs containing text, with one positioned above the ...

Having trouble getting PostCSS nesting to work with CSS variables in Tailwind CSS and Next.js?

I've been attempting to utilize PostCSS nesting alongside CSS variables, but unfortunately the CSS variables are not being converted at all. Instead, I am seeing Invalid property value in the DOM for CSS Variables. The tailwind.css file I have inclu ...

What is the best way to allow a number to be editable when clicked on in a React application

Currently, I am trying to find a solution for making a number editable when clicked without having to use form inputs or other React libraries that don't fit my requirements. The provided screenshots showcase the desired interface. https://i.stack.im ...

Tips for preventing a child div from moving when scrolling towards it and creating an internal scroll with a smooth animation using either JavaScript or jQuery

Looking to add scrolling functionality with animation to a child div on my webpage? Check out this example. I attempted using JavaScript's on scroll function, but it didn't work as expected. Currently, I have it set up to trigger on click of cer ...

Display text with ellipsis on one of the two spans within a container

I'm struggling with implementing ellipsis in my HTML code. Here's what I have: <div id="wrapper"> <span id="firstText">This text should be displayed with an ellipsis</span> <span id="lastText">this text should not ...

Issues encountered when dealing with floating elements and margins

Having some difficulties with aligning elements on my website. As someone who is not highly skilled in coding, I am struggling to define the width and float properties for certain classes. Despite my attempts, it seems that the elements are not positioning ...

What could be the reason behind CSS styles applying only when inserted within a style tag in my form, and not in the linked CSS file?

I want to express my gratitude for finding a solution to positioning Validator CallOuts on a web form through this question regarding repositioning the AJAX toolkit's CalloutExtender control. Does anyone know why applying CSS classes directly within ...

Display 3 images with the carousel feature on the middle image

Currently, I am utilizing the jquery.jcarousellite plugin and attempting to make the second image active. Below is the code snippet I have tried: <div id="jcl-demo"> <div class="custom-container auto moreItems "> <a href="#" c ...

Adjusting the width of row items in Angular by modifying the CSS styles

I am envisioning a horizontal bar with items that are all the same width and evenly spaced apart. They can expand vertically as needed. Check out the updated version here on StackBlitz Issue: I am struggling to automatically set the width of the row elem ...

How can I make a div's height match that of another div?

I am curious about adjusting the height of a div based on its content. In this case, I have the following HTML structure: div.Pantalla { background-image: url("https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg"); background-size ...

Animating CSS styles in Vue.js based on JavaScript triggers

Within my Vue.js application, I've implemented a login form that I'd like to shake whenever a login attempt fails. Though I have achieved the desired shaking effect, I'm not completely satisfied with my current solution. Here's a simpl ...

Placing a crimson asterisk beside the input field within Bootstrap

Trying to insert a red * at the end of my input field using bootstrap, but all my attempts so far have been unsuccessful. Is there a way to align the Currently experiencing this issue: https://i.stack.imgur.com/61pzb.png Code snippet: .required-after ...

Avoiding the refreshing of the footer when navigating through pages

In my music application, there is a simple player located in the footer. Users can choose songs from the main page list and play them in the footer. The current requirement is that even if a user navigates from the home page to other pages (profile, bookma ...