Hello I'm having a problem with material ui css. I tried to override it but still doesn't work. I want my full div to get the full page but this is happening.
I want it to take the full width. but I can't edit the muicontainer
in your CSS:
div.MuiContainer-root.MuiContainer-maxWidthLg.css-1qsxih2 {
width:100vw!important;max-width:100vw!important;min-width:100vw!important;
}
You might want to try using this selector instead (dropping the last class that seems to be generated each time):
div.MuiContainer-root.MuiContainer-maxWidthLg
I'm building a shiny app and I want to emphasize a summary row in some of my dataTable outputs. I would like all the values in the second to last row to be underlined. I'm not strong enough with HTML or CSS to know where to start with this. I've looked through a bunch of DT style guides but can't find anything helpful
You can paste an underline tag around the entries you want to underline, then set escape = FALSE in DT.
escape property in DT: https://rstudio.github.io/DT/ see section 2.10 Escaping Table Content
Example of adding tags around some content: paste0("<u>", "original content", "</u>")
i have a simple table and want to display in shiny. but in default setting, the border cell is transparant. this is the code...
output$tabel <-renderUI({
tabel1 <- matrix(c(1,2,3,4,5,6),2,3)
list(
renderTable(tabel1)
)
})
Shiny is just a wrapper for R to output R code into HTML code. You will have to determine exactly what class the table is created with, but checking here shows that it should be shiny-html-output and then you should have a <table> in there. Should probably have a class of shiny-table-output, but I didn't find proof of that.
However, when ever you figure that out you just need to either add a style sheet to your R. And in that style sheet you will do your CSS.
IF it is shiny-html-output and shiny-table-output it would be as simple as:
.shiny-html-output .shiny-table-output{ border: 1px solid #000; }
IF it is just shiny-html-output and a table then same thing above, but .shiny-html-output table instead.
That would be it. Do try to use developer tools to inspect the elements of the browser when you have them up. F12 in most browsers or Right click inspect is all you have to do.
I have below ipython notebook code (markdown):
#### example table
|Name|Description|
|--|-------------------------------|
|Mary |She is a nice girl.|
|Jackie |He is a very naughty boy.|
The output looks like below:
How can I:
Left align the table of the cell, it's center by default now.
Right align the second col text.
Well, yes !
| Name | Description | age
| :- |-------------: | :-:
|Mary| She is a nice girl. | 20
| Jackie Junior | He is a very naughty boy. | 5
:--- or --- = left align
---: = right align
:---: = centered
Answer to the 1st question - left-align the table - create and run a code cell above the table markdown cell, with the following content:
%%html
<style>
table {float:left}
</style>
I would suggest to use this variant of the knuth's answer that doesn't affect the flow of the remaining elements around the table. Put this code inside a cell above the one containing the table:
%%html
<style>
table {margin-left: 0 !important;}
</style>
You can make a custom preference in Ipython.
Just make the following file
~/.ipython/profile_default/static/custom/custom.css
and add the following code.
table {float: left};
and You don't have to put the custom css in all ipython files.
I know many have already answered this, but personally, I found their answer lacks a little more description, and because of this many are not able to implement this.
Clarification
Also, I want to clear one thing that I am not giving the solution for aligning the values inside the table but for aligning the whole table rendering itself. And if you are looking solution for the table's cell alignment then you can consider the first answer itself
Solution
Here are the steps:
First create a Code cell (not markdown) just above your markdown cell where you want to show your table.
Then write the following in your Code cell inside it.
%%html
<style>
table {float:left}
</style>
Run your Code cell.
Now just create your table as normally you do, no need to add anything extra. And Voila! Your table should now render to the left.
For every notebook, you have to do this step for changing the table alignment. But if you don't want to do this, you can follow #Anderson answer. For ease, I am copying his answer here.
First you need to create a file named custom.css where you will put the following code
table {float: left};
Then you have to move this file to your ipython directories, it will be something like this
~/.ipython/profile_default/static/custom/custom.css
Hope it helped 😊
Yeah, I don't like that centered table either. Insert this at the top of your notebook after the imports section:
from IPython.core.display import HTML
table_css = 'table {align:left;display:block} '
HTML('<style>{}</style>'.format(table_css))
The IPython.core.display namespace allows you to imbed audio, local filelinks among others - as well as HTML within your notebook.
!important overrides the css of rendered _html
Use your styles with !important
<style> table td, table th, table tr {text-align:left !important;} </style>
Answering the fist question: When creating a table and assigning it the float: left attribute you end up having to add more CSS to resolve the text that surrounds the table. Place this in a code cell before your markdown cell
%%html
<style>
table {
display: inline-block
}
</style>
However, if you have a lot of CSS, might be best to put it in another file for the overall beauty of the document.
#jrjc answers the 2nd question perfectly ;)
If you look at the table in the inspector, you'll see that the cause of the issue is the fact that the margin-left and margin-right CSS properties on the table are set to auto, making it centered. You can make it left-aligned by doing something like this in your custom.css:
.rendered_html table {
margin-left: 0px;
}
That should only left-align those specific tables and not affect anything else.
I currently have a table with some dynamically generated data and I would like to highlight a table row if a cell contained a number that was greater then, lets say "50".
Is this something that can be done just with CSS? or would JQuery need to be involved?
At the moment I am just using this CSS to help separate each row visually.
.data tr:nth-child(odd){
background-color:#eeeeee;
}
Fiddle
It is not possible in pure CSS. Using CSS, you can't get the innerHTML.
You have to use javascript or jQuery.
A simple looping is needed
$('td').each(function () { //loop through each tds
if (+$(this).text() > 50) { // + is used to parse it to integer type
$(this).css('background-color', 'red')
}
});
JSFiddle
That's a form of conditional formatting, right? If so it seems like your only option is Javascript and from googling around there are quite a few options. Here's the top google link: https://gist.github.com/rdrgrtz/1082791