i hava h:selectManyListbox with size=3 and there's a default disabled scroll appears, i want to hide it, and show it when necessary (if size >3 ).
please advise how to do that, thanks.
something like this
<h:selectManyListbox styleClass="#{(myBean.hideScroll gt 3)?'':'myHideScrollClass'}"...
where in your css
.myHideScrollClass {
}
Or a bit simplified
<h:selectManyListbox style="#{(myBean.hideScroll gt 3)?'':'overflow-y:hidden;'}"...
Also , instead of myBean.hideScroll gt 3 you can use myBean.myList.size() gt 3 but make sure myList is not a null
<h:selectManyListbox /> render 'select' and 'option' html tag. You can't control the look of a select box in such detail, it is displayed depends on the system.
You can use some trick(condition size=3: you can use #Daniel approach):
<style type="text/css">
.test {
display:inline-block;
vertical-align:top;
overflow:hidden;
border:solid grey 1px;
}
.test select {
padding:10px;
margin:-5px -20px -5px -5px;
}
</style>
<div class="test">
<h:selectManyListbox />
</div>
Related
I´m pretty new to UI5 and I don´t understand why my controls disappear. But let me explain the problem step-by-step
I have created a view, a corresponding controller and a custom graphic control using D3.
The troubling part of the view looks like that:
<Page ...>
<!-- some FlexBoxes here... -->
<html:div style="clear:both; overflow-x:hidden; overflow-y:hidden; height: 94%;" class="sapUiNoMargin">
<html:div id="graphs" style="background-color:white; border: 1px solid lightgray; height:89%; width:100%;" >
<core:HTML id="htmlCanvasWrapper" content="<svg id='htmlCanvas' height='65%'></svg>"></core:HTML>
<core:HTML id="htmlCanvas2Wrapper" content="<svg id='htmlCanvas2' height='23%'></svg>"></core:HTML>
<core:HTML id="htmlCanvas3Wrapper" content="<svg id='htmlCanvas3' height='12%'></svg>"></core:HTML>
</html:div>
<!-- the closing elements follow here... -->
If someone wonders what I try to do above: the svg-elements are holding my graphics and the surrounding 'core:HTML' element is used for showing/hiding the charts via jquery (not everyone is allowed to see everything. In addition the 3 graphics should use the full remaining space on the page (the graphics are scaling) that is not used by the filter (FlexBoxes above), by the header and the footer.
Until now everything works as expected. That means the graphics are drawn and everything looks alright so far.
Now I want to show a legend for the graphics (which color means what and so on). That I have accomplished by showing a dialog from a fragment
Dialog definition:
<core:FragmentDefinition xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core">
<Dialog title="{i18n>VollePfanneLegende.Title}">
<html:style>
<!-- style definitions for the legend -->
</html:style>
<l:VerticalLayout>
<l:content>
<FlexBox>
<html:div class="icon" style="background-color: #68ACE9; border-color: #68ACE9; border-radius: 50%;"/>
<html:div class="hspacer"/>
<Text text="{i18n>VollePfanneLegende.IstTemp}"/>
</FlexBox>
<html:div class="vspacer"/>
<FlexBox>
<html:div class="icon" style="background-color: #F70206; border-color: #F70206; border-radius: 50%;"/>
<html:div class="hspacer"/>
<Text text="{i18n>VollePfanneLegende.SollTemp}"/>
</FlexBox>
<!-- ... -->
In the footer is a button to show the dialog (fragment) which also works as it should (the graphics are still shown in the background), BUT: when I close the dialog the dialogs are only visible for some fractions of a second and then they disappear! When select the now empty space with the debugger it shows that the div with the id "graphs" is empty!
<div id="__xmlview1--graphs" style="border: 1px solid lightgray; border-image: none; width: 100%; height: 89%; background-color: white;"></div>
But now I find a new div AFTER the content div that holds my graphics
<div class="sapUiHidden sapUiForcedHidden" id="sap-ui-preserve" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;">
<svg id="htmlCanvas" height="65%" data-sap-ui-preserve="__xmlview1--htmlCanvasWrapper>...</svg>
<svg id="htmlCanvas2" height="23%" data-sap-ui-preserve="__xmlview1--htmlCanvas2Wrapper>...</svg>
<svg id="htmlCanvas3" height="12%" data-sap-ui-preserve="__xmlview1--htmlCanvas3Wrapper>...</svg>
</div>
EDIT1: Code for opening/closing the dialog fragment.
The "onShowLegend" function shows the dialog, the "legendClose" function is called when you click the close button on the dialog.
onShowLegend: function() {
if (! this._oLegendDialog) {
this._oLegendDialog = sap.ui.xmlfragment("portal.view.vollePfanneLegende", this);
}
// toggle compact style
this.getView().addDependent(this._oLegendDialog);
jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oLegendDialog);
this._oLegendDialog.open();
},
legendClose: function() {
if (this._oLegendDialog) {
this._oLegendDialog.destroy();
}
this._oLegendDialog=null;
}
I don´t have a clue how to prevent UI5 to hide my graphics. Please help. Thanks in advance
EDIT 2: if I wrap the "core:HTML" elements e.g. in a VerticalLayout the graphics are not removed after closing the dialog. BUT: The height of VerticalLayout can´t be set. I need something that uses the full height of the unused page, because the graphics are scaling depending on their parent control height.
<html:div id="graphs" style="background-color:white; border: 1px solid lightgray; height:89%; width:100%;" >
<l:VerticalLayout width="100%">
<l:content>
<core:HTML id="htmlCanvasWrapper" content="<svg id='htmlCanvas' height='65%'></svg>"></core:HTML>
<core:HTML id="htmlCanvas2Wrapper" content="<svg id='htmlCanvas2' height='23%'></svg>"></core:HTML>
<core:HTML id="htmlCanvas3Wrapper" content="<svg id='htmlCanvas3' height='12%'></svg>"></core:HTML>
</l:content>
</l:VerticalLayout>
</html:div>
Best regards
Jochen
After some hours of trial and error and a lot of Internet surfing I have come up with the following code that does exactly what I want
<html:div style="clear:both; overflow-x:hidden; overflow-y:hidden; height: 94%;" class="sapUiNoMargin">
<html:style>
.graphs {
background-color:white;
border: 1px solid lightgray;
width:100%;
height: calc(100% - 85px); /* Height of RangeSlider area */
}
.sapMScrollContScroll {
height: 100%;
}
</html:style>
<html:div id="graphs" class="graphs">
<ScrollContainer width="100%" height="100%" focusable="false" horizontal="false">
<core:HTML id="htmlCanvasWrapper" content="<svg id='htmlCanvas' height='65%'></svg>"></core:HTML>
<core:HTML id="htmlCanvas2Wrapper" content="<svg id='htmlCanvas2' height='23%'></svg>"></core:HTML>
<core:HTML id="htmlCanvas3Wrapper" content="<svg id='htmlCanvas3' height='12%'></svg>"></core:HTML>
</ScrollContainer>
</html:div>
<!-- Rest of the view here... -->
</html:div>
As I understand the solution the wrapping in a UI5 container makes sure that the redraw event after closing the dialog has a control that can handle it.
So, I find myself in a strange place. In an XPage, I pop up a Dialog control from the Extension Library. Nothing special.
Now, that dialog must contain an <iframe> and that's where it gets hairy.
That iframe holds some content, so I need to style it so it is large enough to show everything without scroll bars. Hence, I need to resize the Dialog to accommodate that.
The pared-down html for the dialog is as follow :
<div
class="dijitDialog dijitDialogFocused dijitFocused"
role="dialog"
...
style="position: absolute; left: 624px; top: 250px; opacity: 1; z-index: 950;"
>
<div ... class="dijitDialogTitleBar"...>
...
</div>
<div class="dijitDialogPaneContent" style="width: auto; height: auto;">
<div id="view:_id1:dialogEditPerson:_content">
<form id="view:_id1:dialogEditPerson:_content:form1" method="post" action="..." class="xspForm"...>
<div ...>
<iframe ... src="..."></iframe>
</div>
</form>
</div>
</div>
</div>
So far, the dijitDialogEtc classes come from tundra.css, out of the box. I suppose I'll overload them in my own .css
Now I'm a bit puzzled by some traits :
where does the inline style, specially height and width, come from ? How can I act on them ?
inside the <div class="dijitDialogPaneContent" ... is another div, nameless, classless. How do I get hold of it ? Ultimately, that's my core concern : until I style it the way I see fit, all other efforts are in vain.
Any hint greatly appreciated.
Thanks
Add a panel as the root element to your dialog box and give it a width and height:
<xe:dialog
id="dialog1">
<xp:panel
style="width:500px;height:300px">
... your elements like iframe ...
</xp:panel>
</xe:dialog>
The size of dialog box gets automatically computed depending on your content size. It is the panel with the given size in this case.
If the iframe is the only content of your dialog box then you can set the size to iframe itself:
<xe:dialog
id="dialog1">
<iframe style="width:500px;height:300px" src="http://..." />
</xe:dialog>
I am using an image in my website and the html code for this is as follows,
<img title="Product-Shot.co.uk Logo" src="images/psuk_logo.png" alt="Product-Shot.co.uk" border="0" />
When I try to validate my page using w3 validation, it gives me the following warning,
Line 57, Column 105: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
I am using Joomla 2.5
I wonder how to get rid of the warning?
Any hints will be appreciated.
Amend your html code to the following or similar:
<img style="border: none;" title="Product-Shot.co.uk Logo" src="images/psuk_logo.png" alt="Product-Shot.co.uk" />
Actually, "border: none;" is probably the default anyway so you can likely get away with this:
<img title="Product-Shot.co.uk Logo" src="images/psuk_logo.png" alt="Product-Shot.co.uk" />
I want to have a component that looks like a button, but instead of text it should contain an image.
Because the standard button does not offer this functionality, I tried to use a <h:commandLink>:
<h:commandLink action="#{some_action}">
<p:panel styleClass="some_style">
<h:graphicImage value="#{some_image}">
</p:panel>
</h:commandLink>
This doesn't work. The <h:commandLink> is translated into an <a> tag, and the <p:panel> into a <div>. <a>-tags may not contain <div>-tags, so the <div>-tag is automatically placed outside the <a>-tag.
The result is that only the image is clickable, not the surrounding panel which is styled to look like a button. Is there a way to make the surrounding panel part of the link, or to put an image inside a button?
My project uses JSF and the Primefaces library:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
There are a couple ways you can add an image to a commandButton:
Using the image attribute
<h:commandButton action="#{some_action}" image="button.gif" />
Absolute or relative URL of the image
to be displayed for this button. If
specified, this "input" element will
be of type "image". Otherwise, it will
be of the type specified by the "type"
property with a label specified by the
"value" property.
Use CSS
<h:commandButton action="#{some_action}" styleClass="button" />
.button {
background: white url('button.gif') no-repeat top;
}
You could just move the div outside e.g.
<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
<h:graphicImage value="#{some_image}">
</h:commandLink>
</div>
And style the div that way. Just make the anchor (a tag) display as a block and it should fill the whole div so it's all clickable. For example in your CSS go:
.clickAll{
display:block;
}
If you can use an icon from PrimeFaces/JSF, then there is a simple and sound solution is
<p:column>
<p:commandButton icon="ui-icon-wrench"
style="border-width:0;background:none;"/>
</p:column>
It may help to avoid JavaScript code in JSF.
If the image does not fit then add properties to a сss class:
.button {
background: white url('button.gif') no-repeat top;
width: 32px; // button width
height: 32px; // button height
background-size: contain;
border: none; // hide border of button
}
I'm trying to achieve the layout shown here
Each of the panels should be linked to a backing bean from which I will later add differrent components according to context.
I tried using panelgrid but could not achieve this look.
I would prefer to use just JSF for this but if impossible or too complicated RichFaces is ok too.
Thanks!!
It's not only matter of JSF/HTML, but it's also a matter of CSS. The above layout can basically already be achieved as follows:
<h:panelGroup id="header" layout="block"></h:panelGroup>
<h:panelGroup id="leftcol" layout="block"></h:panelGroup>
<h:panelGroup id="rightcol" layout="block"></h:panelGroup>
(which generates the following HTML)
<div id="header"></div>
<div id="leftcol"></div>
<div id="rightcol"></div>
You can style/position it using CSS like as:
#header {
width: 100%;
height: 100px;
}
#leftcol {
width: 200px;
float: left;
}
#rightcol {
float: left;
}
That's all.
You can use the HTML code with which you have achieved the above layout. I.e.
<table>
<tr>..</tr>
<tr>..</tr>
</table>
However, the table-less layouts are preferred - i.e. using <div> tags. (see here)