Needed some assistance,
Please look at the picture below, as you can see, When I click the input which has calender, the calender pop up inside the table and it generates a scroll bar which I have to scroll down to see the bottom calender, how do I make sure it is send to front which will show the entire calender outside that table ?
Thanks!
Calender CSS: https://github.com/benitolopez/hotel-datepicker/tree/master/dist
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="fa fa-shopping-cart"></i> Shopping cart</h4>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<td class="text-center"></td>
<td class="text-center">Image</td>
<td class="text-left">Product Name</td>
<td class="text-left">Rental Period</td>
<td class="text-left">Rental Rate</td>
<td class="text-left">Deposit Amount</td>
<td class="text-right">Total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><p></p><button type="button" data-toggle="tooltip" title="Remove" class="btn btn-danger" onClick=""><i class="fa fa-times-circle"></i></button></td>
<td class="text-center"><img width="60px" src="image/demo/shop/product/E4.jpg" alt="Xitefun Causal Wear Fancy Shoes" title="Xitefun Causal Wear Fancy Shoes" class="img-thumbnail"></td>
<td class="text-left">Emasa rumas gacem</td>
<td class="text-left"><div class="input-group btn-block" style="min-width: 100px;">
<form method="POST" action="checkout.html">
<input type="text" name="input-id" id="input-id" value="" class="form-control">
</form>
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="Update" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
</span></div></td>
<td class="text-right">$114.35</td>
<td class="text-right">$114.35</td>
<td class="text-right">$114.35</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-right" colspan="1"><strong>Meeting Location:</strong></td>
<td class="text-left" colspan="6">$93.73</td>
</tr>
<tr>
<td class="text-right" colspan="6"><strong>Total Amount Payable:</strong></td>
<td class="text-right">$121.85</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
Update:
I removed the "position" in the css of the calender and it now looks like this.
Everytime the calender pop up, the table will adjust/squeeze to fit the calender, how to make sure that calender just shows without changing the size of the table?
Thanks!
Related
I have a serious problem with data list I HATE IT so much. I have a list of data that displays cart items in a table.. basic right?
Sure, but not for data list! its like data list says I MUST DESTROY YOU. The data list does not show any items that I should display!
Here are some screenshots that will let you understand my issue here.
So basically the items are displayed in VS, but in the web application it doesn't.
PLEASE HELP :(
Here is the code:
<div class="container-sm cart-page">
<table>
<tr>
<th>المنتج</th>
<th>الكمية</th>
<th>السعر الفرعي</th>
</tr>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="1" RepeatLayout="Flow">
<ItemTemplate>
<tr>
<td>
<div class="cart-info">
<img src="http://bestjquery.com/tutorial/product-grid/demo8/images/img-1.jpg" alt="camera">
<div>
<p>Camera 211</p>
<small>السعر: 50 ر.س.</small>
<br>
حذف
</div>
</div>
</td>
<td>
<input type="number" value="1" min="1" max="10"></td>
<td>50 ر.س.</td>
</tr>
</ItemTemplate>
</asp:DataList>
</table>
<div class="total-price">
<table>
<tr>
<td class="titles">السعر الفرعي</td>
<td>150 ر.س.</td>
</tr>
<tr>
<td class="titles">VAT</td>
<td>22.50 ر.س.</td>
</tr>
<tr>
<td class="titles">المجموع</td>
<td>172.50 ر.س.</td>
</tr>
<tr>
<td>
<a href="store.aspx">
<button type="submit" class="btn btn-primary btn-continue-shopping">إكمال التسوق</button>
</a>
</td>
<td>
<a href="checkout.aspx">
<button type="submit" class="btn btn-primary btn-checkout">إكمال الدفع</button>
</a>
</td>
</tr>
</table>
</div>
</div>
You need to set the DataSource property with some list or table of data.
Here is a link to the MSDN article: https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.basedatalist.datasource?view=netframework-4.8#System_Web_UI_WebControls_BaseDataList_DataSource
What is your data source? Are you using a database?
If you do not have a database you can mockup a dataset in XML, JSON, or CSV and then deserialize into your code.
I believe that you can bind anything that implements IList.
I'm coding a web page using C# MVC and AngularJS, and i need tomake a horizontal list of radio buttons (and check cuttons) with labels assigned to them. the problem is that they are presented in a vertical list, in every way that I try.
I've tried:
<div align="center">
<label class="col col-20" style="display:inline" align="center"><input id="WeekRad" align="center" type="radio" style="display:inline" ng-model="Week" ng-click="ThisWeek()" />This Week</label>
<label class="col col-20" style="display:inline" align="center"><input id="DatesRad" align="center" type="radio" style="display:inline" ng-model="Dates" ng-click="BetweenDates()" />Between Dates</label>
</div>
I've also tried:
<span>
<ul>
<li style="display:inline">
<label class="col col-20" style="display:inline" align="center"><input id="WeekRad" align="center" type="radio" style="display:inline" ng-model="Week" ng-click="ThisWeek()" />This Week</label>
</li>
<li style="display:inline">
<label class="col col-20" style="display:inline" align="center"><input id="DatesRad" align="center" type="radio" style="display:inline" ng-model="Dates" ng-click="BetweenDates()" />Between Dates</label>
</li>
</ul>
</span>
I've tried with and without <span> and with and without labels, with and without style="display:inline" but each time it remained vertical.
Finally got the soluton:
<div class="row" align="center" style="margin:auto; max-width:300px">
<div class="col-lg-6" align="center">
<div class="input-group" align="center">
<span class="input-group-addon" align="center">
<label class="col col-20" style="display:inline" align="center">
<input id="WeekRad" align="center" type="radio" style="display:inline" />This Week
</label>
</span>
</div>
</div>
<div class="col-lg-6" align="center">
<div class="input-group" align="center">
<span class="input-group-addon" align="center">
<label class="col col-20" style="display:inline" align="center">
<input id="DatesRad" align="center" type="radio"/>Between dates
</label>
</span>
</div>
</div>
</div>
Give a width to outer div and place the radio buttons in inside div's.
Play around the width to adjust the alignment.
<div align="center" style="width:***px">
<div style="float:left; width:48%">
**radio
</div>
<div style="float:left; width:48%">
**radio
</div>
</div>
this should work
How to change html so all newly added Views like Edit, Detail, list Views have that html instead of default html.
e.g. Instead default html (below one)
<h3>ListPage</h3>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.PO_PoolName)
</th>
<th>
#Html.DisplayNameFor(model => model.PO_Code)
</th>
</tr>
</table>
I want following html by default
<h3 class="page-header">ListPage</h3>
<div class="section-container section-with-top-border">
<!-- begin panel -->
<div class="panel pagination-inverse m-b-0 clearfix">
<div class="row">
<div class="col-lg-12">
<span class="pull-right ">
<a href="/Pools/Create" class="btn btn-lime btn-sm">
<i class="fa fa-fw fa-plus"></i>
Create New
</a>
</span>
</div>
</div>
<table id="data-table" data-order='[[1,"asc"]]' class="table table-bordered table-hover">
<thead>
<tr class="inverse">
<th>#Html.DisplayNameFor(model =>model.PO_PoolName)</th>
<th>#Html.DisplayNameFor(model => model.PO_Code)</th>
</tr>
</table>
Thanks in Advance
I find the solution
I modified and change the html of the t4 templates in the below directory
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web\Mvc\Scaffolding\Templates\MvcView
which work fine for me.
i have a razor syntax who verify that user is administrator, and inside it i want to add a angular syntax who display all users with roles, but if i do that ,the page doesn't display anything, if I put angular syntax outside of razor, it works but everybody can see the users ...
<div class="container">
#if (User.Identity.IsAuthenticated && User.IsInRole("administrator"))
{
<tbody>
<tr ng-repeat="item in usersAndRolesList | filter : search">
<td style="padding-top:17px;width:50%">{{item.username}}</td>
<td style="padding-top:17px;width:30%">{{item.roles}}</td>
<td><button class="btn btn" style="background-color:transparent"><i class="fa fa-pencil fa-2x" aria-hidden="true"></i></i> </button></td>
<td><button class="btn btn" style="background-color:transparent"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i> </button></td>
</tr>
</tbody>
}}
I send post request with body login=login&login:loginName={0}&login:password={1}&login:clientCode=&login:j_idt171=&javax.faces.ViewState=stateless
with help HttpWebRequest. Before that I was doing GET request, for getting JSESSIONID.
Web form looks like that:
<form id="login" name="login" method="post" action="/csologin/login.jsf">
<input type="hidden" name="login" value="login">
<div id="login:j_idt122" class="ui-messages ui-widget" aria-live="polite"></div><table border="0" cellpadding="2" cellspacing="0" width="580px">
<tbody>
<tr>
<td class="ecol1"><label id="login:j_idt125" class="ui-outputlabel ui-widget fbold" for="login:loginName">Username<span class="ui-outputlabel-rfi">*</span></label></td>
<td class="ecol2"><input id="login:loginName" name="login:loginName" type="text" autocomplete="off" size="40" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"></td>
<td class="ecol3"><div id="login:j_idt126" aria-live="polite" class="ui-message"></div></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="2" cellspacing="0" width="580px">
<tbody>
<tr>
<td class="ecol1"><label id="login:j_idt132" class="ui-outputlabel ui-widget fbold" for="login:password">Password<span class="ui-outputlabel-rfi">*</span></label></td>
<td class="ecol2"><input id="login:password" name="login:password" type="password" class="ui-inputfield ui-password ui-widget ui-state-default ui-corner-all ui-state-hover" autocomplete="off" size="40" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"></td>
<td class="ecol3"><div id="login:j_idt133" aria-live="polite" class="ui-message"></div></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="2" cellspacing="0" width="580px">
<tbody>
<tr>
<td class="ecol1"><label id="login:j_idt135" class="ui-outputlabel ui-widget fbold" for="login:clientCode">Client Code</label></td>
<td class="ecol2"><input id="login:clientCode" name="login:clientCode" type="text" maxlength="32" size="40" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"></td>
<td class="ecol3"><div id="login:j_idt136" aria-live="polite" class="ui-message"></div></td>
</tr>
</tbody>
</table>
<br><div class="text-center">
<button id="login:j_idt139" name="login:j_idt139" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="barWaitDialog.show();" type="submit" role="button" aria-disabled="false"><span class="ui-button-text ui-c">Login</span></button>
<!-- <p:commandButton value="Clear" onclick="clearVisibleTextFields();" /> --><button id="login:j_idt141" name="login:j_idt141" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({source:'login:j_idt141',oncomplete:function(xhr,status,args){clearVisibleTextFields();;}});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-text ui-c">Clear</span></button><button id="login:j_idt142" name="login:j_idt142" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" role="button" aria-disabled="false"><span class="ui-button-text ui-c">Cancel</span></button>
</div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="stateless" autocomplete="off">
Not authenticated, it returns a redirect to login page. What am I doing wrong?
Basically, you didn't press the desired button. You need to include the name=value pair of the submit button you'd like to "press" programmatically. That's usually in the server side used to distinguish if a button was pressed and if so, which one.
There appear to be three submit buttons in the HTML form, simplified as below:
<button name="login:j_idt139" type="submit">Login</button>
<button name="login:j_idt141" type="submit">Clear</button>
<button name="login:j_idt142" type="submit">Cancel</button>
It appears that the JSF developer didn't give an explicit ID to those buttons, so an autogenerated ID is being used. This autogenerated ID depends on the position of the button component in the JSF component tree. So, if the JSF developer changes the view composition (adding/moving/removing components), then chances are that the final ID of the button in the HTML markup will also change. You'd need to alter your query string on that. The parameter login:j_idt171= in your query string likely needs to be changed to login:j_idt139=.
To make it more robust, you could try contacting the website admin/developer and ask to give those buttons an explicit ID as in <p:commandButton id="login">, so that you can always use the parameter login:login= without worrying about autogenerated IDs. If that's really not an option, then you'd basically need to use a HTML parser to find out the ID of the login button.