2016-02-12 136 views
-2

我有一個span標籤。內部表的td元素。我正在使用x-editable組件來形成網格。正如您在附加圖片中看到的那樣,文本「OB1 Charity License1」將不在標籤中。對此有何幫助? enter image description here使用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 || &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>

+1

你想實現的具體效果現在還沒有達到? – RickyTomatoes

+0

文本「OB1 Charity License1」應該作爲「慈善」(左起第二個)容納。 – TechTurtle

+0

容納方式如果箱子擴大以適合文本或者文本被箱子夾住,佈局如何響應前一種場景箱子尺寸的變化?如果盒子太寬而無法放入視口,那麼這些盒子會突破第二行?這個問題需要更多的細節和實際的CSS來獲得有用的答案。 – RickyTomatoes

回答

0

我能解決這個問題。真正的罪魁禍首是HTML中的「class =」form-control「,在刪除它之後,我得到了期望的結果,因爲沒有框顯示。請注意,這個css類不是由我創建的,它是由AngulaJS圖書館提供

相關問題