I'm trying to figure out why my header and body rows aren't in sync. I'm using semantic ui for the css. Is it because my body rows are rendered in a different component? I tried moving them all to 1 and it didn't make any difference.
<table className="ui celled table" border="1">
<thead>
<tr>
<th >Status</th>
<th >Service Date of Visit</th>
<th >Claim ID</th>
<th >Insurance Plan</th>
</tr>
</thead>
<tbody>
{this.state.claims.map ( claim => <ClaimRow claim= { claim } /> ) }
</tbody>
and inside the component.
const ClaimRow = ( {claim} =this.props ) => (
<Form.Field>
<tr >
<td >
<input type="radio" name={claim._id} label="That Was Me" value="valid" checked={claim.status === 'valid'} />
Valid? <br />
<input type="radio" name={claim._id} label="Looks Like Fraud" value="fraud" checked={claim.status === 'fraud'} />
Fraud? <br />
<input type="radio" name={claim._id} label="Looks Like Fraud" value="notselected" checked={!claim.status && "defaultchecked"} />
Not Yet Sure
</td>
<td > {claim.claimDate} {claim.status}</td>
<td > {claim.claimID} </td>
<td > {claim.carrier} </td>
</tr>
</Form.Field>
);
ClaimRow.propTypes = {
claim: PropTypes.string.isRequired
};
export default
and the table footer
<tfoot className="full-width">
<tr>
<th colspan="4">
<div className="ui small button">
Approve
</div>
<div className="ui small button">
Approve All
</div>
<div className="ui right floated button" >
Next
<i class="right arrow icon"> </i>
</div>
<div className="ui right floated button" >
<i class="left arrow icon"></i>
Prev
</div>
</th>
</tr>
</tfoot>
</table>
Rows should be returning a <tr> at the top level, not a <Form.Field>.
for me adding this class worked.
.ReactTable .rt-tbody .rt-td{
margin-left: 0;
}
In bootstrap how to use comboBox with multiple checkbox option as in the attached image.
I used multiple checkbox option in dropdown list as below, but i do not wish drop down list with checkbox, instead wish to have like the image attached.
<select multiple="multiple"> .... </select>
From the below way i got the solution
<table>
<tr>
<td>
<div
style="max-height: 350px; overflow-y: scroll; width: 375px;background: white;"
class="scrollbar style-2">
<table class="table">
<thead align="center">
<tr>
<th style="text-align: center;background: #5cb85c;color : white;">List</th>
<th style="background: white;background: #5cb85c;color : white;"></th>
</tr>
</thead>
<tbody style="background: white;">
<%
for (int i = 0; i < 10; i++) {
%>
<tr style="border: 0">
<td style="border: 0">
<div class="[ form-group ]">
<input type="checkbox" name="fancy-checkbox-default_p3_ii<%=i%>"
id="fancy-checkbox-default_p3_ii<%=i%>" autocomplete="off" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btn btn-success ]" style="top: 5px;"> <span
class="[ glyphicon glyphicon-ok ]"></span> <span> </span>
</label> <label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btnCustom active ]"> Default Checkbox<%=i%>
</label>
</div>
</div>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</td>
</tr>
</table>
I am building an application with AngularJS, and I am facing problems with the firefox. I think it's because I use multiple ng-repeat inside others ng-repeat, I have already tried almost all what I found in stackoverflow and forums.
I have a big table with multiple loops, this is what the table looks like :
<table class="booking-table table table-condensed mergeCells"
id="booking-table" ng-if="bookingSelected.accounts.length != 0">
<thead>
<tr>
<th colspan="10" class="transparent separator"></th>
<th colspan="2" style="border-top: 1px solid #000 !important;">OPPORTUNITY
DEFINITION</th>
<td class="separator"></td>
</tr>
<tr>
<th colspan="2">REGION</th>
<th>COUNTRY</th>
<th>MARKETS</th>
<th>SERVICE</th>
<th>TYPE</th>
<th>CUSTOMER</th>
<th>BDO Ref</th>
<th style="width: 100px !important;">Probability %</th>
<th style="width: 110px !important;">Booking Revenue</th>
<th class="gray" style="width: 10px !important;">Nb</th>
<th class="gray" style="width: 221px !important;">Name</th>
<th class="separator"></th>
<th class="transparent po-info left"
style="text-align: center;">PO Number</th>
<th class="transparent po-info left"
style="width: 80px !important; text-align: center;"
colspan="2">PO Amount</th>
</tr>
</thead>
<tbody bindonce
ng-repeat="account in bookingSelected.accounts track by account.id">
<!-- Booking line -->
<tr class="gray">
<td rowspan="2" colspan="10" class="separator"><span
class="remove-opp button-hover" ng-if="isNotReadOnlyAdmin()"
ng-click="addOpportunity(account)"><i
class="fa fa-plus"></i> Add</span><span
class="remove-opp button-hover readOnlyButtons"
ng-if="isReadOnlyAdmin()"><i class="fa fa-plus"></i>
Add</span> <span class="remove-opp button-hover"
ng-if="account.id == null && currentUser.isAdministrator"
ng-click="removeAccount(account)"><i
class="fa fa-times"></i> Remove Account</span></td>
<td colspan="2">BOOKING GOALS</td>
<td rowspan="2" class="separator"></td>
<td class="po-info"></td>
<td class="transparent right po-info input number" colspan="2">
<input ng-model-options="{ debounce: 600 }"
ng-model="account.bookingGoals" class="input-number"
ng-change="totalAccountOpportunity(account)"></input> <span
class="suffix">€</span>
</td>
</tr>
<tr class="gray">
<td colspan="2" class="transparent text-red">REMAINING
BOOKING GOALS proba weight</td>
<td class="po-info"></td>
<td class="transparent right po-info input"
ng-class="{'text-red' : account.remaining > 0, 'text-green' : account.remaining <= 0}"
colspan="2">
<div>
<span> {{ account.remaining | number }} € </span>
</div>
</td>
</tr>
<!-- Account -->
<tr class="orange" bindonce
ng-repeat-start="opportunity in account.opportunities track by opportunity.id">
<td class="remove-opp" ng-if="showRemoveButton(opportunity)"
ng-click="removeOpportunity(account, opportunity)">
<center>
<i class="fa fa-times"></i>
</center>
</td>
<td class="center input" ng-click="makeRowActive(null)"
ng-if="showRemoveButton(opportunity)"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text" ng-model="account.title"></td>
<td class="center input" colspan="2"
ng-click="makeRowActive(null)"
ng-if="!showRemoveButton(opportunity)"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text" ng-model="account.title"></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="COUNTRY" popover-trigger="'focus'"
ng-model="opportunity.country"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="opportunity.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="opportunity.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="opportunity.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="opportunity.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)">{{
opportunity.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opportunity.probability.value >= 90, 'orange' : opportunity.probability.value == 60, 'red' : opportunity.probability.value == 30, 'gray' : opportunity.probability.value < 30}"
ng-click="makeRowActive(null)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="opportunity.probability"
ng-change="updatePoAmmountOpportunity(account, opportunity)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(null)">
<div ng-if="showPoAmmount(opportunity)">
<span> {{ opportunity.poAmmount | number }} € </span>
</div>
</td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 30px;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'"
ng-model="opportunity.nb"></td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 300px !important;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
ng-model="opportunity.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(null)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="opportunity.revenue" uib-popover="REVENUE"
popover-trigger="'focus'" class="input-number"
ng-change="updatePoAmmountOpportunity(account, opportunity)">
</td>
<td class="right po-info input" ng-click="makeRowActive(null)">
<div ng-if="showPoAmmount(opportunity)">
<span> {{ opportunity.poAmmount | number }} € </span>
</div>
</td>
<td class="remove-opp" title="Add opportunity"
ng-if="isNotReadOnly()"
ng-click="addOpportunityChildren(opportunity)">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
<td class="remove-opp readOnlyButtons"
title="Add opportunity (disabled)" ng-if="isReadOnly()">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
</tr>
<!-- Opportunities -->
<tr bindonce
ng-repeat="opp in opportunity.opportunities track by opp.id"
ng-class="{'active' : opp == activeOpp}">
<td class="center input rowSpan" colspan="2"
test="{{ account.title }}" ng-click="makeRowActive(opp)">
{{ account.title }}</td>
<td class="input" ng-click="makeRowActive(null)"><select
ng-model="opp.country" uib-popover="COUNTRY"
popover-trigger="'focus'"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="opp.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="opp.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="opp.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="opp.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" style="padding-left: 5px !important;"
ng-class="{'redB' : opp.bdoNumber == null || opp.bdoNumber == ''}"
ng-click="makeRowActive(opp)">{{ opp.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opp.probability.value >= 90, 'orange' : opp.probability.value == 60, 'red' : opp.probability.value == 30, 'gray' : opp.probability.value < 30}"
ng-click="makeRowActive(opp)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="opp.probability"
ng-change="updatePoAmmountOpportunityChild(opp, account)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(opp)">
<div>
<span> {{ opp.poAmmount | number }} € </span>
</div>
</td>
<td style="width: 30px;" class="input"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'" uib-popover="Nb"
popover-trigger="'focus'" ng-model="opp.nb"></td>
<td class="input" ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
type="text" ng-model="opp.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(opp)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="opp.po" uib-popover="PO Number"
popover-trigger="'focus'">
</td>
<td class="right po-info input number"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" uib-popover="PO Amount"
popover-trigger="'focus'" ng-model="opp.poAmmount"
class="input-number"
ng-change="updatePoAmmountOpportunityChild(opp, account)"></input>
<span class="suffix">€</span></td>
<td ng-if="isNotReadOnly()"><i
class="fa fa-chevron-up remove-opp" title="Move up"
ng-click="opportunityToUp(opportunity, opp)"></i> <i
class="fa fa-chevron-down remove-opp" title="Move down"
ng-click="opportunityToDown(opportunity, opp)"></i> <i
class="fa fa-times remove-opp" title="Remove opportunity"
ng-if="showRemoveButton(opp)"
ng-click="removeOpportunityChildren(opportunity, opp, account)"></i>
<i class="fa fa-clone remove-opp"
title="Duplicate opportunity"
ng-click="duplicateOpportunityChildren(opportunity, opp)"></i>
<i class="fa fa-eye remove-opp" title="Show history"
ng-click="showHistory(account, opportunity, opp)"
data-toggle="modal" data-target="#opportunityHistory"></i></td>
<td ng-if="isReadOnly()" class="readOnlyButtons"><i
class="fa fa-chevron-up remove-opp" title="Move up (disabled)"></i>
<i class="fa fa-chevron-down remove-opp"
title="Move down (disabled)"></i> <i
class="fa fa-times remove-opp"
title="Remove opportunity (disabled)"></i> <i
class="fa fa-clone remove-opp"
title="Duplicate opportunity (disabled)"></i> <i
class="fa fa-eye remove-opp" title="Show history (disabled)"></i></td>
</tr>
<!-- Total -->
<tr class="total" ng-if="$last">
<td colspan="10" class="separator"></td>
<td colspan="2">TOTAL {{ account.title }}</td>
<td class="separator"></td>
<td></td>
<td class="center" colspan="2">
<div>
<span> {{ opportunity.total }} € </span>
</div>
</td>
</tr>
<tr ng-if="($index + 1) < bookingSelected.accounts.length"
ng-repeat-end>
<td colspan="16"
style="height: 10px !important; border: none !important; background: #fff !important;"></td>
</tr>
</tbody>
<tr class="separator"></tr>
<tr class="total">
<td colspan="12">TOTAL SUM</td>
<td class="separator"></td>
<td class="total-sum"></td>
<td class="center total-sum" colspan="2">
<div>
<span> {{ totalBooking | number }} € </span>
</div>
</td>
</tr>
</table>
I am using now the bindonce module.
In Google Chrome I have no problems with the performance, it's only in Mozilla firefox (I tried multiple version of this browser, all have the same issue).
Bellow is a snapshot of the firefox performance tool :
UPDATED
<table class="booking-table table table-condensed mergeCells"
id="booking-table" ng-if="::bookingSelected.accounts.length">
<thead>
<tr>
<th colspan="10" class="transparent separator"></th>
<th colspan="2" style="border-top: 1px solid #000 !important;">OPPORTUNITY
DEFINITION</th>
<td class="separator"></td>
</tr>
<tr>
<th colspan="2">REGION</th>
<th>COUNTRY</th>
<th>MARKETS</th>
<th>SERVICE</th>
<th>TYPE</th>
<th>CUSTOMER</th>
<th>BDO Ref</th>
<th style="width: 100px !important;">Probability %</th>
<th style="width: 110px !important;">Booking Revenue</th>
<th class="gray" style="width: 10px !important;">Nb</th>
<th class="gray" style="width: 221px !important;">Name</th>
<th class="separator"></th>
<th class="transparent po-info left"
style="text-align: center;">PO Number</th>
<th class="transparent po-info left"
style="width: 80px !important; text-align: center;"
colspan="2">PO Amount</th>
</tr>
</thead>
<tbody bindonce
ng-repeat="account in bookingSelected.accounts track by $index">
<!-- Booking line -->
<tr class="gray">
<td rowspan="2" colspan="10" class="separator"><span
class="remove-opp button-hover" ng-if="isNotReadOnlyAdmin()"
ng-click="addOpportunity(account)"><i
class="fa fa-plus"></i> Add</span><span
class="remove-opp button-hover readOnlyButtons"
ng-if="isReadOnlyAdmin()"><i class="fa fa-plus"></i>
Add</span> <span class="remove-opp button-hover"
ng-if="account.id == null && currentUser.isAdministrator"
ng-click="removeAccount(account)"><i
class="fa fa-times"></i> Remove Account</span></td>
<td colspan="2">BOOKING GOALS</td>
<td rowspan="2" class="separator"></td>
<td class="po-info"></td>
<td class="transparent right po-info input number" colspan="2">
<input ng-model-options="{ debounce: 600 }"
ng-model="::account.bookingGoals" class="input-number"
ng-change="::totalAccountOpportunity(account)"></input> <span
class="suffix">€</span>
</td>
</tr>
<tr class="gray">
<td colspan="2" class="transparent text-red">REMAINING
BOOKING GOALS proba weight</td>
<td class="po-info"></td>
<td class="transparent right po-info input"
ng-class="{'text-red' : account.remaining > 0, 'text-green' : account.remaining <= 0}"
colspan="2">
<div>
<span> {{ ::(account.remaining | number) }} € </span>
</div>
</td>
</tr>
<!-- Account -->
<tr class="orange" bindonce
ng-repeat-start="opportunity in account.opportunities track by $index">
<td class="remove-opp" ng-if="::showRemoveButton(opportunity)"
ng-click="removeOpportunity(account, opportunity)">
<center>
<i class="fa fa-times"></i>
</center>
</td>
<td class="center input" ng-click="makeRowActive(null)"
ng-if="::showRemoveButton(opportunity)"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text"
ng-model="::account.title"></td>
<td class="center input" colspan="2"
ng-click="makeRowActive(null)"
ng-if="::(!showRemoveButton(opportunity))"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text"
ng-model="::account.title"></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="COUNTRY" popover-trigger="'focus'"
ng-model="::opportunity.country"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="::opportunity.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="::opportunity.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="::opportunity.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="::opportunity.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)">{{
::opportunity.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opportunity.probability.value >= 90, 'orange' : opportunity.probability.value == 60, 'red' : opportunity.probability.value == 30, 'gray' : opportunity.probability.value < 30}"
ng-click="makeRowActive(null)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="::opportunity.probability"
ng-change="updatePoAmmountOpportunity(account, opportunity)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(null)">
<div ng-if="::showPoAmmount(opportunity)">
<span> {{ ::(opportunity.poAmmount | number) }} € </span>
</div>
</td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 30px;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'"
ng-model="::opportunity.nb"></td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 300px !important;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
ng-model="::opportunity.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(null)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="::opportunity.revenue" uib-popover="REVENUE"
popover-trigger="'focus'" class="input-number"
ng-change="updatePoAmmountOpportunity(account, opportunity)">
</td>
<td class="right po-info input" ng-click="makeRowActive(null)">
<div ng-if="::showPoAmmount(opportunity)">
<span> {{ opportunity.poAmmount | number }} € </span>
</div>
</td>
<td class="remove-opp" title="Add opportunity"
ng-if="::isNotReadOnly()"
ng-click="addOpportunityChildren(opportunity)">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
<td class="remove-opp readOnlyButtons"
title="Add opportunity (disabled)" ng-if="::isReadOnly()">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
</tr>
<!-- Opportunities -->
<tr bindonce
ng-repeat="opp in opportunity.opportunities track by $index"
ng-class="{'active' : opp == activeOpp}">
<td class="center input" colspan="2"
ng-click="makeRowActive(opp)">{{ ::account.title }}</td>
<td class="input" ng-click="makeRowActive(null)"><select
ng-model="::opp.country" uib-popover="COUNTRY"
popover-trigger="'focus'"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="::opp.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="::opp.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="::opp.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="::opp.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" style="padding-left: 5px !important;"
ng-class="{'redB' : opp.bdoNumber == null || opp.bdoNumber == ''}"
ng-click="makeRowActive(opp)">{{ opp.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opp.probability.value >= 90, 'orange' : opp.probability.value == 60, 'red' : opp.probability.value == 30, 'gray' : opp.probability.value < 30}"
ng-click="makeRowActive(opp)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="::opp.probability"
ng-change="updatePoAmmountOpportunityChild(opp, account)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(opp)">
<div>
<span> {{ opp.poAmmount | number }} € </span>
</div>
</td>
<td style="width: 30px;" class="input"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'" uib-popover="Nb"
popover-trigger="'focus'" ng-model="::opp.nb"></td>
<td class="input" ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
type="text" ng-model="::opp.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(opp)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="::opp.po" uib-popover="PO Number"
popover-trigger="'focus'">
</td>
<td class="right po-info input number"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" uib-popover="PO Amount"
popover-trigger="'focus'" ng-model="::opp.poAmmount"
class="input-number"
ng-change="updatePoAmmountOpportunityChild(opp, account)"></input>
<span class="suffix">€</span></td>
<td ng-if="::isNotReadOnly()"><i
class="fa fa-chevron-up remove-opp" title="Move up"
ng-click="opportunityToUp(opportunity, opp)"></i> <i
class="fa fa-chevron-down remove-opp" title="Move down"
ng-click="opportunityToDown(opportunity, opp)"></i> <i
class="fa fa-times remove-opp" title="Remove opportunity"
ng-if="::showRemoveButton(opp)"
ng-click="removeOpportunityChildren(opportunity, opp, account)"></i>
<i class="fa fa-clone remove-opp"
title="Duplicate opportunity"
ng-click="duplicateOpportunityChildren(opportunity, opp)"></i>
<i class="fa fa-eye remove-opp" title="Show history"
ng-click="showHistory(account, opportunity, opp)"
data-toggle="modal" data-target="#opportunityHistory"></i></td>
<td ng-if="::isReadOnly()" class="readOnlyButtons"><i
class="fa fa-chevron-up remove-opp" title="Move up (disabled)"></i>
<i class="fa fa-chevron-down remove-opp"
title="Move down (disabled)"></i> <i
class="fa fa-times remove-opp"
title="Remove opportunity (disabled)"></i> <i
class="fa fa-clone remove-opp"
title="Duplicate opportunity (disabled)"></i> <i
class="fa fa-eye remove-opp" title="Show history (disabled)"></i></td>
</tr>
<!-- Total -->
<tr class="total" ng-if="::$last">
<td colspan="10" class="separator"></td>
<td colspan="2">TOTAL {{ account.title }}</td>
<td class="separator"></td>
<td></td>
<td class="center" colspan="2">
<div>
<span> {{ opportunity.total }} € </span>
</div>
</td>
</tr>
<tr ng-if="::(($index + 1) < bookingSelected.accounts.length)"
ng-repeat-end>
<td colspan="16"
style="height: 10px !important; border: none !important; background: #fff !important;"></td>
</tr>
</tbody>
<tr class="separator"></tr>
<tr class="total">
<td colspan="12">TOTAL SUM</td>
<td class="separator"></td>
<td class="total-sum"></td>
<td class="center total-sum" colspan="2">
<div>
<span> {{ ::(totalBooking | number) }} € </span>
</div>
</td>
</tr>
</table>
try to use this in all app:
{{ ::(opportunity.poAmmount | number) }}
function in ng-if and bg-class is a pure evil
ng-if="::showRemoveButton(opportunity)"
refactor ng-if="bookingSelected.accounts.length != 0" => ng-if="::bookingSelected.accounts.length"
but remember that bind-once inside ng-if is very fragile/ you should return undefiend from function if data do not get yet from server
I have implemented two div where i have used some drop down control in a div named as div1 .I want to hide div2 until the any value is selected in drop down.I want to know how to hide or show a div on ng-change or untill any value is selected div2 must not be shown.
Code:-
<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" ng-init="getFormData();">
<div id="div1">
<tr>
<td nowrap>Company Name:
</td>
<td>
<asp:TextBox ID="txtCompanyName" runat="server" CssClass="NormalTextBox" TabIndex="1" Width="160px" Height="10px" ng-model="custom.txtCompanyName" required=""></asp:TextBox>
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<select id="listHomeCountry1" style="width: 182px !important; height: 34px;">
<option value="0">--- Select an option ---</option>
<option data-ng-repeat="Cntry in listHomeCountry" ng-model="custom.listHomeCountry" ng-change="" value="{{Cntry._key}}">{{Cntry._value}}</option>
</select>
</tr>
<div id="div2">
<table style="position: relative; left: 0px;">
<tr align="left">
<td nowrap style="width: 200px">
<asp:Label ID="lblContactAddress1" runat="server" CssClass="NormalTextBox" Width="60%"></asp:Label></td>
<td nowrap>
<asp:TextBox ID="txtContactAddress1" TabIndex="3" Name="txtContactAddress1" runat="server" CssClass="NormalTextBox" Columns="35" Width="160px" Height="10px" ng-model="custom.txtContactAddress1" required=""></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblContactAddress2" runat="server" CssClass="NormalTextBox"></asp:Label></td>
<td>
<asp:TextBox ID="txtContactAddress2" Name="txtContactAddress2" TabIndex="4" runat="server" CssClass="NormalTextBox" Columns="35" Width="160px" Height="10px" ng-model="custom.txtContactAddress2" required=""></asp:TextBox>
</td>
</tr>
</div>
</div>
Now i want untill and unless a value is selected by my dropdown div2 will be hidden.
First assign a variable to your Choice List. For example
<select id="listHomeCountry1" ng-model="homeCounrty">
Then simply use ng-show (doc)
<div id="div2" ng-show="homeCountry">
The above is also equivalent to:
<div id="div2" ng-show="homeCountry != null">
I am trying to create filters whose layout should match something like below screenshot.
So far I am able to achieve something like the given below screenshot.
Problem is I am unable to evenly distribute items in terms of space as shown in 1st screenshot. Also is it good way to create this kind of layout using table?
Please help me in understanding and creating this layout.
Below is my code
<div class="panel panel-default">
<div class="panel-heading" style="padding: 20px;">
<div class="panel-title pull-left text-label-emphasize" style="margin-top: -8px;"><b>Filter</b></div>
<div class="panel-title pull-right text-label" style="margin-top: -8px;">Reset</div>
</div>
<div class="panel-body">
<table width="100%">
<tr>
<td colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div ng-show="!loadinga">
<input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select='' placeholder="Search Tasks here" typeahead-focus-first="true" ng-disabled="loading" />
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" class="fadein fadeout">
<td align="left" colspan="1">
<div style="margin-right: 5px;margin-left: 5px; margin-top:2px" ng-show="!loadinga">
<input type="checkbox" ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" />
<label for="excludeMinutesStep">Exclude tasks running < </label>
<input id="excludeMinutesStep" type="number" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" /> <b>minutes</b>
</div>
</td>
<td align="left" colspan="1">
<div style="margin-right: 5px; margin-top:2px" ng-show="!loadinga">
<input id="datalabels" type="checkbox" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" />
<label for="datalabels">Show Labels</label>
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr>
<td colspan="4">
<a ng-show="!isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=true">Show Advanced Filters</a>
<a ng-show="isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=false">Hide Advanced Filters</a>
</td>
</tr>
</table>
</div>
</div>
css
.text-label {
color: #aab2bd;
font: 8pt;
}
.text-label-emphasize {
color: #575F64;
}
Bootstrap have tons of weeks dedicated to making all the "style elements" into classes, use them. As blunt as that is, read the documentation when stuck it truly can help you.
Apart from that lets get stuck into your issue.
If you really need to use table in your panel then, the best practice is to place it below or before .panel-body but since we want to maintain responsive mobile first technology for all our future projects, try to avoid it unless you actually want a table for data. Nested columns are the best practice to maintain this.
An example of how to nest any column is to use .row followed by the column size you wish to nest, example below.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
</div>
This would create good breakpoints and allow you to maintain a good UI/UX for your application.
Its important to understand bootstrap doesn't provide all the answers but it's a good style framework to expand from, so we make overriding css changes.
I added a few css overrides to make the borders square, and tried to
maintain your angular.js (you may need to review that)
Completed code with preview hosted on bootply
For the style checkboxes, take a look at Awesome Bootstrap Checkboxes, full documentation by them is available on their github.
Edit (Full width dropdown menu) --
To have the dropdown menu match the width of the button add the following css code to your overriding stylesheet.
.open>.dropdown-menu {
min-width: 100%;
}
Hope I helped ;)