How to gen border on the same row of css with different number of elements in 2 groups in and But the border must be evenly spaced on the same row

Question

Because I'm a bit weak in css, I hope everyone can help me How can the border be uniform on the same row with different numbers of elements in the group?

I want the border of group test 1 and group test 2 to be equal, what happens?

This is my asp.net core code using devextreme:

<div class="card-custom">
        @(
            Html.DevExtreme().Form<Deposit_LoandepositWithdrawModel>().ID("dxFormReceipt").ReadOnly(false).ColCountByScreen(c => c.Sm(1).Xs(1).Md(3).Lg(4)).LabelMode(FormLabelMode.Floating)
            .Items(item =>
            {
                item.AddGroup().CssClass("BorderCss").Caption("Test 1").ColCountByScreen(c => c.Xs(1).Md(1).Lg(1).Sm(1)).ColSpan(1).Items(grItem => {
                    grItem.AddSimpleFor(i => i.PaymentDate).Editor(e => e.DateBox().ID("dateBoxReceiptDatePayDelivery").LabelMode(EditorLabelMode.Floating).Label("Ngày").DisplayFormat("dd/MM/yyyy").UseMaskBehavior(true).DateSerializationFormat("yyyy-MM-dd").Max(DateTime.Now).Min(new DateTime(1990, 1, 1)).Value(DateTime.Now));
                    grItem.AddSimpleFor(i => i.PayListNum).Editor(e => e.TextBox().ID("PayListNum_tesst")); 
                }); 
                item.AddGroup().CssClass("BorderCss").Caption("Test 2").ColCountByScreen(c => c.Xs(1).Md(1).Sm(1).Lg(1)).ColSpan(2).Items(grItem => {
                    grItem.AddSimpleFor(i => i.PaymentTypeCode).Editor(e => e.RadioGroup().OnValueChanged("onChanged_RadioGroup").DataSource(d => d.Mvc().Controller("Metadata").LoadAction("GetMetadataLoader").LoadMode(DataSourceLoadMode.Raw).LoadParams(new { grouptext = "RECEIPT_TYPE_CODE" }).Key("Id")) .ValueExpr("ItemCode").DisplayExpr("ItemText").Layout(Orientation.Horizontal).ID("dxRadioGroupPaymentTypeCode").Value(1));
                    grItem.AddSimpleFor(i => i.BankDetailId).Editor(e => e.SelectBox().Placeholder(" ").DataSource(d => d.Mvc().Controller("BankDetail").LoadMode(DataSourceLoadMode.Raw).LoadAction("GetByBranchCode").LoadParams(new { BranchCode = Model.typePermission.Users.BranchCode }).LoadMode(DataSourceLoadMode.Raw).Key("Id")).ValueExpr("Id").DisplayExpr("BankName").ID("dxSelectBoxBankDetailId").Label("Ngân hàng").LabelMode(EditorLabelMode.Floating));
                    grItem.AddSimpleFor(i => i.BankTranCode).Editor(e => e.TextBox().Width("40%")).Label(l => l.Text("Mã giao dịch")); 
                });
                item.AddEmpty(); 
                item.AddGroup().CssClass("BorderCss").Caption("Test 3").ColCountByScreen(c => c.Xs(1).Md(1).Sm(1).Lg(2)).ColSpan(2).Visible(true).Items(grItem => {
                    grItem.AddSimpleFor(i => i.ReceipterTypeCode).Editor(e => e.SelectBox().DataSource(d => d.Mvc().Controller("Metadata").LoadAction("GetMetadataLoader").LoadMode(DataSourceLoadMode.Raw).LoadParams(new { grouptext = "RECEIPTER_TYPE" }).Key("Id")).Value("NV").ValueExpr("ItemCode").DisplayExpr("ItemText").Placeholder("").OnValueChanged("checkByReceipterTypeCode")); 
                    grItem.AddSimpleFor(m => m.ReceipterName).Label(l => l.Text("Họ tên khách hàng")).Editor(e => e.TextBox().Disabled(true).ReadOnly(true).ID("dxSelectBoxKH").Placeholder(" ").Buttons(b => b.Add().Name("btnRemoveStaff").Location(TextEditorButtonLocation.After).Widget(w => w.Button().Text("Tìm kiếm").Disabled(false).Icon("find").OnClick("onClickBtnRemoveStaff").ID("btnRemoveStaff").Type(ButtonType.Success).StylingMode(ButtonStylingMode.Outlined))));
    
                    grItem.AddSimpleFor(m => m.ReceipterName).Label(l => l.Text("Họ tên nhân viên")).Editor(e => e.SelectBox().OnSelectionChanged("onChooseStaff").DisplayExpr("Fullname").ValueExpr("Fullname").Disabled(false).ID("dxSelectBoxNvtd2").Placeholder(" ").DataSource(d => d.Mvc().Controller("BranchStaff").LoadAction("GetByBranchCode").LoadMode(DataSourceLoadMode.Processed).LoadParams(new { branchcode = new JS("GetBranchCode") }).Key("StaffCifCode")));
                    grItem.AddSimpleFor(m => m.ReceipterCifCode).Editor(e => e.TextBox().ReadOnly(true));
                    grItem.AddSimpleFor(m => m.ReceipterIdentifyTypeId).Editor(e => e.SelectBox().Placeholder(" ").DataSource(d => d.Mvc().Controller("Metadata").LoadAction("GetMetadataLoader").LoadMode(DataSourceLoadMode.Raw)
                    .LoadParams(new { groupText = "IDENTIFYTYPE" }).Key("Id")).ValueExpr("ItemId").DisplayExpr("ItemText").ReadOnly(true));
                    grItem.AddSimpleFor(m => m.ReceipterIdentifyNumber).Editor(e => e.TextBox().ReadOnly(true));
                });
                item.AddEmpty();
            })   
         )
    </div>

and my css snippet

.BorderCss {
        border: 1px solid !important;
        border-color: darkgreen !important;
        border-radius: 10px !important;
        padding: 5px !important;
        margin: 5px !important;
        box-sizing: border-box !important;
    }

Why do you tagspam all sorts of irrelevant tags but not CSS? Please post a minimal reproducible example with RENDERED HTML and CSS using the [<>] stacksnippet — mplungjan
– mplungjan, Commented Jan 22, 2024 at 8:05
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D
– Paulie_D, Commented Jan 22, 2024 at 9:20
Yub, What I mean is that I want the borders of group test1 and group test2 to be equal — Harry Phan
– Harry Phan, Commented Jan 22, 2024 at 9:28

arifulsajib · Accepted Answer · 2024-01-22 08:24:15Z

0

You can make use of the Flexbox layout to create a consistent border height for each group. Modify your CSS like this:

.BorderCss {
        /* Use Flexbox layout */
        display: flex;
        flex-direction: column;
        
        /* write all your CSS here */
    }

This should work.

answered Jan 22, 2024 at 8:24

arifulsajib

2971 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harry Phan Over a year ago

I tried it but it's not working :(

Harry Phan Over a year ago

I think if I just use css it will be very difficult, I wonder what if I use js but I have no idea about it

Harry Phan Over a year ago

yub i can set the height, but i select another item in my RadioBox then it won't work

Collectives™ on Stack Overflow

How to gen border on the same row of css with different number of elements in 2 groups in and But the border must be evenly spaced on the same row

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related