Question

我有一个span标签。 Inside Table的td元素。我正在使用x-editable组件来构成网格。正如您在附图中看到的那样，文本＆＃34; OB1 Charity License1＆＃34;正在走出标签。对此有何帮助？

从HTML发布整个div标记：

＆＃13;

<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 || &apos;empty&apos; }}</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>

＆＃13;

Answer 1

我能解决这个问题。真正的罪魁祸首是＆＃34; class =＆＃34; form-control＆＃34;在HTML中。删除后，我得到了所需的结果，因为没有显示框。请注意，这个css类不是由我创建的，它是由AngulaJS库提供的。

文本越过span标记

1 个答案: