Styling React App with Emotion

• Install Emotion packages into your React App by running the command inside the React project directory:

  npm install --save @emotion/react @emotion/styled

• Add following to tsconfig.json

  {
    "compilerOptions": {
      ...
      "jsx": "react-jsx",
      "jsxImportSource": "@emotion/react",
      ...
    }
  }

• At the top of your .tsx file, insert line:

  /** @jsxImportSource @emotion/react */

see also

• TS2322: Property 'css' does not exist...
• Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic
• https://mudandmoss.medium.com/solving-you-have-tried-to-stringify-object-returned-from-css-function-error-from-emotion-in-react-50b3a70ed650
• Emotion: Using both a class and the "css" method in "className" prop

HTML table fill up the whole page

<table style="width:100%; height:100%; position:absolute; top:0; bottom:0; left 0; right:0;" border="0" cellspacing="1" cellpadding="3">
    <tr id="content" style="height: 100%;">
        <td align="center">Content</td>
    </tr>
    <tr id="footer" style="height:28px;">
        <td align="center">footer</td>
    </tr>
</table>

CSS: image auto resize and centered inside a div

<div style="width:600px; height:400px;">
<div style="vertical-align:middle; text-align:center; width:100%; height:100%;">
    <img style="max-width:100%; max-height:100%; width:auto; height:100%;" src="http://your-domain.org/your-img.png"/>
</div>
</div>

see also

• CSS force image resize and keep aspect ratio

CSS: fit textarea to its parent div

textarea {
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Example HTML code:

<div style="width:600px; height:400px;">
<textarea style="height:100%; width:100%; box-sizing: border-box;" readonly>
This is a textarea.
</textarea>
</div>

Run the Example:

This is a textarea.

JavaFX: Show grid lines of TreeTableView

• Save the following to resources/MyApp.css:

  .tree-table-row-cell {
      -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
      -fx-background-insets: 0, 0 0 1 0;
      -fx-padding: 0.0em;
      -fx-text-fill: -fx-text-inner-color;
  }
  .tree-table-row-cell:selected {
      -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-focus-color;
      -fx-background-insets: 0, 1, 2;
  }
  
  .tree-table-row-cell:odd {
      -fx-background-color: -fx-table-cell-border-color, derive(-fx-control-inner-background,-5%);
      -fx-background-insets: 0, 0 0 1 0;
  }
  
  .tree-table-row-cell:selected:odd {
      -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-focus-color;
      -fx-background-insets: 0, 1, 2;
  }
  

• In your Java class, add the css to a scene.

  String css = getClass().getResource("/resources/MyApp.css").toExternalForm();
  scene.getStyleSheets().add(getClass().getResource(cs);
  

css: monospace (fix-width) font families

font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;

css styles for pre and code

<style type='text/css'>
    pre {
        background-color: #eeeeee; border: 1px dashed #999999; color: black; line-height: 12pt; overflow: auto; padding: 5px; white-space: pre-wrap; width: 100%;
    }
    code {
        padding:0px 5px 0px 5px; font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace; font-size: 9pt;  font-weight: bold;
    }
</style>

SyntaxHighlighter on Blogger: how to enable border

Add the following style to your blog template, right after the SyntaxHighlighter css link:

<style type='text/css'>
    body .syntaxhighlighter {
        border: 1px dashed #808080;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        max-height: 600px;
        overflow: auto;
        padding: 1px 1px 2px 2px;
    }
</style>

See also

• SyntaxHighLighter: auto line break with pre wrap
• SyntaxHighlighter on Blogger: how to enable border

css: font families for programming (code)

.code, .pre {
   font-family: Terminus,Consolas,Profont,"Andale Mono",Monaco,Inconsolata,Inconsolata-g,
      Unifont,Lime,"ClearlyU PUA",Clean,"DejaVu Sans Mono","Lucida Console",
      "Bitstream Vera Sans Mono",Freemono,"Liberation Mono",Dina,Anka,Droid Sans Mono,
      Anonymous Pro,Proggy fonts,Envy Code R,Gamow,Courier,"Courier New",Terminal,monospace;
}

Javascript: collapsable div

Hi, there.

Source Code

<script type="text/javascript">
function update(){
    var button = document.getElementById("button1");
    var div = document.getElementById("div1");
    var action = button.value;
    if(action=="Show"){
        div.style.display='block';
        button.value = "Hide";
    } else if(action=="Hide"){
        div.style.display='none';
        button.value = "Show";
    }
}
</script>
<input id="button1" type="button" value="Show" onClick="update();"/><br/>
<div id="div1" style="background-color:#e0e0e0;display:none;">
Hi, there.<br/><br/><br/><br/><br/>
</div>

SyntaxHighLighter: auto line break with pre wrap

Add the following css into your html page(blog template):

<style type="text/css">
body .syntaxhighlighter .line {
    white-space: pre-wrap !important;
}
</style>

NOTE:

On SyntaxHighLither 3.0.83, enable the above css will make the line numbers go wrong. So better set gutter: false to disable the line numbers if you have long lines in the code block.

SEE ALSO:

1. http://stackoverflow.com/questions/6286733/automatic-line-break-in-js-syntaxhighlighter
2. https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap
3. http://blog.2k1y.com/2011/05/how-to-add-syntaxhighlighter-3083-on.html
4. SyntaxHighLighter: auto line break with pre wrap
5. SyntaxHighlighter on Blogger: how to enable border

HTML: wrap the long lines in pre with CSS

pre {
  white-space: pre;           /* CSS 2.0 */
  white-space: pre-wrap;      /* CSS 2.1 */
  white-space: pre-line;      /* CSS 3.0 */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap;  /* HP Printers */
  word-wrap: break-word;      /* IE 5+ */
}

CSS Specificity

• CSS Specificity: Things You Should Know
• Specificity Tutorial
• Calculate Specificity

CSS: image swap on mouse over

• Method 1: Originate from [here]

The HTML code:

<div class="container"><a href="#"><img src="img1.png" /></a>
</div>

The CSS code:

div.container {
    height: 32px;
    width: 32px;
    margin:0;
    padding:0;
    background-image:url("img2.png");
}

div.container a, div.container a:link, div.nav a:visited {
    display:block;
}

div.container img {
    width:100%;
    height:100%;
    border:0;
}

div.container a:hover img {
    visibility:hidden;
}

• Method 2: See [Pure CSS Image Hover]

CSS: div align

• div align with CSS
• CSS float property
• CSS clear property 

CSS Positioning

• Learn CSS Positioning in Ten Steps

CSS border-radius: create rounded/curved borders with CSS

CSS3 (Opera browser)	Mozilla equivalent	WebKit equivalent
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

See Also

1. CSS: border-radius and -moz-border-radius
2. Online Border Radius Generator

GWT CSS Property Camel Case

setProperty(String, String) can be used to set css properties. But you need to use camel case property names, and GWT will translate it to the real css property name. (The upper case letter, e.g. A,  will be tranlated to -a)

setProperty("textAlign", "center"); // text-align: center;

for example:

Camel Case Name	CSS Property
textAlign	text-align
MozBorderRadiusTopleft	-moz-border-radius-topleft
borderTopLeftRadius	border-top-left-radius

See Also: About Camel Case.