I have the following code:
<tr>
<td>
<div class="row show-grid">
<div class="col-sm-3">
<div class="pull-left">Start Date Time</div>
</div>
<div class="col-sm-9">
<div class="pull-left">#(item.StartDateTime.ToClientDateTime(tz))</div>
</div>
</div>
</td>
</tr>
What I am finding is that on my laptop, it shows fine as below:
When I minimize my screen, it shows as follows:
Is there a way to gave some gap between Start Date Time and the date/time so they are they are not squished together.
Related
I created a custom invoice but how can I add make the payment terms and total row at the bottom on the page? (see image for desired scenario)
<div class="clearfix" style="line-height:0">
<p t-if="o.narration" name="comment">
<span t-field="o.narration"/>
</p>
<p t-if="o.invoice_payment_term_id" name="payment_term" style="font-size:12px;margin-left:-120px;text-transform:uppercase;line-height:0">
Payment <b><span t-field="o.invoice_payment_term_id"/></b> after statement of accounts
<!--<span t-field="o.invoice_payment_term_id.note"/>-->
</p>
<p t-if="o.amount_total" style="font-size:12px;margin-left:-120px;text-transform:uppercase;line-height:normal">
<span t-esc="o.compute_amount_in_word(o.amount_total)"/>
</p>
<div id="total" class="row" style="margin-top:-30px !important;">
<div t-attf-class="#{'col-6' if report_type != 'html' else 'col-sm-7 col-md-6'} ml-auto">
<table class="table table-sm table-borderless" style="page-break-inside: avoid; width:222px; margin-left:235px !important;border-bottom: 4px solid white">
<tr>
<td class="text-right"><strong>TOTAL</strong></td>
<td style="" class="text-right">
<span class="text-nowrap text-right" style="" t-field="o.amount_total"/>
</td>
</tr>
</table>
</div>
</div>
</div>
Right now it's showing payment terms, amount in words, and total just below where the table ends. I tried to make the position: relative, but then it shows only on the first page and will overlap if the invoice is more than one page. (see image)
I am using a modal screen to show a datatable that summarizes a client's restaurant order. It contains a couple of div's to provide info and the mentioned table with the order (ammount, description, value).
Then, that order will be printed in a 48mm width paper special printer (POS58 Printer)
I'am struggling on how to print this information. Modal is overflowing once I try to print the modal.
I have tried so far: -Using word-break, different font-sizes but I think I am missing something.
Printing in PDF or a normal printer works perfectly fine.
Any suggestions?
<div class="modal fade" id="print_comanda" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content border-0">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">XX Restaurant</h5>
</div>
<div class="modal-body">
<p class="font-weight-bold" style="text-align:center">Internal Ticket</p>
<div class="text mb-3">
<div id="table_nr" style="text-align:center; font-size: 2rem;"></div>
<div id="table_hs"></div>
<div id="table_dt"></div>
<div id="table_client"></div>
<div id="table_waiter"></div>
</div>
<table width="100%" id="table_final" class="table">
<thead>
<tr>
<th scope="col" class="text-center">Ammt.</th>
<th scope="col" class="text-center">Desc.</th>
<th scope="col" class="text-center">Subtot.</th>
<th scope="col" class="text-center">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="nonPrintable2">
<div class="modal-footer">
<button type="button" id="cancel_a" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" id="btn_print" class="btn btn-dark">Print</button>
</div>
</div>
</div>
</div>
</div>
I'm trying to create an accordion with bootstrap in vuejs using a card component in a loop. I want to use the id property of the command variable so that each card has its id so that when we click on a card, only this card will open and not all the cards. Here is my code:
<div id="accordion">
<div class="card" v-for="commande in commandes.data" :key="commande.id">
<div class="card-header" :id="commande.id">
<h3 class="card-title">
<button class="btn btn-link col-md-12" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="text-primary">{{commande.id}}</div>
</button>
</h3>
</div>
<!-- /.card-header -->
<div id="collapseOne" class="collapse show" :aria-labelledby="commande.id" data-parent="#accordion">
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<tbody>
<tr v-for="(produit, index) in commande.produits" :key="index">
<td>{{produit.designation}}</td>
<td>{{produit.prix_vente}}</td>
<td>{{produit.pivot.quantite}}</td>
<td>{{produit.prix_vente*produit.pivot.quantite}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<pagination :data="commandes" #pagination-change-page="getResults"></pagination>
</div>
</div>
</div>
But when I click on a card, all the others open. it seems that this is due to the data-target attribute of the <button> tag of the card-header and the attribute id of the <div> which contains the card-body. I can't put a variable in the data-target attribute. How to solve this?
If you want to use Vue data properties as HTML Attribute, just put a ":" in front of it.
<div :id="name_of_data_property">
I am using Bootstrap 3 in responsive mode. Is it possible to embed a region or regions on the site to be fixed rather then responsive. A fixed width table, for example?
Sure! Just don't use class="table" attribute on table definition.
<div class="container">
<div class="row">
<div class="col-md-8">
<table width="200">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4</td>
</tr>
</table>
</div>
<div class="col-md-4">sidebar</div>
</div>
</div>
Example https://jsfiddle.net/DTcHh/16851/
Is it possible for selenium to find a label element by its "for" attribute using xpath?
I'm testing a site that has 7 yes or no questions in row. The way the CSS is done, you click on the label instead of the input radio button. Normally I'd just find the element by text content, but there is a yes and no for each question.
I'm thinking that a work-around would be to do a javascript click on the input button to get around the "element is not visible" error that I get when trying to .click() the input directly, but I wanted to see if there was a better way to locate the label which is what users would actually be clicking.
*Edit for all of your who can't remember what a label element looks like. How would you select the middle one from this group?
<label for="superLongSetOfRandomCharacters123" class="common-to-all-buttons"> No </label>
<label for="superLongSetOfRandomCharacters345" class="common-to-all-buttons"> No </label>
<label for="superLongSetOfRandomCharacters456" class="common-to-all-buttons"> No </label>
More specifically, this is how they sit in the DOM
<ul class="list-view list-view-dividers">
<li class="list-view-item">
<div class="content">
<div id="variableValue1" class="multipleChoice">
<div class="form-row">
<label>Question 1</label>
<div class="form-row">
<table class="choices" id="randomlyGenerated-1">
<tbody>
<tr>
<td>
<div class="ui-radio"><label for="randomlyGenerated1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off"> Yes</label><input id="randomlyGenerated1" type="radio" name="randomlyGenerated1" value="Yes"></div>
</td>
<td>
<div class="ui-radio"><label for="randomlyGenerated2" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off"> No</label><input id="randomlyGenerated2" type="radio" name="randomlyGenerated2" value="No"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="randomlyGenerated1-Error" class="component-error"></div>
</div>
</div>
</li>
<li class="list-view-item">
<div class="content">
<div id="variableValue2" class="multipleChoice">
<div class="form-row">
<label>Question 2</label>
<div class="form-row">
<table class="choices" id="randomlyGenerated-2">
<tbody>
<tr>
<td>
<div class="ui-radio"><label for="randomlyGenerated21" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off"> Yes</label><input id="randomlyGenerated21" type="radio" name="randomlyGenerated21" value="Yes"></div>
</td>
<td>
<div class="ui-radio"><label for="randomlyGenerated22" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off"> No</label><input id="randomlyGenerated22" type="radio" name="randomlyGenerated22" value="No"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="randomlyGenerated2-Error" class="component-error"></div>
</div>
</div>
</li>
</ul>
It works for selecting all labels with target 'for':
label[#for='superLongSetOfRandomCharacters123']
or you can leave #for='' blank for selecting all labels with any values (i.e. label[#for])
I guess, the XPath-Option you are looking for would be "#". so in your case something like [...]/label/#for would return you that for-value, which you could then use to check where you are ;)
Cheers
D
Use find_element_by_xpath
label = self.browser.find_element_by_xpath('//label[#for="id_field"]')