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

What is the reasoning behind jQuery UI employing CSS classes as opposed to pseudo-classes?

In this detailed explanation found on this website, it is discussed why jQuery UI uses CSS classes like .ui-state-active that are applied through JavaScript, rather than utilizing existing CSS pseudo-classes like :active. What is the reasoning behind thi ...

Exploring the CSS scale transformation alongside the Javascript offsetHeight attribute

After combining offsetHeight with scale transformation, I experienced a strange result. Below is my simple HTML code: <body> <div id="id01"> Some Text </div> <div id="id02" style="transform-origin: left top; transf ...

css displaying drop-down menu when hovered over

I've been trying to create a link that, when hovered over, displays a list of options. I've managed to make it work in Firefox and Google Chrome, but it doesn't display at all in Internet Explorer when hovering over the link. I'm also ...

How to center align a <p> element along with a <select> element

Having some trouble while redesigning a simple survey page. I want to center-align the p tag with the select tag without using display:flex inside the .combobox class. The goal is to have them on the same line and still be centered. The current layout loo ...

JavaScript integration is a key aspect of working with Rails 3.1, especially when utilizing JQuery

I've been searching for a clear answer to this issue and I know I'm not the only one stressing about it. Current best practices suggest placing javascripts at the bottom of the page. However, any blocks that use proper $(function() {...}); will ...

Getting creative with jQuery: Adding a random class using addClass()

The html/css: <style> div.myWords p { display: hidden; } p.show { display: block; } </style> <div class="myWords"> <p>Hello</p> <p>Hola</p> <p>Bonjour</p> </div><!-- myWords --> Is ther ...

Tips for accessing a DOM element's ::before content using JavaScript

Is there a way to retrieve the content of a DOM element's ::before pseudo-element that was applied using CSS3? I've attempted several methods without success, and I'm feeling very confused! // https://rollbar.com/docs/ const links = docum ...

Strategies for avoiding overflow-x issues in Safari and mobile devices

I am currently facing an issue where I have a div containing a table with overflow enabled, allowing the whole table to be viewed by scrolling. However, on Safari and mobile Safari browsers, there is a horizontal scroll on the html and body elements. Whil ...

YouTube videos cannot be embedded using an iframe on Firefox

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 ...

The image in drag and drop ghost preview is not appearing on Firefox

I want to show a ghost element instead of the default browser preview while dragging and dropping. However, in Firefox, the image inside the ghost element is not displayed during dragging. Oddly enough, if I drop it and then drag again, the image does appe ...

CSS: concealing certain portions of an element's content

I don't have control over the following markup: <p class="filename"> <img src="http://domain.com/uploads/image_gallery/_thumbs/Chrysanthemum.jpg" alt="Chrysanthemum.jpg"> <br> Chrysanthemum.jpg </p> Is it possible ...

Prevent Android WebView from attempting to fetch or capture resources such as CSS when using loadData() method

Context To many, this situation might appear to be repetitive. However, I assure you that it is not. My objective is to import html data into a WebView, while being able to intercept user hyperlink requests. During this process, I came across this helpfu ...

Change the color of the text in a shiny dashboard

While exploring shiny dashboard, I came across this link that explains how to modify colors in the sidebar and header. However, I'm struggling to change the font color for sidebar items. The default white font color becomes unreadable when using light ...

Having trouble with the visibility of the hover background?

I have a goal in mind: This is the outcome I've achieved so far: LINK My aim is to have a white background with a blue border appear at the bottom when hovering over navigation links. Unfortunately, this isn't happening as expected. Can anyone ...

Tips on crafting tailored CSS styling for targeted div elements such as before and after:

Looking to style specific div elements with the same class name? <div class="main"> <div class="banner_image"> banner 1</div> <div class="banner_image ">banner 2</div> <div class="banner_image ">banner 3</di ...

Struggle with the background div menu

I am trying to create a menu with a background color, but when I use "background" or "background-color" on the div that contains my menu, I can't see any color. It's frustrating because I know it should be working.. Here is the HTML : <head ...

enhance the brilliance of elements at different intervals

My latest CSS animation project involves creating a stunning 'shine' effect on elements with a specific class. The shine effect itself is flawless, but having all elements shine simultaneously is making it look somewhat artificial. I've bee ...

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI. The desired effect is similar to the one demonstrated in their example. While they use a List compon ...

I created some jQuery code that modifies a button when it is hovered over, however, I ended up writing the code individually for each button. What steps can I take to turn it

Is there a way to turn the code for each button on my website into a jQuery function that can be applied to any button? This is how the code currently appears: $(document).ready(function() { $("#linkXML").hover( function() { ...

The iframe remains unresponsive and fails to resize as needed

I am facing an issue while trying to embed an iframe into one of my websites. It seems that the responsiveness is lost and it does not scale properly on mobile devices. You can see the issue here. Interestingly, when I place the same iframe on a plain HTM ...