Modifying the properties of the text and not the CSS icon on a button

Question

I have a floating material button described in the bottom right of the page:

<button
    id="fixed-button"
    class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart">
</button>

The cart icon itself is the class mdi-action-shopping-cart, and the cart quantity is added to the button using AJAX:

        $('#fixed-button').text('');
        $.getJSON("{{ url('schedulizer/cart') }}", function(data) {
            if(data.quantity > 0) {
                $('#fixed-button').text(data.quantity);
            }
        });

What I want to do is, make the font size of the quantity value smaller, and push it to the top right of the cart.

I tried editing the property of the fixed-button with margin-bottom to like 8px, but that ended up just pushing the entire cart icon AND the letter itself up 8 pixels.

I think what's happening is, the cart icon and the letters are both treated as text values, which really isn't surprisingly to me.

How do I modify the CSS properties of just the quantity value and not the cart icon?

Please provide the relevant CSS of class 'btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart' — dpanshu, Aug 06 '15 at 06:56

score 2 · Answer 1 · answered Aug 06 '15 at 07:04

A css rule for an element will impact that entire element. I believe your guess is accurate and the mdi-action-shopping-cart class indeed inserts some form of text (likely using a special font) in the element. That text would then be impacted by rules like font-size or similar.

Using a <span> or similar inline tag for the quantity well let you style it independently, however.

Using that method, the html would look something like this:

<button
    id="fixed-button"
    class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart">
    <span id="quantity" class="shopping-cart-quantity"></span>
</button>

Using javascript you could then alter the quantity by setting the text of the quantity-span instead of the button:

$('#quantity').text('');
    $.getJSON("{{ url('schedulizer/cart') }}", function(data) {
        if(data.quantity > 0) {
            $('#quantity').text(data.quantity);
        }
    });

This would, in turn, let you separate the styles for the element in css, like so:

.shopping-cart-quantity {
    margin-bottom: 8px;
    font-size: 10px;
}

I did not ignore your answer - I am going to bed now, and I will test your answer tomorrow. This looks promising though - thank you. — theGreenCabbage, Aug 06 '15 at 07:06

Abhitalks · Accepted Answer · 2015-08-07T08:06:05.937

It seems you are using the material design css from here.

The style is defined in the .btn.btn-fab class of that stylesheet. The icon is the content property of the ::before pseudo-element of the button, which is inline-block. The pseudo-element is inheriting the font-size property of the button and hence you are not able to re-style it properly. Also, there is padding defined on that which will cause the text to move out of the button.

You need to override the styles for your use-case, i.e. #fixed-button and reset its ::before pseudo-element.

To be able to control it easily, it would be better if you made the button as relatively positioned and its pseudo-element absolutely positioned. Then carefully adjust the padding to accommodate the extra text you are putting into the button.

A rough example (explanation given in the code comments):

$("#fixed-button2").text('4');
$("#fixed-button3").text('42');

#fixed-button1, #fixed-button2, #fixed-button3 {
    position: relative; 
    text-align: right; /* keep the text to right */
    font-size: 11px;   /* reduce the font-size to accomodate */
    padding-top: 0px; padding-right: 6px; /* adjust the padding to keep the text on top-left */
}
#fixed-button1::before, #fixed-button2::before, #fixed-button3::before {
    display: block; position: absolute; /* position relative to the parent button */
    top: 0%; left: 45%;                 /* position to center with enough space for text */
    font-size: 26px; padding-top: 15px; /* reset the changed properties of parent */
    transform: translate(-50%, 0%);     /* to make it centered */
}
#fixed-button1:empty::before, #fixed-button2:empty::before, #fixed-button3:empty::before {
    left: 50%;                          /* if no text, we need to shift the icon to center  */
}

/* following style is only for demo purpose in this snippet */
div, #fixed-button1, #fixed-button2, #fixed-button3 { margin: 24px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div>
 <button 
  id="fixed-button1" 
  class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
 <button
  id="fixed-button2"
  class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
 <button
  id="fixed-button3"
  class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
</div>

Also a fiddle for you to play with: http://jsfiddle.net/abhitalks/efma9bt9/

Update

(per op comments)

If you need to use the text as a notification bubble, then you can easily do that using another pseudo-element ::after on the button. You will have to make a little change in the way you use the text.. instead of using text content of the button to indicate the quantity, use a data- attribute on the button. Use that attribute as content for the ::after pseudo-element.

