Max number per row with ngfor - css

Is it possible to create new row in 'td' after ngFor reaches 10 image repeats, now pics are shown all in one td and shrinking as it gets more and more?
<td *ngFor="let row of pics">
<div class="checkbox">
<label><input type="checkbox" [checked]="row.checked" value="{{row.url}}" (change)="addpic($event.target.checked, row.id)"></label>
</div>
<img src="{{picroute}}{{row.img}}>
</td>

<tr *ngFor="let page of [0,1,2,3,4,5,6,7,8,9,10,11,12].slice(0,pics/10)">
<td *ngFor="let row of pics.slice(page*10,(page+1)*10">
<div class="checkbox">
<label><input type="checkbox" [checked]="row.checked"
value="{{row.url}}" (change)="addpic($event.target.checked, row.id)">
</label>
</div>
<img src="{{picroute}}{{row.img}}>
</td>
</tr>

I think flex-box could be more useful, you can control the shrink ratio if you need, the most important, only an one dimension array is needed.

<td>
<tr ng-repeat="row in arrange(pics, 10)">
<td ng-repeat="pic in row">
<div class="checkbox">
<label>
<input type="checkbox"
[checked]="row.checked"
value="{{row.url}}"
(change)="addpic($event.target.checked, row.id)">
</label>
</div>
<img src="{{pic}}"
</td>
</tr>
</td>
arrange(pics, numberPerRow) {
var arrangedArray = [];
while (pics.length > numberPerRow) {
arrangedArray.push(arrangedArray.splice(0, numberPerRow));
}
arrangedArray.push(pics);
return arrangedArray;
}
This is a somewhat elegant solution imo, just replace variables accordingly.

Related

What action to be used to move woocommerce qty box below product price - if at all possible?

The code in the woocommerce single product look like this (Astra theme):
<div class="summary entry-summary">
<h1 class="product_title entry-title">Woocommerce Product</h1><p class="price"><del><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">kr</span> 499</bdi></span></del> <ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">kr</span> 374</bdi></span></ins></p>
<form class="variations_form cart" action="https://www.mydomain.no/product/hoodie/" method="post">
<!-- I WANT TO MOVE IT UP HERE //-->
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label"><label for="pa_color">Color</label></td>
<td class="value">
<select id="pa_color" class="" name="attribute_pa_color"></select>
</td>
</tr>
<tr>
<td class="label"><label for="logo">Size</label></td>
<td class="value">
<select id="pa_color" class="" name="attribute_pa_size"></select>
</td>
</tr>
</tbody>
</table>
<div class="single_variation_wrap">
<div class="woocommerce-variation single_variation" style="display: none;"></div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled">
<!-- I WANT TO MOVE THIS PART //-->
<div class="quantity buttons_added">
-
<label class="screen-reader-text" for="quantity_5ff4ee9846565">Woocommerce Product quantity</label>
<input type="number" id="quantity_5ff4ee9846565" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Quantity" size="4" placeholder="" inputmode="numeric">
+
</div>
<!-- EOF -- I WANT TO MOVE THIS PART //-->
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-selection-needed">Buy Now</button>
<input type="hidden" name="add-to-cart" value="81">
<input type="hidden" name="product_id" value="81">
<input type="hidden" name="variation_id" class="variation_id" value="0">
</div>
</div>
</form>
As you can see in my HTML comments, I want to separate the quantity input including the plus and minus buttons from the add-to-cart button, and then move that entire div to the first element of the form.
Is this at all possible using functions.php or jquery, or both - without changing the theme file?
Any suggestion will be appreciated.

Responsive drop-down menu with table inside

