-2
我有一個span標籤。內部表的td元素。我正在使用x-editable組件來形成網格。正如您在附加圖片中看到的那樣,文本「OB1 Charity License1」將不在標籤中。對此有何幫助? 使用span標籤的文本
從HTML發佈整個div標籤:
<div collapse="pnlRuleBasicInformation" class="panel-wrapper" >
<div class="panel-body" id="conditionTable" style="height:200px;overflow: auto;">
<table class="table table-bordered table-hover bg-white">
<tr style="font-weight: bold">
<td style="width:5%">Association</td>
<td style="width:10%">Condition Type</td>
<td style="width:70%" colspan="2">Condition</td>
<td style="width:5%">Soft/Hard</td>
<td style="width:5%">Active</td>
<td style="width:5%">Edit</td>
</tr>
<tr ng-repeat="condition in RuleCreator.Conditions">
<td>
<div ng-show="condition.showAssociation">
<span editable-select="condition.association" class="form-control" e-name="association" e-form="rowform"
e-ng-options="s.id as s.name for s in RuleCreator.Association">{{ RuleCreator.showAssociationName(condition) }}</span>
</div>
</td>
<td>
<!-- Personal, Educational -->
<span editable-select="condition.ConditionType" class="form-control" e-name="SelectedCondition" e-form="rowform"
e-ng-change="RuleCreator.ConditionTypeChange($data,condition.id)"
e-ng-options="s.id as s.name for s in RuleCreator.ConditionType">{{ RuleCreator.showConditionType(condition) }}</span>
</td>
<td style ="width:10%">
<div class="col-lg-1" ng-show="condition.IsConditionTypeSelected">
<span editable-select="condition.conditionOption" class="form-control" e-name="conditionOption" e-form="rowform"
e-ng-change="RuleCreator.ConditionChange($data,condition.id)"
e-ng-options="ddlConditionOptions.id as ddlConditionOptions.name for ddlConditionOptions in RuleCreator.Condition">{{ RuleCreator.showCondition(condition) }}</span>
</div>
</td>
<td><!-- Age -->
<div class="col-lg-8" ng-show="condition.IsConditionSelected">
<table>
<tr>
<!-- is greator than, etc -->
<td style="padding-right:10px" ng-repeat="c in condition.AvailableControls">
<!--<span ng-if="c.ControlType == 'DropDown' || c.ControlType == 'Textbox'">{{c.type}}</span>-->
<span style="display:block" ng-if="c.ControlType == 'DropDown'" e-name="optionId_{{c.id}}" class="form-control"
editable-select="condition.optionId_{{c.id}}" e-form="rowform"
e-ng-change="RuleCreator.setDependentControl($data,condition.id, c.id)"
e-ng-options="ddlOptions.id as ddlOptions.name for ddlOptions in c.Options">{{ RuleCreator.showOptionName(condition,c.id) }}</span>
<span ng-if="c.ControlType=='Textbox'" editable-text="condition.valueEntered" e-name="valueEntered"
e-form="rowform">{{ condition.valueEntered || 'empty' }}</span>
</td>
</tr>
</table>
</div>
</td>
<td>
<span editable-select="condition.stopOption" class="form-control" e-name="stopOption" e-form="rowform"
e-ng-options="ddlstopOptions.id as ddlstopOptions.name for ddlstopOptions in RuleCreator.StopOption">{{ RuleCreator.showStopOption(condition) }}</span>
</td>
<td>
<span editable-checkbox="condition.IsActive" class="form-control" e-form="rowform" e-name="IsActive">{{(condition.IsActive==true?'Yes':'No')}}</span>
</td>
<td style="white-space: nowrap">
<!-- form-->
<form editable-form="" name="rowform" onbeforesave="RuleCreator.saveCondition($data, condition.id)"
ng-show="rowform.$visible" shown="RuleCreator.inserted == condition" class="form-buttons form-inline">
<button type="submit" ng-disabled="rowform.$waiting" title="Save" class="btn btn-sm btn-info">
<em class="fa fa-save"></em>
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel();RuleCreator.ConditionAddEditMode = false;" title="Cancel"
class="btn btn-sm btn-default">
<em class="fa fa-times"></em>
</button>
</form>
<div ng-show="!rowform.$visible" class="buttons">
<button ng-click="rowform.$show();RuleCreator.ConditionAddEditMode = true;" title="Edit" class="btn btn-sm btn-info">
<em class="fa fa-pencil"></em>
</button>
<button ng-click="RuleCreator.removeCondition($index)" title="Delete" class="btn btn-sm btn-danger">
<em class="fa fa-trash"></em>
</button>
</div>
</td>
</tr>
</table>
</div>
</div>
你想實現的具體效果現在還沒有達到? – RickyTomatoes
文本「OB1 Charity License1」應該作爲「慈善」(左起第二個)容納。 – TechTurtle
容納方式如果箱子擴大以適合文本或者文本被箱子夾住,佈局如何響應前一種場景箱子尺寸的變化?如果盒子太寬而無法放入視口,那麼這些盒子會突破第二行?這個問題需要更多的細節和實際的CSS來獲得有用的答案。 – RickyTomatoes