In order to be able to hide the notification bubble when the quantity is zero, apply the styles based on a class. Then add/remove the class in your Javascript code where you are updating the quantity based on your ajax call.

Example Snippet 2: (In this example, I've used data-qty as the attribute which can be used to update the quantity. The class .qty is used to control the ::after pseudo-element which you can add/remove based on the quantity)

$("#fixed-button2").attr('data-qty', '4').addClass('qty');
$("#fixed-button3").attr('data-qty', '42').addClass('qty');

#fixed-button1, #fixed-button2, #fixed-button3 {
    position: relative; 
    font-size: 11px;   /* reduce the font-size to accomodate */
    padding-top: 0px; padding-right: 6px; /* adjust the padding to keep the text on top-left */
}
#fixed-button1::before, #fixed-button2::before, #fixed-button3::before {
    display: block; position: absolute; /* position relative to the parent button */
    top: 0%; left: 50%;                 /* position to center with enough space for text */
    font-size: 26px; padding-top: 15px; /* reset the changed properties of parent */
    transform: translate(-50%, 0%);     /* to make it centered */
}
#fixed-button1.qty::after, #fixed-button2.qty::after, #fixed-button3.qty::after {
    content: attr(data-qty);
    display: block; position: absolute;
    top: 0px; right: 0px; height: 20px; width: 20px; 
    font-size: 11px; line-height: 18px;
    background-color: #f00; color: #fff;
    border-radius: 50%; padding: 0;
}

/* following style is only for demo purpose in this snippet */
div, #fixed-button1, #fixed-button2, #fixed-button3 { margin: 24px; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <button 
  id="fixed-button1" data-qty="" 
  class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
 <button
  id="fixed-button2" data-qty="" 
  class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
 <button
  id="fixed-button3" data-qty="" 
  class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
</div>

Fiddle 2: http://jsfiddle.net/abhitalks/z63qf4xb/1/

.

This is absolutely what I was looking for, thank you. I changed both `left` vars for empty and non-empty to 45% since I did not like the cart shifting left when there was a value. The position for both now is just 45%. I have a question - I want to add a red circle behind just the letter (only slightly bigger than the letter) like iOS notifications on app icons. I added this string: `content: ' \25CF';` in the `::before` (not empty), but it seemed to replace everything.. — theGreenCabbage, Aug 06 '15 at 17:06
The content property of the pseudo-element is being used to show the cart icon. You need to use a separate element for showing a notification style. This answer of mine will guide you in the right direction: http://stackoverflow.com/a/19139052/1355315 — Abhitalks, Aug 06 '15 at 17:32
Great. I am looking into it now. Should I attribute the text as a new span for this to work..? — theGreenCabbage, Aug 06 '15 at 17:35
The issue I am running into is, on initial load, the jewel works. But as I press the "add to cart" button, the AJAX updates like this: `$('#jewel').text(''); $.getJSON("{{ url('schedulizer/cart') }}", function(data) { if(data.quantity > 0) { $('#jewel').text(data.quantity); } });`, and it goes back to the original style. — theGreenCabbage, Aug 06 '15 at 17:48
Yes. A separate span would be needed. An `::after` pseudo-element could also work with a `data` attribute on the button. It's well past midnight here. I shall try helping you in the morning. — Abhitalks, Aug 06 '15 at 17:48
I think I got it to work. I just need to make it so that the red circle doesn't appear if the quantity is 0.. Trying to use the `.jewel:empty` property. — theGreenCabbage, Aug 06 '15 at 17:50
@theGreenCabbage: I have updated the answer to explain and demo the notification bubble. — Abhitalks, Aug 07 '15 at 08:07

score -1 · Answer 3 · edited May 23 '17 at 12:21

-1

Try using font size in percentage. This can help like:

 font-size: 100%;

Font-Size for Button and Link

edited May 23 '17 at 12:21

Community

1
1

answered Aug 06 '15 at 06:56

Mayank Gupta

193
2
16

As described in the question, doing so modifies both the quantity icon and the quantity number. – theGreenCabbage Aug 06 '15 at 06:59

Modifying the properties of the text and not the CSS icon on a button

3 Answers3

Update