etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Hoang Nguyen 2021-08-09 15:07:39 +07:00 committed by GitHub
parent 05d1d568fb
commit d9503f4d76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ui/src/views/infra/zone/IpAddressRangeForm.vue
View File

@ -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>