In my Angular app, I'm using the timepicker widget from ngx-bootstrap.
It looks fine when used outside a table:
However, for some reasons it looks super-ugly when used inside a table element:
I'm not using any custom css code.
It took me a while to figure out what was happening there. The problem was some bootstrap style attached to .table and similar classes (e.g. rules applied to .table td) was breaking the timepicker's layout (since it internally also uses a table element).
My solution was applying this style:
timepicker {
table {
tr {
background-color: transparent !important;
th,
td {
padding: 0 !important;
vertical-align: middle !important;
border: none !important;
}
}
}
}
Related
How can I override library classes, but only within a specific container that I've styled with my own class?
I think I am just not understanding how to format the right selector. Here's the background: I am not a CSS expert, but we lost ours, and now the Data Base Guy has to push through :) We use the MudBlazor library in server-side Blazor, but I think this is "just a CSS" question.
The library pre-defines certain styles, and we need to override them. For example, the library defines .mud-table-dense .mud-table-row .mud-table-cell, which, if I understand correctly, means applied to mud-table-cell when inside mud-table-row inside mud-table-dense. (I could look up the styles in their source, but as far as the project is concerned, these "base styles" are buried deep in the library, somewhere.)
The earlier code in our project just over-rode the styles in our own project.css like this:
.mud-table-dense .mud-table-row .mud-table-cell {
padding: 2px 0 0 2px;
padding-inline-end: 24px;
padding-inline-start: 24px;
}
Trouble is that doing so breaks some other scenarios where we want to use their default formats. Keep in mind that I can't change the styles attached to the <td> or <th> directly (at least in most cases), but I can wrap the whole generated output in a div or style one of the higher-level containers in the library with a class.
So, if I wrap the generated table in a "mycontainer" class, I thought I should be able to change the selector to:
.mycontainer .mud-table-dense .mud-table-row .mud-table-cell {
but, then the they don't seem to apply at all.
The .razor html looks like:
<div class="mycontainer">
<MudDataGrid>
<!--- Table details -->
</MudDataGrid>
</div>
So my question boils down to: Given generated content from a library that creates low level elements like that are styled with classes, how can I override those classes, but only within a specific container that I've styled with my own class?
I don't usually answer my own question, but in case this ever comes up in a search.
The question: Given generated content from a library that creates low level elements like that are styled with classes, how can I override those classes, but only within a specific container that I've styled with my own class?
The (very specific) answer for styling a table generated by MudBlazor's MudTable component:
tbody.mud-table-body tr.mud-table-row > td.elk-table-90-l,
thead.mud-table-head tr.mud-table-row > th.elk-table-90-l,
col.elk-table-90-l {
width: 90px;
overflow: hidden;
text-overflow: clip;
padding: 0;
padding-inline-end: 6px;
padding-inline-start: 0px;
text-align: left;
}
tbody.mud-table-body tr.mud-table-row > td.elk-table-dec-r,
thead.mud-table-head tr.mud-table-row > th.elk-table-dec-r,
col.elk-table-dec-r {
width: 120px;
overflow: hidden;
text-overflow: clip;
padding: 0 35px 0 0 !important;
/* padding-inline-end: 30px;
padding-inline-start: 0px;*/
text-align: right;
}
thead.mud-table-head tr.mud-table-row > th.elk-table-dec-r.sort {
/* Take back out some padding in the header to allow for the hidden sort-icon*/
padding: 0 12px 0 0 !important;
}
.elks-table div.mud-table-container table tbody tr,
.elks-table div.mud-table-container table tbody tr *
.elks-table div.mud-table-container table tbody tr td,
.elks-table div.mud-table-container table tbody tr th * {
overflow-y: hidden;
vertical-align: middle;
height: 30px;
padding: 0;
}
.elks-table tbody tr.mud-table-row td.mud-table-cell ,
.elks-table thead tr.mud-table-row th.mud-table-cell {
padding: 0 12px 0 0 ;
}
.elks-table table,
.elks-table .mud-table-root {
table-layout: fixed;
}
I applied:
elks-table to <MudTable> to used fixed table layout and to lock the row height
elks-table-90-l to <col> in <ColGroup> to set the column width
elks-table-90-l to <MudTh> and <MudTd> to set alignment and such
I could break the settings for the TH and the TD into separate rules, but I preferred keeping them together and using one style for all three places in the markup (col, mudth, mudtd).
It might be possible to further simplify, but I stopped after I got all that I needed working.
How to change height and width of below p-calendar of primeng version 11.2.0
https://primefaces.org/primeng/showcase/#/calendar
I want to use the above p-calendar on my Angular application.
I tried below CSS, but didn't worked.
.ui-calendar .ui-datepicker {
height: 200px!important;
}
Suggest me on this.
You can proportionally control the height of the date picker by reducing the cell padding of the date cells through these classes.
.p-datepicker table td{ //adjust the padding }
.p-datepicker table td > span { //adjust the width and height }
Adding few more points here. Use these styles in your styles.scss, it is parallel to index.html, also use !important at many places. You can also refer this link for more classes, https://www.primefaces.org/primeng/showcase/#/calendar
.p-datepicker table td{ //adjust the padding }
.p-datepicker table td > span { //adjust the width and height }
Try this. Working primeNG ver: 12.2 Angular (dayNamesMin translations must be 2 characters.Otherwise, the scroll bar will appear.)
::ng-deep {
.p-datepicker td>span {
width: 20px !important;
height: 20px !important;
}
}
Before ---> After
My site contain a lot of data like 150 records on page, when I press ctrl+p then it will show the first page only, like only the visible part of the page but I want full [ 150] records.
This is what I tried So far:
<style>
##media print
{
html, body {
height:100%;
margin: 0 !important;
padding: 0 !important;
overflow: auto;
}
#header, #menuheader
{
display: none !important;
}
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
#prctrow
{
text-align:center !important;
}
}
</style>
This css remove the scrollbar from print preview but data is still not showing.
A few steps to possibly fix this as it's a bit difficult to see the complete issue with only your CSS.
Make sure your actual CSS is using one "#" symbol for "#media print {"
"display: inline-block" might need to be set to "display: block;"
Anything floated may have to be cleared and set to not float
Things positioned absolute or fixed should be set to static
Add something at the bottom of the page to test if everything is blank or just the table on the second page
I have just started to explore GWT, and i'm bit confused with different ways of applying styles to GWT widgets.In gwt docs, there are 4 ways by which you can override default style of a widget,
1) Using a tag in the host HTML page.(Deprecated)
2) Using the element in the module XML file.(Deprecated)
3) Using a CssResource contained within a ClientBundle.
4) Using an inline element in a UiBinder template.
Suppose i have a CSS file in some package say, com.abc.xyz.styles.css .And the file has the following contents,
/**the panel itself**/
.gwt-TabLayoutPanel {
border: none;
margin: 0px;
padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
background-color: #6F6F6E !important;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
font-family: Arial !important;
}
/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
border: none;
margin: 0px;
overflow: hidden;
padding: 15px;
}
How will i inject this css file ? How can this be done using the 3rd and 4th option of styling mentioned above?.
You can simply add your CSS file to the host page. Then you can use the full power of CSS selectors. This is my preferred method of using CSS in GWT:
What the best strategy to structure CSS in GWT?
I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw css?
It is possible, with CSS3 selectors:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
According to caniuse.com, every browser supports it now.
If all you're changing is the background colour, then the following would work, where test.gif is a 40px high image with the top 20px one colour, and the bottom 20 pixels the other colour. If you need to change any other css properties you're pretty much stuck.
table { background: url(test.gif) top; }
table tr { height: 20px; }
http://www.w3.org/Style/Examples/007/evenodd
CSS 3 nth-child. Since browser support is limited you can reproduce the behavior with Sizzle (included in, jquery for example)
(In CSS <= 2) Nope. Unfortunately there aren't any selectors (in CSS <= 2) that operate based on the position (in terms of the number it is within it's parent's children) which I believe you would need to do this with just CSS.
Note to self: read up on CSS3, already!
In http://www.w3.org/TR/css3-selectors/#structural-pseudos you can find explanation and examples on using nth-child:
tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
background-color: green;
}
tr:nth-child(odd) /* same */ {
background-color: green;
}
tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
background-color: pink;
}
tr:nth-child(even) /* same */ {
background-color: pink;
}
Good luck with browser compatibility - you'll need it.
There are hacks to make it work in IE (using JS) - I'll leave that sifting to you.