Tag Archives: styles

Overwrite Selected Tree View Item Styles – Material UI ReactJS

Leave a reply

Hi everyone,

Just a quick post on how to overwrite the styles of a selected tree item using material ui and ReactJS:

treeItem: {
paddingTop: theme.spacing(1),
‘&[aria-selected=”true”][aria-expanded=”true”] > div:nth-of-type(1)’: {
backgroundColor: ‘red’,
}
},

This will make the background color red for ONLY the selected item:
material-ui-tree-view

Cheers,
Chris

Dropdown Button – Twitter Bootstrap

Leave a reply

Hey everyone,

Just a quick post on how to create a dropdown button using Twitter Bootstrap. It’s pretty straight forward, once you’ve included all your CSS etc just add the following code:

Once you save that you should see something similar to the image below:

Twitter Bootstrap Dropdown Button

A standard twitter bootstrap dropdown button.

Change list item text alignment

To change the text alignment of this list items, all you need to do is adjust the text-align style assigned to the wrapper div.

Change dropdown button color

Once again, this is fairly simple, all you need to do is switch the button type. For instance, if you were after an orange button, you can swap btn-success with btn-warning. A list of the default styles is available on the Twitter Bootstrap site.

Let me know if you have any issues.

Allow HTML String – Ruby on Rails

Leave a reply

Just a quick post on how to prevent escaping for HTML within a string. Simply use html_safe?.

i.e. The following will show the bold tags as text:

<%= "GOOOOOOOGLE">

<b>GOOOOOOOGLE</b>

Whereas once we add html_safe the text will be displayed in bold:

<%= ("GOOOOOOOGLE").html_safe?>

GOOOOOOOGLE

Placing Multiple Button_To on the Same Line – Ruby on Rails

6 Replies

This is a problem that had me confused for an embarrassingly long time. Rails wraps button_to elements within a form and a div. Unfortunately this will take up 100% of the available width. Thankfully the solution is pretty straight forward – simply wrap buttons in a div and float them left like so:

    

       'button'%>
    

    

       'button' %>

A wrapper div isn’t strictly necessary however I usually add one just to be safe. While this will probably give a bunch of designers another reason to hate developers, I find that wrapping floated elements seems to save a lot of headaches when making changes down the track.

Using the code above you may also find that the divs aren’t filling as expected, simply add a div with a ‘clear:both’ style to the bottom of the wrapper: 


    

       'button'%>
    

    

       'button' %>

Hopefully that doesn’t take anywhere near as long for you guys to figure out as it did me, time for a coffee break I think. Good luck!