CODEWITHSUNDEEP
ruby-on-rails
user1899082
user1899082

Reputation:

Making some CSS modifications in a HAML file

I am still new to all HAML and CSS and currentyly working on this part of a code:

  - my_provider_list.each do |provider|
    %li{ class: 'group_classes group-list-colspace', id: provider.name }
      = provider.name
      %span{class: 'group-list'}= provider.value
      %span{class: 'group-list'}= provider.specialty

So I borrowed from other parts of the code we had and got it to that point seen in the picture below

enter image description here

But I can't figure out how to make some space between the values it shows for specialty and the cost value

What do you suggest to add or modify to get that part fixed?

Here is the generate code with html space added:

<li class='group_classes group-list-colspace' id='Physician 2679'>
Physician 2679
<span class='group-list'>218395</span>
&nbsp;
<span class='group-list'>Pediatrics</span>
</li>

And the CSS for list items is just this:

.group-list {
  float:right;
}

Upvotes: 1

Views: 91

Answers (2)

Eric C
Eric C

Reputation: 2205

I would add some classes to the spans and increase the padding of one of them for example

- my_provider_list.each do |provider|
  %li{ class: 'group_classes group-list-colspace', id: provider.name }
    = provider.name
    %span{class: 'group-list-value group-list'}= provider.value
    %span{class: 'group-list-specialty group-list'}= provider.specialty

Then add some style padding to specialty

 .group-list-specialty {
   padding-left: 20px;
 }

spans by there very nature are inline and are meant to be used inside of block elements and not to default to having any space around them. You can easily get around this with padding.

Likewise, if you are using rails consider putting the provider list into a separate partial

Upvotes: 1

Martin M
Martin M

Reputation: 8638

just add a non breakable space between them:

  - my_provider_list.each do |provider|
    %li{ class: 'group_classes group-list-colspace', id: provider.name }
      = provider.name
      %span{class: 'group-list'}= provider.value
      &nbsp;
      %span{class: 'group-list'}= provider.specialty

Upvotes: 1

Related Questions