iT邦幫忙

0

想請問這個問題有解嗎?

這是我表單的其中一部份

https://ithelp.ithome.com.tw/upload/images/20190325/20110132cXXSRQqjC3.jpg

若我的外科病史點選有會變成下面這樣
https://ithelp.ithome.com.tw/upload/images/20190325/20110132nPMvaI6tV3.jpg

今天我想把textbox改成textarea,結果變成這樣
https://ithelp.ithome.com.tw/upload/images/20190325/20110132v1FW7WZ4pE.jpg

不但沒變成textarea,位置還有點偏
想請問這個有辦法解決嗎?

html

                        <div class="row-flex">
                            <div class="col-label">
                                <label class="control-label">外科病史</label>
                            </div>
                            <div class="col-input col-inner-wrapper">
                                <div class="icheck-row input-group-others">
                                    @for (int i = 0; i < Model.SurgicalHISToryCodeList.Count; i++)
                                    {
                                        @Html.HiddenFor(m => m.SurgicalHISToryCodeList[i].Value, new { Value = Model.SurgicalHISToryCodeList[i].Value })
                                        <label>
                                            @Html.RadioButtonFor(m => m.SurgicalHISToryCode, Model.SurgicalHISToryCodeList[i].Value)
                                            @Html.DisplayFor(m => Model.SurgicalHISToryCodeList[i].Show)
                                        </label>
                                        if (Model.SurgicalHISToryCodeList[i].WithNote)
                                        {
                                            <label>:</label>
                                            @Html.TextBoxFor(m => Model.SurgicalHISToryCodeList[i].Note, new { @class = "form-control" })
                                            @Html.DisplayFor(m => Model.SurgicalHISToryCodeList[i].Show2)
                                        }
                                    }
                                    @Html.ValidationMessageFor(m => m.SurgicalHISToryCode, "", new { @class = "valid-error" })
                                    <div style="display:inline-block;" id="SurgicalHISToryCodeBlock">
                                        <div class="col-label">
                                            <label class="control-label">手術或外科疾病發生時間,處理情形及目前狀況</label>
                                        </div>
                                        <div class="col-input">
                                            @Html.TextAreaFor(m => m.SurgicalNote, new { @class = "form-control" })
                                        </div>
                                    </div><!-- /.div -->
                                </div>
                            </div>
                        </div><!-- /.row -->

jquery

    $(function () {
        registerActiveBlock('input[name=SurgicalHISToryCode]', 'Y', '#SurgicalHISToryCodeBlock');
    })
    function triggerActiveBlock(controllerSelector, activeValue, activeBlockSelector) {
        var v = $(controllerSelector + ':checked').val();
        if (v == activeValue) {
            $(activeBlockSelector).show();
        }
        else {
            $(activeBlockSelector).hide();
        }
    }
    function registerActiveBlock(controllerSelector, activeValue, activeBlockSelector) {
        $(controllerSelector).on('change', function () {
            triggerActiveBlock(controllerSelector, activeValue, activeBlockSelector);
        });
        // init once
        triggerActiveBlock(controllerSelector, activeValue, activeBlockSelector);
    }
看更多先前的討論...收起先前的討論...
Homura iT邦高手 2 級 ‧ 2019-03-25 09:36:17 檢舉
你的table tr的height是不是有限制?
tenno081 iT邦新手 4 級 ‧ 2019-03-25 09:46:27 檢舉
沒有耶

這是我的CSS
.box-title.form-box-title {
font-weight: 700;
width: 100%;
color: #003366;
padding-bottom: 2px;
border-bottom: solid 1px #a0a0a0;
}

input[type=number].form-control {
width: 70px;
}

.form-flex-container .col-inner-wrapper input[type=number].form-control {
width: 70px;
}

.noshow {
display: none;
}
fillano iT邦超人 1 級 ‧ 2019-03-25 10:04:26 檢舉
你的表格是用div組出來的,一定有其他的style在影響。請在瀏覽器上用滑鼠右鍵點一下textarea,然後選「檢查」。在開發工具中稍微調整一下選擇的dom,讓他選到上一層的div.col-input,看一下列出來的style,這樣才知道高度限制是在哪個style指定的。如果不是在這裡,那往外層的dom找找看。
tenno081 iT邦新手 4 級 ‧ 2019-03-25 10:14:50 檢舉
謝謝,但是我最好奇的是我把他從textbox改成textboxarea了,可是他卻沒變成
Textboxarea,反而不要用JQUEY不做出隱藏顯示功能卻反而正常@@

1 個回答

0
小魚
iT邦高手 1 級 ‧ 2019-03-25 11:40:12

善用用開發人員工具,
先確認他是不是textarea,
再看看是不是被CSS限制住了,
另外textarea一般是用來處理大量且多行資料的,
你只給他這麼小的空間,
前面還寫了很多文字,
看起來就覺得怪怪的...

tenno081 iT邦新手 4 級 ‧ 2019-03-26 09:45:30 檢舉

感謝,我目前是做到這樣
https://ithelp.ithome.com.tw/upload/images/20190326/201101320n8KuBUMLk.jpg

<div style="display:none;" id="SurgicalHISToryCodeBlock">
    <div class="control-label">
        <label class="control-label">手術或外科疾病發生時間,處理情形及目前狀況</label>
    </div>
    <div>
        @*@Html.TextBoxFor(m => m.SurgicalNote, new {style = "width:500px", @class = "form-control",  })*@
        @Html.TextAreaFor(m => m.SurgicalNote, new { @class = "form-control", })
    </div>
</div><!-- /.div -->        

display改成none,然後再把下面 class="col-input"給拿掉
我大概是希望是這樣,只是不知道為什麼要把 class="col-input"
拿掉才能正常?

我要發表回答

立即登入回答