Hi I'm trying to obtain responsive menu on navbar in application on which I work with bootstrap 3. My menu has element with bell icon. The purpose of this one is to remind user some information. Below I show that menu element on screen:
I have fixed settings for width of my menu. I'd like to have responsive menu, not static, because this application should work on few screen resolutions. What should I obtain that? I tried to obtain that by pecrentage property for: width, min-with properties, but it has crashed.
Below I show html tags and CSS settings:
Html:
<li class="dropdown ng-isolate-scope open" loader="remainderLoading"><a ng-show="!loader" id="reminderLink" class="dropdown-toggle" data-toggle="dropdown" style="font-size:18px; cursor:pointer;" ng-click="removeNotification()" aria-expanded="true"><i class="fa fa-bell"></i></a>
<!-- ngIf: numOfRemindedNotes && !loader && !clicked -->
<div id="reminderMenu" class="dropdown-menu">
<div class="form-group col-md-7 disabled">
<label>Reminder's date:</label>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty ng-valid-date ng-valid-required" ng-change="getNotesByDate()" initdate="new Date()" ng-click="noteDatepicker.opened = true" uib-datepicker-popup="" ng-model="dateNotes.value" is-open="noteDatepicker.opened" ng-required="true" close-text="Close" readonly="" required="required"><div uib-datepicker-popup-wrap="" ng-model="date" ng-change="dateSelection(date)" template-url="uib/template/datepickerPopup/popup.html" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty"><!-- ngIf: isOpen -->
</div>
</div>
<div ng-show="noteLoading" class="ng-hide">
<img width="32" height="32" src="/packages/img/loader.gif">
</div>
<div class="col-md-12">
<table id="reminderTable" class="table table-bordered table-striped" ng-show="!noteLoading">
<tbody>
<tr id="reminderTableElement">
<td class="col-md-3">
Case Id
</td>
<td class="col-md-3">
Trans id
</td>
<td class="col-md-3">
Type customer
</td>
<th class="col-md-3">
Note
</th>
<td class="col-md-3">
Date
</td>
<td class="col-md-3"></td>
</tr>
<!-- ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426024</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsadsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426011</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer -->
<!-- ngRepeat: note in notes.notesForAdditionalCustomers -->
</tbody>
</table>
</div>
</div>
</li>
CSS:
#reminderTableElement{
font-size: 12px;
}
#reminderMenu{
min-width: 540px;
}
I would be grateful for help. Best regards ;)
You should use #media tags to implement styles. For example
#media (min-width: 1600px) {
#reminder-menu {
...
}
}
It is considered best practice to design for mobile first, so you would use min-width: 540px or whatever your smallest breakpoint is first, then add more breakpoints as needed.

Bootstrap grid system doesn't work on tables

I'm trying to build a settings for my WordPress plugin, I want my image to be displayed aside the table on the right, but it always goes to bottom can you guys help me to fix that ?
<form action="options.php" method="post">');
<div class="row">
<div class="col-md-8">
<table class="form-table">
<tbody>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="x'.$key.'" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="myinput" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
....
</tbody>
</table>
</div>
<div class="col-md-4">
<div id="special">
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
</div>
</div>
// outputs the WP submit button html
//#submit_button();
Add a div element with "container" or "container-fluid" class after form element( <form action="options.php" method="post"> )
like :<form action="options.php" method="post"><div class="container">
...............
</div></form>
OR
like :<form action="options.php" method="post"><div class="container-fluid">
...............
</div></form>

Group addon taking up too much space in bootstrap table

When I add a .group-addon to an element inside a bootstrap .table, all other elements are not given enough space, and the group-addon input takes up far too much room.
<h2>Only one bully, group-addon</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
<div class="input-group-addon">x</div>
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<h2>Two bullying group-addons</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">x</div>
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
<div class="input-group-addon">x</div>
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<h2>No Bullies</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">When there is no group-addon inside a table with class table, the spacing looks reasonable, but a single group-addon ruins it all</div>
http://jsfiddle.net/billymoon/ntm2q/
How should I use group-addons inside bootstrap tables without them taking too much space?
Try in your Less / CSS:
.input-group-addon {
width:auto;
}
The problem is in your bootstrap.min.css line 9 where you have this rules:
.input-group-addon, .input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
You should erase width: 1%; or just override with something like this:
.input-group-addon {
width:0;
}
DEMO

how to make table visible using radio button?

