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;
...
}
Related
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 a J query Data table, that outputs something like this:
the code for the above datatable is:
$('#companies').DataTable({
"aaData": data,
"aoColumns": [......]
});
Please tell me how do I change the css (width, height, color etc) for pagination, search and no. of records?
Thanks
you can change the css of your required elements simply take the class/id name of element with its parent class/id. if not change then use !important tag to the style code. like:(example)
div#dataTable_filter {
float: right;
margin-right: 15px;
margin-top: 0px; }
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
I am targeting mobile specifically so I have a Bootstrap responsive table. Its just a div with the bootstrap class "table-responsive" and a table nested inside with the classes "table table-striped table-bordered table-hover table-condensed".
Is there any easy way to make sure that the first column is fixed (not scrolling horizontally)? On mobile devices, its likely that there will be scrolling every time but the first column contains what are essentially table headers.
If you're only targeting mobile devices then this may work for you: you can clone the first column in your table and apply position:absolute so it appears "in front" when you scroll the rest of the table.
For this you'd need some basic jquery code and a custom CSS class:
jQuery
$(function(){
var $table = $('.table');
//Make a clone of our table
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
//Remove everything except for first column
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
//Match the height of the rows to that of the original table's
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
});
CSS
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
background-color: #fff; /* bootstrap v3 fix for fixed column background color*/
}
#media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
Here's a working demo for this approach
I have 30 buttons of different sizes and I want to set the width of all at once through CSS. But I haven't been able to get it to work right.
[insert example of failed CSS code here]
But it doesn't work. For example, the following button doesn't follow the above rule:
[insert minimal, complete HTML example here that illustrates the issue]
If you need to do this explicitly, you can simply add the !important attribute, although this will guarantee that regardless of location or source, the width property will be overridden, so be sure that you definitely want to apply that style.
button {
width: XXXpx !important;
}
EDIT
To make the above style only apply to one HTML page, as per your request, you can change the HTML for that page slightly, giving an id to your <body> tag, and then targeting buttons only when they appear below that id.
HTML
<body id="page_title">
CSS
#page_title button {
width: XXXpx !important;
}
You can create a button class in your css
.button
{
width: ____px;
}
and then in your .aspx add cssClass="button" to your ASP buttons (I assume they're asp.net controls?)
For input element
INPUT[type="submit"] {
width: XXXpx;
}
For button
BUTTON {
width: XXXpx;
}
Assuming your buttons have something unique in common (ie. they're all have the class name of "buttons"), you can just use a CSS selector to set their width property. ie.
.buttons {
width:100px;
}
There are a number of different selectors you can use to target them, and keep in mind you can have multiple classnames on each html element by putting a space between them. ie. <div class='nav button'></div> will respond to both the .nav and .button definitions.