I have a openui5 dialog with a grid layout in it. dialog is constructed with an xml view, a couple of buttons and the call
//
// Create view
//
var view = sap.ui.view({
type:sap.ui.core.mvc.ViewType.XML,
viewName:"some.viewname"
});
blahDialog = new sap.ui.commons.Dialog({
modal : true,
title: "Create New Blah",
buttons : [ btnSave, btnCancel ],
content : [ view ]
});
in the xml view I have a grid. One column for the label, one column for the UI element the user enters her data. This element can be a textfield, datepicker, dropdown, whatever. I have planned 2 columns for the label, 6 for the UI elements. Works fine so far.
But now I have a new requirement. In the first row, I want 2 small buttons right to the text field. So I gave the text field only 4 cols and the remaining 2 for the new buttons, 1 for each. The buttons only contain an icon so they are not very large.
This is how the dialog looks like:
https://dl.dropboxusercontent.com/u/25030606/pic.png
Here is the XML:
<mvc:View xmlns:c="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns="sap.ui.commons"
controllerName="exporgui5.expensedialog"
xmlns:html="http://www.w3.org/1999/xhtml"
width="360px">
<l:Grid>
<l:content>
<Label text="Trip">
<layoutData>
<l:GridData span="L2" />
</layoutData>
</Label>
<TextField width="100%" value="Some value" editable="false">
<layoutData>
<l:GridData span="L4"/>
</layoutData>
</TextField>
<Button icon="icons/luggage--plus.png"><layoutData>
<l:GridData span="L1"/>
</layoutData>
</Button>
<Button icon="icons/bin-metal-full.png"><layoutData>
<l:GridData span="L1"/>
</layoutData>
</Button>
<Label text="Expense Type">
<layoutData>
<l:GridData span="L2" />
</layoutData>
</Label>
<DropdownBox id="drpExpenseType"
items="{expTypes>/k}"
displaySecondaryValues="true"
change="onExpTypeChange" width="100%">
<layoutData>
<l:GridData span="L6"/>
</layoutData>
<c:ListItem text="{expTypes>shortName}" additionalText="{expTypes>description}" key="{expTypes>id}"/>
</DropdownBox>
<Label text="Date">
<layoutData>
<l:GridData span="L2" />
</layoutData>
</Label>
<DatePicker locale="DE" id="date" yyyymmdd="{svModel>/dateValue}" change="onDateChange" width="100%">
<layoutData>
<l:GridData span="L6" />
</layoutData>
</DatePicker>
</l:content>
</l:Grid>
</mvc:View>
I thought in one row I can put elements whose width sums up to some total number of columns, in my case this is 8. And as long as I don't do this button thingy it works that way. Why does the "Expense Type" label show up in the first row? What do I have to do so that the text field for trip spans over 4 columns and the 2 button come right next to it?
Any help is appreciated.
Thanks
Kai
According to the documentation of the Grid, the sum per row is 12. If you want to have the text field and the two buttons in one row you can assign the following spans:
TextField: 8
Button 1: 2
Button 2: 2
SUM: 12
I don't know about the grid layout but I'd try using a matrix layout. You'll have more control over your rows and still have a grid like layout.
As I'm not experienced in XML views I unfortunately can't help you with the code but here's the associated documentation: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/commons/demokit/MatrixLayout.html
You should add a defaultSpan attribute to your View:
<l:Grid
...
defaultSpan="L3 M5 S12"
>
According to API-doc this specifies the number of "cols" an element in the grid can use. L, M and S are the screen-resolutions. Max number of cols are 12 in Grid-Layout.
Related
I have an AntD Modal which has a Form that I'm struggling to align some text on. Here is what it looks like with the text highlighted in yellow. I would like it to be aligned with the first column where I've drawn the red box.
The section of code that contains the "personal information" text and the applicant form fields looks like this:
<Form
ref={this.formRef}
{...formItemLayoutWithOutLabel}
onFinish={onFinish}
id="myForm"
validateMessages={validateMessages}
initialValues={{ applicants: [{ firstName: '' }] }}
>
{
<Form.List name="applicants">
{(fields, { add, remove }) => {
return (
<div>
<Form.Item {...formItemLayout}}>
<Row>
<Col span={24}>
Personal Information
</Col>
</Row>
</Form.Item>
{fields.map((field, index) => (
<Form.Item {...formItemLayout} label={`Applicant #${index + 1}`} key={field.key}>
<Row key={field.key} gutter={[0, 8]} justify="start">
<Col span={12}>
<Row gutter={[4, 4]}>
<Col span={7}>
<Form.Item name={[field.name, 'firstName']} fieldKey={[field.fieldKey, 'firstName']} rules={rules}>
<Input placeholder="First Name" ref={this.inputRef} />
</Form.Item>
</Col>
I thought perhaps if I set the label to a blank space it'd accomplish what I want on the form item and it does, but of course, the colon remains which I don't want. So I'm guessing this is not the right way to accomplish this and perhaps there's a better CSS route to go or something.
I'm looking for help on how to get the alignment that I want. Ultimately I'd also like to put "Employer Information" aligned with the right column over the employer information as well.
EDIT #1
Adding a simplified codesandbox of this problem here. Appreciate any ideas!
CodeSandBox
There is an option for Form.Item to display the colon behind the label. You can check it out here
Disable it would accomplish what you want
<Form.Item {...formItemLayout} label=" " colon={false}>
<Row gutter={[0, 8]} justify="start">
<Col span={12}>Personal Information</Col>
<Col span={12}>Employer Information</Col>
</Row>
</Form.Item>
You can add labelCol and wrapperCol like below:
<Form
layout="horizontal"
labelCol={{
span: 6
}}
wrapperCol={{
span: 18
}}
labelAlign="right"
>
...
</Form>
I am trying to get my text area to display with row height recognition. I've followed several of the suggestions that have been made on this board.
I currently import componentClass from react-bootstrap and in my form field, I have:
<div className="form-group">
<label htmlFor="overview">Outline your proposal</label>
<Field
name="overview"
componentClass="textarea"
rows={4}
className={
"form-control" +
(errors.overview && touched.overview ? " is-invalid" : "")
}
/>
<ErrorMessage name="overview" component="div" className="invalid-feedback" />
</div>
It still renders in a single line.
What is the hidden secret about making this work with row numbers for text area?
I am using react-bootstrap with a project and one component is having code as below. I want the input and button to appear together and take up the whole space provided by the Col. These both(input and button) are showing up together but the complete space is not occupied. Please Help!
<Row>
<Col xs={12} md={10} mdOffset={1} >
<Form className="addGoalForm" inline onSubmit={
handleSubmit
} >
<FormGroup className="addGoalForm">
<InputGroup>
<FormControl ref={textInput} type="text"/>
</InputGroup>
<Button bsStyle="primary" type="submit"> Add Goal </Button>
</FormGroup>
</Form>
</Col>
</Row>
Try taking the inline prop off from the Form
Problem:
The problem with your code is, you created an outer column, and added two elements inside it, they will just stack to the left - this is default behavior.
Solution:
Add column size for both input and button.
How?
Bootstrap col-xs-10 for input and col-xs-2 for button to occupy col-xs-12 of parent(consider your grid size for md, l sizes)
Create custom classes with width 80%/20% or as required.
I have the following form, but I don't get align checkbox
<!-- Multiple Checkboxes (inline) -->
<div class="form-row">
<label class="chkdonar" for="donarchkform-0">Si, quiero donar a AMIAB</label>
<input id="donarchkform-0" checked="checked" name="donarchkform" type="checkbox" value="Si, quiero donar a AMIAB" />
</label>
this is the field where I have problem for getting align
Here is my code from the form
http://jsbin.com/mazuyinobu/edit?html,css,output
I would like to align my form look like this:
http://www.amiab.com/hacerte-socio
I hope i didn't edit your own jsbin.
http://jsbin.com/pewariguro/1/edit?html,css,output
Here's what I've done:
No need for negative margin on div.
Set margin to 0 on the inputs
Make sure the text fits on 1 line.
Align the checkbox to the left.
It seems this ought to be dead simple, but I'm stuck. I've written some asp.net code that outputs a pair of radio buttons:
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='<%=gblYapperChecked %>' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' checked='<%=gblNonYapperChecked %>' />
if (registrationUser.isYapper == 1)
{
gblYapperChecked = "checked";
gblNonYapperChecked = "";
}
else
{
gblYapperChecked = "";
gblNonYapperChecked = "checked";
}
As expected, I get two radio buttons, "Yapper" and "Non-Yapper". However, even when I step thru my code and see that gblYapperChecked is "checked" and gblNonYapperChecked is "", Non-Yapper is always selected by default in the web browser.
What am I doing wrong?
UpdateHere is the HTML code as it actually appears in the browser. "Yapper" should be selected, but "Non-Yapper" appears selected instead.
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='checked' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='yapper' id='chkNonYapper' value='nonYapper' checked='' />
Note that the HTML "checked" attribute is generally determined by being present or not present. See http://www.w3.org/TR/html401/interact/forms.html#adef-checked for the spec.
In particular what this means is that if you want it to be checked you cna have checked, checked=true, checked=checked and so on. So what you want is to not have the checked attribute at all if you don't want the checkbox selected.
I would advise structure such as:
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' <%=registrationUser.isYapper?"":"checked='checked'" %> />
This should eliminate your checked attribute entirely dependant on your isYapper boolean.
The "checked" attribute is weird, it has no value. If a radio button is checked, include the "checked" attribute by itself in the tag. If unchecked, don't do anything. See here:
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_RADIO.html
Are you setting dblYapperChecked before or after the control is created? Personally, I'd run the radio buttons on the server side and set the checked value on the control directly, but your method should work if the values are set soon enough (try initializing them to the expected values and see if that makes a difference...)