I need to align columns in <form:SimpleForm>. I need 4 columns in a row but only 2 columns are aligned. Here is my example, Please refer JsBin
Needed output :
label input-field label input-field
current output :
label input-field
label input-field
To use a new container on the right, simply set an empty title.
But be aware tabbing won't be from left to right, top to bottom but (per container) top to bottom, left to right
After all, it just a SimpleForm ;-)
See this working example (please run the example full-page, otherwise it will still show the fields top-town because of the responsive nature):
sap.ui.controller("view1.initial", {
onInit : function() { }
});
sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View
controllerName="view1.initial"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<f:SimpleForm
maxContainerCols="2"
editable="true"
layout="ResponsiveGridLayout"
labelSpanL="4"
labelSpanM="4"
emptySpanL="0"
emptySpanM="0"
columnsL="2"
columnsM="2">
<f:content>
<core:Title text="A Title" />
<Label text="1st label" required="true" />
<Input value="Blah" />
<core:Title text="" /> <!-- empty title so it looks like this container belongs to the left one -->
<Label text="2nd label" required="true" />
<Input value="Blah" />
</f:content>
</f:SimpleForm>
</mvc:View>
</script>
Related
I have an ASPX that has a repeater. Inside the repeater is a text box with a JQuery datepicker attached to it. The text box's ID is static, so it is the same for all of those items within the repeater. However, when I make a change to the second or subsequent repeater item's date box using a datepicker, it changes the first item's date box and leaves the one actually attached to the selected datepicker alone.
Other than the obvious solution of "don't define items with the same ID," which results in another problem that will probably end up in another question, is there a way to fix this problem?
This example
<asp:Repeater runat="server"
ID="rptWhatever"
ClientIDMode="Predictable">
<ItemTemplate>
<asp:TextBox runat="server"
ID="tbxWhoCares"
CssClass="ImaDatePicker">
</asp:TextBox>
</ItemTemplate>
</asp:Repeater>
Will render the textbox to something like:
<input id="tbxWhoCares" type="text" class="ImaDatePicker"/>
So regardless of the id you should be able to do this in your script:
$(".ImaDatePicker").datepicker();
The problem with non-unique ID's is a big one but should be an easy fix if you set the attributes in the Repeater to ClientIDMode="Predictable" and leave the same attribute in the TextBox to its default.
Update
It seems jquery UI datepicker requires a unique id.
So you can select multiple inputs using a common css class but the id's must be unique otherwise you run into that problem.
It shouldn't work that way...but it does.
Alternatively you could just use the native <input type="date" ... />
$(function() {
$(".ImaDatePicker").datepicker();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<input id="tbxWhoCares" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares" type="text" class="ImaDatePicker" />
<br><br><br>
<input id="tbxWhoCares_1" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares_2" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares_3" type="text" class="ImaDatePicker" />
The link contains an example of richfaces 4 popuppanel:
richfaces popuppanel example
Here is the code:
<rich:toolbar height="26px" id="tb">
<rich:toolbarGroup location="right">
<h:outputLink value="#">
<rich:componentControl event="click" operation="show" target="ls">
<a4j:param name="event" value="event" noEscape="true" />
<rich:hashParam>
<a4j:param noEscape="true" name="top"
value="jQuery(#{rich:element('tb')}).offset().top + jQuery(#{rich:element('tb')}).height()" />
<a4j:param noEscape="true" name="left"
value="jQuery(#{rich:element('tb')}).offset().left + jQuery(#{rich:element('tb')}).width() - p_width" />
</rich:hashParam>
</rich:componentControl>
Search
</h:outputLink>
</rich:toolbarGroup>
</rich:toolbar>
<rich:popupPanel header="Enter Search Terms" id="ls" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" >
<h:panelGrid columns="3">
<h:outputText value="Search:" />
<h:inputText />
<h:outputLink onclick="#{rich:component('ls')}.hide(event); return false;" value="#">Search
</h:outputLink>
</h:panelGrid>
</rich:popupPanel>
<h:outputScript type="text/javascript" target="body">
p_width = #{rich:component('ls')}.width();
</h:outputScript>
But the popup is appearing in random places, i.e. sometimes under the bar, and then have to scroll and sometimes above. Is it possible to make sure it always appears right above the bar while being attached to it?
The top and left parameters set the position of the panel, change them to where you want the panel to be, or call the method directly:
RichFaces.component('panelId').show(null, {top: "800px", left: "500px"})
You're using the part of the example that specifically sets the panel under the bar so it shouldn't be surprising when the panel appears there.
I want to create a JSF form where users can write their name and surname and validate them using JSF validators. The problem is that I would like to set the same space between the 2 inputText boxes in the form, in both cases, when the typed data is correct according to the validator, and when it is not correct. So if between the 2 inputText boxes there are X pixels if the user has not typed anything, when typed name is not correct, the error showing message should be displayed between the 2 inputText boxes and the pixels between them should be also X px. I suppose this is a CSS issue, but I am unable to get it, so any help would be appreciated.
Here is my code
<h:form>
<p:panel id="panelregister">
<h:panelGrid columns="1">
<!--Name-->
<p:inputText id="name" label="name" size="32" maxlength="9"
value="#{mManagedBean.name}">
<f:validator validatorId="packagevalidators.NameValidator"/>
</p:inputText>
<p:watermark for="name" value="Name (*)" />
<p:message for="name"/>
<!--Surname-->
<p:inputText id="surname" label="surname" required="true" size="32" maxlength="9"
value="#{mManagedBean.surname}"
requiredMessage="Must enter a surname">
<f:validator validatorId="packagevalidators.SurnameValidator"/>
</p:inputText>
<p:watermark for="surname" value="Surname (*)" />
<p:message for="surname" />
<p:commandButton value="Submit" action="#{mManagedBean.save}" ajax="false" />
</h:panelGrid>
</p:panel>
</h:form>
You are using h:panelGrid which renders as HTML <table>.
p:message will be rendered as div and by default that div won't have any content so it won't take any space you provide.
One way to do this is to use a h:panelGroup around it and give pre defined height of p:message
Example:
<h:panelGroup layout="block" style="height:27px">
<p:message for="name" />
</h:panelGroup>
i'm using jqgrid asp.net component .how can i change a filed width and height (text box or combo) in add and edit dialog boxes?
Thank you
At the last im found it
1 you need to specify edittype attribute
2 after that specify editfiled attributes tag
for text area
<trirand:JQGridColumn DataField="Remarks" HeaderText="Remarks" Editable="true" EditType="TextArea">
<Formatter>
<trirand:CustomFormatter FormatFunction="formatRating" UnFormatFunction="unformatRating" />
</Formatter>
<EditFieldAttributes>
<trirand:JQGridEditFieldAttribute Name="cols" Value="80" />
<trirand:JQGridEditFieldAttribute Name="rows" Value="6" />
</EditFieldAttributes>
</trirand:JQGridColumn>
for text box
<trirand:JQGridColumn DataField="Design" HeaderText="Design" Editable="true" EditDialogFieldSuffix=" (MAX - 10)">
<Formatter>
<trirand:CustomFormatter FormatFunction="formatRating" UnFormatFunction="unformatRating" />
</Formatter>
<EditFieldAttributes>
<trirand:JQGridEditFieldAttribute Name="size" Value="2" />
</EditFieldAttributes>
</trirand:JQGridColumn>
I want to replace all kind of buttons on my page with div as bellow:
<div class="button">
<div class="button_left"></div>
<div class="button_center">save</div>
<div class="button_right"></div>
</div>
I replace components onto h:commandLink and it work with most of them,
except those like this:
<h:form>
<h:commandButton value="do it" action="#{myBean.myFirstAction()}" />
<h:commandButton value="do that" action="#{myBean.mySecondAction()}" />
</h:form>
How to deal with it?
[edit]: a4j:commandButton is an example of component that work fine. The difference between those component is that h:commandButton ganerate input type="submit" and the rest generate input type="button".