hello I have a question following the advice of you Razor View dynamic table rows, I made my table with foreach but not and could manage to make you create new columns, if I add a record is put in the same column, does not make a jump for another column, What can I do in this case? So I have my view on razor
<div>
<table>
<tr>
#foreach (var item in product)
{
<td>
<div class="card" style="width: 18rem; margin-top:3rem; margin-right:3rem; margin-bottom:2rem; margin-left:3rem; position:initial">
<img src="https://scontent.fntr8-1.fna.fbcdn.net/v/t1.0-9/107865247_704094323779323_2201784036865521556_n.jpg?_nc_cat=101&_nc_sid=8bfeb9&_nc_ohc=FwSgbE0cEAAAX92rcFt&_nc_ht=scontent.fntr8-1.fna&oh=4ec8b36ac7d0080b2f2bb3096b7b38cc&oe=5F37D400" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title">#item.ProductName</h2>
<p class="card-text">#item.Description</p>
<h4 class="card-text">Stock</h4>
<p class="card-text">#item.UnitInStock</p>
<h4 class="card-text">Color</h4>
<p class="card-text">#item.Color</p>
<h3 class="card-text" style="align-content:center">$#item.Price</h3>
<p class="card-text">#item.CreationDate.ToShortDateString()</p>
<AuthorizeView>
<Authorized>
Editar
<button class="btn btn-danger" #onclick="#(() => EliminarProduct(item.Id))">Eliminar</button>
</Authorized>
<NotAuthorized>
</NotAuthorized>
</AuthorizeView>
</div>
</div>
</td>
count++;
if (count % 3 == 0)
{
#:</tr>
#:<tr>
}
}
</tr>
</table>
</div>
I have a bit of difficulty understanding your question; I am sure you are doing your best to explain your problem.
So excuse me if this does not answer your question.
I think I see what you are trying to do there; placing 3 blocks in a row then followed by 3 other blocks.
One of the problems I foresee is that when you have exactly %3 items (so you have for instance 6 items), the last one will add a to your html and then the loop will end and add one more . So rather than checking %3 you should also check if you aren't at the last item; So something like this
if (count % 3 == 0 && count != product.Count())
May I make a suggestion that you use divs instead of a table? Just generate a div for each block and use css to style them. Depending on your solution you could even number your divs with a different class name (like: class1, class2, class3) and give them each a specific css or you could add float: left to each div and add clear: both; to the first one in your row.
The best way however would be using css where you would place any number of objects on a row as much as the width of the page permits you.
One more thing; if you want to list items in blazor it is wise to add the #key tag to each div or tr.
buttons on IEI have created radio buttons in ASP.NET using bootstrap. These buttons are supposed to be disabled which works fine in chrome but in Internet explorer, it creates a gray square around the buttons. I've been able to get it removed on IE by wrapping the input tag with a div disabled tag. However, this does not work in chrome. So I can't get one to work without messing up the other. The code I have included is the one that works with chrome.
input[disabled] {
cursor: not-allowed;
background-color: #cfcfcf;
}
input[type="radio"], input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
<div class="form-check">
<input disabled="disabled" checked="checked" class="form-check-input" id="Male" name="GenderSelection" type="radio" value="Y">
</div>
<label for="Male">Male</label>
]2
the issue is with the css.
input[disabled] {background-color:#cfcfcf;}
remove that and it works.
Thanks!
I am writing my first web application using Twitter Bootstrap and ASP.NET with C# on the back-end. I have buttons and labels inside of a Bootstrap panel. I would like to align the labels to the left and the buttons to the right. Here is my code so far:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel body">
<p>
<asp:Label ID="BandsProducedLabel" runat="server" Text="Bands Produced:"></asp:Label>
<asp:Button class="btn btn-default" ID="BandsProducedBtn" runat="server" Text="Hello" style="text-align:right" />
</p>
<\div>
<\div>
How can I accomplish this task? This is only a small snippet of code. I have about 15 other panels that I would like to apply the same styling to.
If you want to use standard Bootstrap styles, you can give the label the CSS class "pull-left" and the button "pull-right".
For the correct result, you might have to reverse the source order, that is, have the button come first and then the label, in the markup.
Another option would be to use the Bootstrap grid system to place these two elements side by side.
I've created another question which I think is the cause for this error: Why does the Selenium Firefox Driver consider my modal not displayed when the parent has overflow:hidden?
Selenium version 2.33.0
Firefox driver
The code that causes the error:
System.Threading.Thread.Sleep(5000);
var dimentions = driver.Manage().Window.Size;
var field = driver.FindElement(By.Id("addEmployees-password")); //displayed is true
field.Click(); //works fine
var element = driver.FindElement(By.Id(buttonName)); //displayed is false
element.Click(); //errors out
The button that its trying to click:
<div id="addEmployees" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addEmployeesLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Add Employee</h3>
</div>
<div class="modal-body">
<p class="alert alert-info">
<input name="addEmployees-username" id="addEmployees-username" />
<input name="addEmployees-password" id="addEmployees-password" type="password" />
<input name="addEmployees-employee" id="addEmployees-employee" />
</p>
</div>
<div class="modal-footer">
<button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button>
</div>
</div>
If I change the call to FindElements then I get ONE element, so there isn't anything else on the page.
If I FindElement on a field that occurs right before the button, say addEmployees-employee, then addEmployees-employee is displayed
In the browser itself, it shows up fine, all i need to do is actually click the button and the desired behavior executes, but the webdriver refuses to consider the element displayed
How is it that one field can be considered displayed and the other is not?
The modal with the add button in the bottom right, all the other elements are displayed = true
The window size is 1200x645 per driver.Manage().Window.Size;
The element location is: 800x355y per driver.FindElement(By.Id(buttonName)).Location
The element dimentions are: 51x30 per driver.FindElement(By.Id(buttonName)).Size
The password element location is: 552x233y per driver.FindElement(By.Id("addEmployees-password")).Size
Brian's response was right: use an explicit wait versus Thread.Sleep(). Sleep() is generally brittle, you're losing five seconds needlessly, and moreover it's just a really rotten practice for automated testing. (It took me a long, LONG time to learn that, so you're not alone there.)
Avoid implicit waits. They generally work for new items being added to the DOM, not for transitions for things like a modal to become active.
Explicit waits have a great set of ExpectedConditions (detailed in the Javadox) which can get you past these problems. Use the ExpectedCondition which matches the state you need for your next action.
Also, see Ian Rose's great blogpost on the topic, too.
Selenium WebDriver does not just check for opacity != 0, visibility = true, height > 0 and display != none on the current element in question, but it also searches up the DOM's ancestor chain to ensure that there are no parent elements that also match these checkers.
(UPDATE After looking at the JSON wire code that all the bindings refer back to, SWD also requires overflow != hidden, as well as a few other cases.)
I would do two things before restructuring the code as #Brian suggests.
Ensure that the "div.modal_footer" element does not have any reason for SWD to consider it to not be visible.
Inject some Javascript to highlight the element in question in your browser so you know absolutely you have selected the right element. You can use this gist as a starting point. If the button is highlighted in a yellow border, then you know you have the right element selected. If not, it means that the element selected is located elsewhere in the DOM. If this is the case, you probably don't have unique IDs as you would expect, which makes manipulation of the DOM very confusing.
If I had to guess, I would say that number two is what you are running into. This has happened to me as well, where a Dev reused an element ID, causing contention in which element you're supposed to find.
After discussing this with you in chat, I think the best solution (for now, at least) is to move the button out of the footer for your modal and into the body of it.
This is what you want (for now):
<div class="modal-body">
<p class="alert alert-info">
<input name="addEmployees-username" id="addEmployees-username" />
<input name="addEmployees-password" id="addEmployees-password" type="password" />
<input name="addEmployees-employee" id="addEmployees-employee" />
<button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button>
</p>
</div>
And not this:
<div class="modal-body">
<p class="alert alert-info">
<input name="addEmployees-username" id="addEmployees-username" />
<input name="addEmployees-password" id="addEmployees-password" type="password" />
<input name="addEmployees-employee" id="addEmployees-employee" />
</p>
</div>
<div class="modal-footer">
<button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button>
</div>
I had the same issue of element not visible so cannot be interacted with. it just got solved. i updated my selenium stand alone server. previous version was 2.33.0 and now it is 2.35.0
In my case the element was already present in the page but it was disabled,
so this didn't work (python):
wait.until(lambda driver: driver.find_element_by_id("myBtn"))
driver.find_element_by_id("myBtn").click()
it failed with error:
“Element is not currently visible and so may not be interacted with"
To solve my problem, I had to wait a couple of seconds ( time.sleep(5) ) until the element became visible.
You can also enable the element using JavaScript, a python example:
driver.execute_script("document.getElementById('myBtn').disabled='' ")
driver.execute_script("document.getElementById('myBtn').click() ")
How do we make a drop down list with checkboxes? C# lang is preferred for this.
You can't. Not a real one anyway, but you can fake one by making a scrolling div which appears when you click a button (using JQuery):
<div id="cbListDiv" style="height: 172px; width:300px; overflow-y:scroll; border:1px solid silver; margin-top:8px;">
<asp:CheckBoxList id="cbList" runat="server" RepeatLayout="Flow" />
</div>
Then you'd need to add some code to display or expand that region when you click a link on the page. That's about as close as you can get I think.