This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch 4.15
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/4.15 by this push:
new d9503f4 UI - Zone Wizard - Fixes the IP range form fields are too
narrow (#5287)
d9503f4 is described below
commit d9503f4d7646d274288757feceb86311cfad33d9
Author: Hoang Nguyen <[email protected]>
AuthorDate: Mon Aug 9 15:07:39 2021 +0700
UI - Zone Wizard - Fixes the IP range form fields are too narrow (#5287)
* resize form input to not cut text
* fix field width on firefox
---
ui/src/views/infra/zone/IpAddressRangeForm.vue | 51 ++++++++++++++++----------
1 file changed, 32 insertions(+), 19 deletions(-)
diff --git a/ui/src/views/infra/zone/IpAddressRangeForm.vue
b/ui/src/views/infra/zone/IpAddressRangeForm.vue
index cbb5463..866eeb2 100644
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@@ -37,8 +37,8 @@
:layout="isMobile() ? 'horizontal': 'inline'"
:form="form"
@submit="handleAddRange">
- <a-row :gutter="12">
- <a-col :md="4" :lg="4">
+ <div class="form-row">
+ <div class="form-col">
<a-form-item>
<a-input
v-decorator="[ 'gateway', {
@@ -48,8 +48,8 @@
autoFocus
/>
</a-form-item>
- </a-col>
- <a-col :md="4" :lg="4">
+ </div>
+ <div class="form-col">
<a-form-item>
<a-input
v-decorator="[ 'netmask', {
@@ -58,16 +58,16 @@
:placeholder="$t('label.netmask')"
/>
</a-form-item>
- </a-col>
- <a-col :md="4" :lg="4">
+ </div>
+ <div class="form-col">
<a-form-item>
<a-input
v-decorator="[ 'vlan', { rules: [{ required: false }] }]"
:placeholder="$t('label.vlan')"
/>
</a-form-item>
- </a-col>
- <a-col :md="4" :lg="4">
+ </div>
+ <div class="form-col">
<a-form-item>
<a-input
v-decorator="[ 'startIp', {
@@ -86,8 +86,8 @@
:placeholder="$t('label.start.ip')"
/>
</a-form-item>
- </a-col>
- <a-col :md="4" :lg="4">
+ </div>
+ <div class="form-col">
<a-form-item>
<a-input
v-decorator="[ 'endIp', {
@@ -105,13 +105,13 @@
:placeholder="$t('label.end.ip')"
/>
</a-form-item>
- </a-col>
- <a-col :md="4" :lg="4">
- <a-form-item :style="{ display: 'inline-block', float: 'right'
}">
+ </div>
+ <div class="form-col">
+ <a-form-item :style="{ display: 'inline-block', float: 'right',
marginRight: 0 }">
<a-button type="primary" html-type="submit">{{ $t('label.add')
}}</a-button>
</a-form-item>
- </a-col>
- </a-row>
+ </div>
+ </div>
</a-form>
</template>
</a-table>
@@ -180,12 +180,12 @@ export default {
{
title: this.$t('label.gateway'),
dataIndex: 'gateway',
- width: 150
+ width: 140
},
{
title: this.$t('label.netmask'),
dataIndex: 'netmask',
- width: 150
+ width: 140
},
{
title: this.$t('label.vlan'),
@@ -195,12 +195,12 @@ export default {
{
title: this.$t('label.start.ip'),
dataIndex: 'startIp',
- width: 130
+ width: 140
},
{
title: this.$t('label.end.ip'),
dataIndex: 'endIp',
- width: 130
+ width: 140
},
{
title: '',
@@ -283,3 +283,16 @@ export default {
}
}
</script>
+
+<style scoped lang="less">
+.form-row {
+ display: grid;
+ grid-template-columns: 145px 145px 130px 145px 145px 70px;
+ justify-content: center;
+
+ @media (max-width: 768px) {
+ display: flex;
+ flex-direction: column;
+ }
+}
+</style>
