1
の要素を揃える問題を有する画像を参照してください、そのようはHTML
こんにちは、
私が検証して、示された位置に検証し、RFDを配置したい位置に合わせたいですRFDの上にあり、両方とも場所と就航日の隣に正しく配置されています。ここで
は、私はそれが他の方法のように柔軟ではないので、それはアクセスできないので、あなたがレイアウトのためにテーブルを使用していないお勧めします私のhtml
<div class="col-md-10 session-col">
<table id="session-details" data-bind="css: !$parents[1].newSessionBlocker() ? 'no-session' : ''">
<tbody>
<tr>
<td>
<table class="inner-table">
<tr style="min-width: 267px; width: 100%;">
<td class="grey">
<strong class="text-danger">*</strong><label for="sessionType">Session Type</label>
</td>
<td>
<select class="form-control entities form-len" id="sessionDropdown"
data-bind="disable: sessionHasBeenSaved(),
event:{ change:$parent.sessionTypeChanged},
options: $parents[1].sessionTypes,
value: sessionType,
optionsCaption: 'Choose...' ,
css:{ 'cell-error': !$parents[1].newSessionBlocker()}"></select>
</td>
</tr>
<tr>
<td class="grey" style="white-space: nowrap">
<strong class="text-danger">*</strong><label>Session Name</label>
</td>
<td>
<input id="session-name" class="form-control entities" data-bind="value: title, disable: $parent.isSessionReadOnly" required placeholder="Required" maxlength="100" />
</td>
</tr>
<tr>
<td class="grey">
<span class="text-danger" data-bind="visible: sessionType() === document.appConfig.itemTypes.multiSegment">*</span><label>DSID</label>
</td>
<td>
<input class="form-control entities"
data-bind="value: externalId, disable: $parent.isSessionReadOnly, attr: {placeholder: getMultiSegConditionalRequiredPh}" maxlength="90" />
</td>
</tr>
</table>
</td>
<td>
<table class="inner-table">
<tr>
<td class="grey">
<span class="text-danger" data-bind="visible: sessionType() === document.appConfig.itemTypes.multiSegment">*</span><label>Series Name</label>
</td>
<td>
<input class="form-control entities"
data-bind="value: textTitle, disable: $parent.isSessionReadOnly, attr: {placeholder: getMultiSegConditionalRequiredPh}" maxlength="100" />
</td>
</tr>
<tr>
<td class="grey"><label>Episode #</label></td>
<td>
<input class="form-control entities"
data-bind="value: episodeNumber, disable: $parent.isSessionReadOnly" maxlength="25" />
</td>
</tr>
<tr>
<td class="grey"><label>Episode Name</label></td>
<td>
<input class="form-control entities"
data-bind="value: ptsEpisode, disable: $parent.isSessionReadOnly" maxlength="200" />
</td>
</tr>
</table>
</td>
<td class="list3">
<div >
<table class="inner-table">
<tr>
<td class="grey"><label>Location</label></td>
<td >
<input class="form-control entities new"
data-bind="value: location, disable: $parent.isSessionReadOnly" maxlength="250" />
</td>
</tr>
<tr>
<td class="grey"><label class="list3">Air Date</label></td>
<td>
<div style="position:relative; width: 100%">
<div class='date' id='datetimepicker'>
<input type="text" id="datepicker" size="10" style="height: 30px;" class="form-control hasDatepicker entities input-datepicker with-calendar-icon"
data-date-format="mm/dd/yyyy" enable="false" data-bind="numeric: true, value: airDate, disable: $parent.isSessionReadOnly" maxlength="8" />
</div>
</div>
</td>
</tr>
<tr>
<td class="grey"><label>Year</label></td>
<td>
<select class="form-control entities" data-bind="options: $parent.years,
disable: $parent.isSessionReadOnly,
value: year,
optionsCaption: 'Choose...'"></select>
</td>
</tr>
</table>
</div>
</td>
<td>
<table class="inner-table">
<tr>
<label id="description"style="padding-top: 7px;">Description</label>
<textarea class="form-control entities" style="resize: none;" maxlength="4000" id="desc-text"
data-bind="value: description, disable: $parent.isSessionReadOnly"></textarea>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="verify-checkbox" style="margin-left: 21px !important">
<div class="checkbox checkbox-primary pull-left">
<input type="checkbox" id="logger-verify" data-bind="checked: sessionStatus, disable: !$parent.parentLogger().isContentOwner() || (oldSessionStatus && $parent.parentLogger().isContentOwner())">
<label for="logger-verify">Verified</label>
</div>
<div class="checkbox checkbox-primary pull-left w40">
<input type="checkbox" id="logger-rfd"
data-bind="checked: readyForDistribution, disable: readyForDistributionDisabled, click: readyForDistributionChange">
<label for="logger-rfd">RFD</label>
</div>
</div>
CSS
#session-details .inner-table tr:last-child > td {
border-bottom: none !important;
width:initial;
}
#session-name{
background:#2A2F3B;
opacity:10%;
border-color:#2A2F3B;
color:#FFFFFF;
}
#sessionDropdown{
background:#2A2F3B;
opacity:10%;
border-color:#2A2F3B;
color:#FFFFFF;
}
#session-details>tbody>tr>td{
padding: 0;
vertical-align: top;
}
#session-details .checkbox{
margin:0 10px 0 0!important;
}
#session-details{
margin:5px!important;
color:#FFFFFF;
}
.verify-checkbox{
margin:5px!important;
color:#FFFFFF;
margin-top:20px;
}
#session-details textarea.form-control {
height: 90px!important;
width:80%;
margin-left:75px;
}
table#session-details.no-session > tbody > tr > td, table#session-details.no-session .inner-table tr {
display: none;
}
table#session-details.no-session > tbody > tr > td:first-child, table#session-details.no-session .inner-table tr:first-child {
display: table;
}
table#session-details.no-session > tbody > tr > td:first-child {}
table#session-details.no-session {
border: none;
}
#session-details .form-control {
height: 30px!important;
left:0px;
}
だ私を助けてください..
あなたのコードはここに表示のみのチェックボックスを示しています。何らかの方法で実際のインターフェースのコードを投稿することは可能でしょうか？ – trav
こんにちは、私は編集しました！あなたは一見を持ってくださいことができます –