I have a datatable with primefaces:
<p:dataTable var="wapsoplandtl" id="wapsoplandtlList" widgetVar="wapsoplandtlList" value="#{exportController.wapsoplandtls}"
paginator="true" rows="50" scrollable="true" scrollWidth="2500px;" styleClass="borderless"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}"
currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}" paginatorPosition="bottom"
rowsPerPageTemplate="10,25,50" rowKey="#{wapsoplandtl.dtlsys}">
and produce something like this:
As you can see, it has scrollwidth attribute, but the header got scrolled to the far right. I want only scroll the content of datatable, not the header and footer (paging). Can anyone help me?
This can be done by CSS only, forget about the scrollable attribute of the <p:datatable> component, apparently it will always overflow the whole table, and not just the content.
In this case, do the following:
Remove the scrollable and scrollWidth attribute from your <p:datatable> component;
Include another CSS class (any name, but keep this name to be used later, in this case I will use the name 'overflow-content') in the styleClass attribute from <p:datatable>;
Include the following CSS rule in your page:
-
.overflow-content .ui-datatable-tablewrapper table {
overflow: auto;
width: 2500px;
}
The result will be something like this:
For this you need to first add the option scrollX: true and should add css to table width:100% inline.
$('#example').dataTable( {
"scrollX": true
} );
and you are done.
Related
In this example when the user want to edit the row or to add a new one, you can see the width of text-area(Description column) don't follow the width of the td, so I added some CSS, but no changes. So how can I make the width take the 100% of the td using CSS ?
This is the code :
<span style="width:100%" editable-textarea="user.status" e-name="" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
This is the EXAMPLE.
The span that you are adding width: 100% to actually gets hidden. What you need to do is update the CSS for the class of the span that appears that wraps the inputs. Seems to be .editable-wrap
http://jsfiddle.net/NfPcH/660/
I wonder how ExtJS makes columns hidden without any visible CSS changes!
The problem that I had - I can't set the CSS rule to hide children icon in that hidden column. F.e. if the hidden td had class 'hidden', I can use something like that:
td.hidden img {display:none;}
But in this case I can do it only in renderer with manipulating grid.columns[col].isHidden().
renderer: function(value,td,record,row,col,store,view) {
return grid.columns[col].isHidden() ? '' : someFunctionToRenderColumn();
},
It's ok, but then if I show hidden column it will not refresh grid and shows empty column. Of course I can add one more event for show/hide that column, but it is so difficult! Has it any simple way?
It gives them a width of 0px:
<colgroup>
<col class="x-grid-cell-gridcolumn-1023" style="width: 0px;">
</colgroup>
... and that should hide your img too. Except if you've given them an absolute positionning or something. You should try to position your img using float, margin and padding. Or you will have to toggle the 'hidden' class yourself using the hide and show event of the column.
You can hide columns by targeting the corresponding col element. No need to put classes on each of the individual tds.
Here's a fiddle I made earlier: http://jsfiddle.net/MrLister/MupLH/
which has
<table>
<col><col class="invisible"><col>
...
and the CSS:
.invisible {visibility:collapse}
But you don't even need a class; you can also use col:nth-child(2) if you know the column number.
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});
I want p:selectOneMenu width to be auto regarding to the parent cell not regarding to the values it has.
<p:panelGrid>
<p:row>
<p:column><p:outputLabel value="Value01" for="idInput01"/></p:column>
<p:column><p:inputText value="#{bean.input01}" id="idInput01" /></p:column>
<p:column><p:outputLabel value="Value02" for="idSelect" /></p:column>
<p:column>
<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter">
<f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="#{varObject.label}" itemValue="#{varObject}" />
</p:selectOneMenu>
</p:column>
</p:row>
</p:panelGrid>
What I've got :
What I'm expecting :
Note: I don't want to specify a fixed width.
My solution: autoWidth="false"
i overrode .ui-selectonemenu, .ui-selectonemenu-label to:
.ui-selectonemenu{
width: 100% !important;
}
.ui-selectonemenu-label{
width: 100% !important;
}
The only way I found is to use jQuery to initialize width at load time.
You can create simply a CSS class like this (just to be used as a futur selector) :
.full-width
{
}
And add it to your component :
<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter" styleClass="full-width">
<f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="{varObject.label}" itemValue="#{varObject}" />
</p:selectOneMenu>
Since you will need jQuery, you should add this inside your h:head if you are not already using PrimeFaces components that use it.
<h:outputScript library="primefaces" name="jquery/jquery.js" />
Here is the small script that initialize all p:selectOneMenu in the selector :
<script>
$(document).ready(
function()
{
$("div.ui-selectonemenu.full-width").each(
function()
{
$(this).css("width",$(this).parent().width());
}
);
}
);
</script>
you can add the value of width directly in the component to modify it, to avoid impacting other p: selectOneMenu existing in the page.
<p:selectOneMenu style="width: 100% !important">
...
</p:selectOneMenu>
I now have a proper fix for this.
Primefaces 6.0 now has a new field called autoWidth that by default is set to true, and you can set to false.
IF you do as some of the above responses say and set it to false, all you are doing is playing roulette with you app css.
By setting it to false, primefaces will leave it up to you to manage the width.
You can either have the width set on the selectOneMeny expliclitly by style attribute, or some css class in your application.
But this is not what this issue is about, this issue is about the fact that the default behaivor of not specifying any width to a drop down makes leads our drop downs to normally be way too small for the labels in there.
So what we actually want is for the autoWidth to work proplerly.
FInally, I looked at the component and at the renderer, and it is obvious the auto-width mechanism does not work in the backend side.
The backend side only builds some JSON like data that the primefaces javascript builder can use to properly tune on the browser the behavior of the widget.
If you loook at primefaces 6.0 source code, the bug is in META-INF\resources\primefaces\forms
Search for the code that says the following:
PrimeFaces SelectOneMenu Widget
In this javascript function hunt for the code chunk that says:
_render: function() {
if(this.cfg.autoWidth) {
In this section of code your bug is the following line:
this.jq.css('min-width', this.input.outerWidth());
Here, I applied the following patch that hopefully should work in geting the drop down box to be as fat as the largest label:
_render: function() {
if(this.cfg.autoWidth) {
// BEGIN: PATCHING
// ORIGINAL CODE:
// this.jq.css('min-width', this.input.outerWidth());
// BUGFIX:
// (a) compute the original min-with primefaces 6.0 would put on the root div
var primefacesBugWidth = this.input.outerWidth();
// (b) compute the length of the hidden select element with all the labels inside of it
var widthOfHiddenDivWithSelectLabels = this.jq.find('div select').width();
var widthOfTheDropDownTriangle = this.jq.find('.ui-selectonemenu-trigger.ui-state-default.ui-corner-right').width();
var widthOfLabelPlusTraingle = widthOfHiddenDivWithSelectLabels + widthOfTheDropDownTriangle;
// (c) we will use whichever length is longer
// in bug-fixed primefaces version the outerWidth should be computed correctly
// but this seems not to be the case
var maxWidthOfTwoPossibleOptions = primefacesBugWidth > widthOfLabelPlusTraingle ? primefacesBugWidth : widthOfLabelPlusTraingle;
this.jq.css('min-width', maxWidthOfTwoPossibleOptions);
// END: PATCHING
}
}
The idea of the code above is:
(a) look at the hidden div with all labels and get the width of that div
(b) add to that length the width needed for the primefaces triangle facing down
(c) compare the width we have computed to that that is suggested by primefaces and that seems to be way too small
NOTE:
To install the patch you have to copy all of the Primaces code for the SelectOneWidget.
Add it to a javascript file under your control.
Make sure you only run the compilation of your javascript file after the primefaces javascript file has been loaded.
Normally primefaces is being rendered at the HEAD.
So if you have you jasvacript as the last ement in the body you should be fine.
The patching is working fine for me.
THis is code I do not like to maintain however.
You can ID the element and change the style width through CSS. Make it 100% of its container.
If your p:selectOneMenu is in a DIV with an assigned width, I find setting style="width:100%;" on the p:selectOneMenu seems to work in my case.
The problem might be min-width, which is set in the rendered HTML. If that is your case, use a CSS selector fixed-width like this:
<p:selectOneMenu styleClass="fixed-width" ...
then define CSS
.fixed-width { min-width: 100% !important; }
That sets the width of the selectOneMenu widget to the width of the parent element. To have it work, parent elements's width should not be 'auto'.
Those who still got problem with selectonemenu may try this
.ui-selectonemenu {
min-width: 0 !important;
}
Perfectly worked for me.
You can use something like
style="min-width: 12rem"
I have <select multiple="multiple">..</select> select and I also have select{heigth: 30px;} in some stylesheet that I cannot edit. Now my multiple select have 1-row heigth - "size" attribute cannot be applied. How can I solve the problem?
I like the clean solution.
select[multiple] {
height: 100px;
}
Well, first off - I'm assuming that you're using the height property, not the misspelled heigth property. There's two ways you could solve this.
The first (which I don't recommend) is by simply appending the style to the HTML element, like below:
<select multiple="multiple" style="height:100px">..</select>
Or, instead, my suggestion would be making a second style sheet, that uses the following property, including the "!important", which follows the attribute value:
select {
height: 100px !important;
}
Doing it like such will override the original style, and replace it. This isn't the only method that you can use to override it - you can read here on CSS specificity.
I think the right way should be adding a class to the specific <select> and giving it the right size, like:
<select multiple="multiple" class="multiple">
select.multiple {
height: 100px;
}