I'm using Fullcalendar with the scheduler add-on and I want to reduce the events height and also the row height of the different resources. Anyone an idea on how to do this?
I had encountered this problem and used this
Define a class name in ur .css file
.fc-resized-row { height: 24px !important; }
Extend on the fullcalendar scheduler eventRender event
eventRender: function(event, element, view) {
$(".fc-rows table tbody tr .fc-widget-content div").addClass('fc-resized-row');
$(".fc-content table tbody tr .fc-widget-content div").addClass('fc-resized-row');
$(".fc-body .fc-resource-area .fc-cell-content").css('padding', '0px');
},
Hope this might help anyone who encounters this issue.
Cheers!
If you want to change the height of each time slot rows, you can override the css class.
.fc-agenda-slots td div {
height: 40px !important;
}
or (for my agenda without sheduler)
.fc-time-grid .fc-slats td {
height: 1.0em; .. }
You can find it in fifth line of fullcalendar css
For the event height :
FullCalendar - Change event (appointment, diary entry) height
Related
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
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;
}
}
}
}
I have one question concerning <p:dataTable> row CSS.
I have implemented a dataTable. In the css-File i have specified row-height as:
.ui-datatable tbody td {
height: 30px;
}
If you click on one row, the data and columns changes. Now I want to change the height of the rows (after the click on the row) too. Is there a possibility to change the row-height of the datatTable in the backing bean method public void onRowSelect(SelectEvent event){...} or in some other way?
If you can use css this works for me:
tr[role=row].ui-state-highlight td{
height: 10px;
...
}
I'm building form with images like a label...
I have:
DIV.icon-phone {
width: 22px
height: 22px
background: url('icon-set.png') no-repeat 22px 66px;
}
INPUT.pool-phone {
border:1px solid #666;
}
I would something like this:
if INPUT.pool-phone:focus change DIV.icon-phone background-position to: 44px 66px
Please help.
In order to alter some css property of an element when another element is modified, you need to have specific structures..
For your example, the input element must share the same immediate parent as the div and also be before it in the hierarchy.
In this case you can use the ~ General sibling combinator to target it
.pool-phone:focus ~ .icon-phone{
background-position:...
}
Demo at http://jsfiddle.net/gaby/fx5Uy/
otherwise you can use javascript and bind to the onfocus event..
you could write a javascript function to take care of that for you.
[the input button].onfocus = function changeBg () { [thediv].style.background="[whatever you want]" };
[the input button].onblur = function resetBg () { [thediv].style.background="[whatever you want]" };
Gaby posted a pure css version which is preferable (at least to me).