as i am new in html, css, php so i am facing so many problems in completing a small project.So please don't mind. I've included a screen shot. Problem is that whenever i click radio button 'Yes' then only the input text fields of corresponding table should work. If i select the button 'No' then the text fields should be hidden i.e it will not take any input and i should be able to proceed without filling up the table. Thanks in advance.
.html
<body>
<form action="reg2.php" method="post">
<div id="formWrap">
<div class="row">
<div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>
</div> <!-- end of 0th row -->
<div id="form">
<div class="row">
<div class="labelusn1">USN</div>
<div class="inputusn">
<input type="text" id="usn" required="required" class="usndetail" name="usn"/>
</div>
</div> <!-- end of 1st row -->
<h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
<div class="row>
<div class="inputradio1" style="margin-left:50px">
<input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
<input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
</div> <!-- end of row -->
<table width="719" border="1" align="center" style="margin-top:10px">
<tr bgcolor="#A7A7A7">
<td width="87"><div align="center" class="style1"> Course Code </div></td>
<td width="50"><div align="center" class="style2"> Credits</div></td>
<td width="87"><div align="center" class="style3"> Status(D/W/F)</div></td>
<td width="467"><div align="center" class="style4"> Remarks</div></td>
</tr>
<tr>
<td><input type="text" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>
I left the rest part of the code...if necessary i will post
Your issue is solved, please check:
Simply add these scripts:
<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!-- Applying Custom JS -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
// Disabling Text Fields by default
$("table input[type='text']").each(function () {
$(this).attr("disabled", "disabled");
});
$(".inputradio1 input[name=sex]").change(function () {
var val = $(this).val();
if (val == "No") {
$("table input[type='text']").each(function () {
$(this).attr("disabled", "disabled");
});
} else if (val == "Yes") {
$("table input[type='text']").each(function () {
$(this).removeAttr("disabled");
});
}
});
});
</script>
Or checkout the fiddle here http://jsfiddle.net/kDG5t/2/
something like that http://jsfiddle.net/Z8jU3/1/ ?
$('.detailradio1').change(function(){
if($(this).attr('id')=='sex' && $(this).is(':checked')){
$('table').hide();
}else{
$('table').show();
}
})
In html part I am just defining the ID's of input box.
HTML:-
<body>
<form action="reg2.php" method="post">
<div id="formWrap">
<div class="row">
<div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>
</div> <!-- end of 0th row -->
<div id="form">
<div class="row">
<div class="labelusn1">USN</div>
<div class="inputusn">
<input type="text" id="usn" required="required" class="usndetail" name="usn"/>
</div>
</div> <!-- end of 1st row -->
<h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
<div class="row>
<div class="inputradio1" style="margin-left:50px">
<input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
<input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
</div> <!-- end of row -->
<table width="719" border="1" align="center" style="margin-top:10px">
<tr bgcolor="#A7A7A7">
<td width="87"><div align="center" class="style1"> Course Code </div></td>
<td width="50"><div align="center" class="style2"> Credits</div></td>
<td width="87"><div align="center" class="style3"> Status(D/W/F)</div></td>
<td width="467"><div align="center" class="style4"> Remarks</div></td>
</tr>
<tr>
<td><input type="text" id="course_code" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="credits" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="status" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="remarks" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>
and jquery for this is :-
$('#radio').click(function()
{
$('#course_code').removeAttr("disabled");
$('#credits').removeAttr("disabled");
$('#status').removeAttr("disabled");
$('#remarks').removeAttr("disabled");
});
$('#sex').click(function()
{
$('#course_code').attr("disabled","disabled");
$('#credits').attr("disabled","disabled");
$('#status').attr("disabled","disabled");
$('#remarks').attr("disabled","disabled");
});
If you want that all input box to be disabled on initial page load then you have to mention disabled="disabled" in all input box like this:-
rest all is same ....
You could use CSS if you just want the whole section hidden.
If you have the radio(s) on the same DOM level as a container element like a div for example:
div.formContainer {
display: none;
}
input[type=radio]#yes:checked ~ div.formContainer {
display: block;
}
The HTML would basically have something along the lines of:
<input type="radio" name="yesno" id="yes" /><label for="yes">Yes</label>
<input type="radio" name="yesno" id="no" /><label for="no">No</label>
<div class="formContainer">
<input type="text" id="input1" name="input1" value="Hello World!" />
</div>
This SHOULD mean that if "yes" is the current choice then the text input field should be visible and if yes is not the current choice then the field will be invisible.

Resources