We have a table that we've created using angularjs and want to add an option for each row to either Edit or Delete. We really want something that resembles this codepen, but without jquery.
So far we have the following:
<tr ng-repeat="item in data.list | filter:searchTable track by item.sys_id" >
<td class="moreOption">
<div class="more" ng-click="c.showHide(item);">
<div class='moredrop' ng-hide="!item.IsHidden">
<ul>
<li>
<i class='material-icons'>edit</i>
<span class='label'>Edit</span>
</li>
<li>
<i class='material-icons'>delete</i>
<span class='label'>Delete</span>
</li>
</ul>
</div>
</div>
</td>
</tr>
In our client controller, we have:
c.showHide = function(item) {
item.IsHidden = !item.IsHidden;
}
What we're really struggling with is the CSS styling of the pop-up box that shows Edit or Delete. We want it to "float" next to the 3 vertical dots icon when clicked on, much like the codepen link above, but can't seem to get it to look like that. Additionally, right now when you click the 3 vertical dots for one row, then click another row, it opens up 2 boxes. What do we have to do in our client controller for one click to close the previous pop up box?
Why don't you use a simple Bootstrap dropdown?
Dropdowns: Bootstrap
Use your own button or icon to launch the dropdown with this code.
$('.dropdown-toggle').dropdown()
Related
I arranged the checkboxes and the text right next to each other using bootstrap grid. But, when I click on the textbox other than the first one, only the first checkbox gets enabled. How do I make the respective checkboxes get enabled without distorting the order?
Here is my stackblitz url
The stackblitz is not working properly but one thing you can try is making the id of the checkboxes unique like
component-
public routes=[{"id":1, "place":"Chennai - 500085/Madhapur, TS"}, {"id":2,
"place":"chennai-mumbai"}, {"id":3, "place":"chennai-madhapur"}, {"id":4,
"place":"chennai-secundrabad"}];
html-
<div class="col-sm-1" style="margin-top: 10px;">
<mat-checkbox class="check-style" id="route.id"></mat-checkbox>
</div>
<div class="col-sm-10">
<div class="routesList">
{{route.place}}
</div>
</div>
I hope it helps.
I am working with Semantic UI in a rails project and wanted to create a dropdown menu with items that would link to other view pages. Most of the problems i've seen with the dropdown stemmed from users not initializing the dropdown menu which I was able to do.
Here's my code:
<div class="ui floating dropdown button">
Course<i class="dropdown icon"></i>
<div class="menu">
<% #topics.each { |topic| %>
<a class="item" href="articles/<%= topic.id %>">
<span class="text"> <%= topic.name %></span>
</a>
<% } %>
</div>
</div>
Different things i've tried:
Creating a separate hardcoded links / a tags like <a href="articles/4"> outside of the dropdown menu. This creates a working link and directs me to the article show view page with the id of 4.
Changed the wrapping 's class as "ui floating dropdown item" as well
I've also looked up other users' posts that shows they have the same exact problem. But when i try their solution, my dropdown menu items still do not work and i'm not sure what i'm doing wrong. Here are their posts:
https://github.com/Semantic-Org/Semantic-UI/issues/3234
https://github.com/Semantic-Org/Semantic-UI/issues/453
The two most important things seem to be:
Not putting the dropdown class definition as part of an anchor tag (inserting an anchor tag inside an anchor tag in the dropdown menu)
Not surrounding each anchor tags with their own <div class="items"> tags but to integrate them into one line like <a class="item" href="#"> # </a>
Can anyone help me understand what i might be overlooking? Let me know if i left out any critical information, would love to update the post with the relevant data right away, thank you!
After doing more and more research, I came to the conclusion that the links were not working in my semantic-ui dropdown menu because of some code, most likely Javascript, that i had inserted before.
Of course, i ruled this way out of the realm of possibility because there was no way i would forget about such code but i decided to go through all of my .js files just in case.
Lo and behold, i had a jQuery selector return false when a .item was being clicked...
I felt really silly and i didnt want to believe it at first but if you're having this problem and you've checked everything else like i have, it's probably your javascript!
I am working on a collapsible table.
I have a table with a ng-show. The header panel of the table uses an ng-click that toggles the ng-show piece to be true or false. However, I want to have a button at the top that toggles all the tables to one way or the other. It works unless I click on an individual table. If an individual table is clicked the toggle button ignores that table. Here's an example of what the code looks like.
<h3>{{page.name}}
<button type="button"ng-click="isOpen=!isOpen">Toggle</button>
</h3>
<div>
<div class="panel-heading" ng-click="isOpen=!isOpen">
<h3>{{table.name}}</h3>
</div>
<table ng-show="!isOpen">
~~table contents~~
</table>
</div>
The tables start out open, then close when either the toggle button is pressed or their headers are clicked. However the toggle button fails to change a table if it has been altered by clicking on the header.
One button would be the best, but having two buttons (one that opens them all, and one that closes them all) would work well too, and I feel might be the only way.
<button type="button"ng-click="isOpen=!isOpen">Toggle</button>
//lose a space.... and did you init the isOpen?
<button type="button" ng-click="isOpen=!isOpen">Toggle</button>
I'm trying to make the background of a button change color, depending on the property of it's neighboring checkbox. But since I'm dependent on the HTML rendered by the questionnaire software I use, I'm unable to change the markup.
Let me show you what I mean:
![This the first situation: everything is OK here [1]http://i.stack.imgur.com/QEoUa.png
Upon clicking 1 of the 8 options, it get's highlighted. But once you click on the "next" button below, and then on the "back"button in the following screen you will encouter the following...
![D'oh!][2]http://i.stack.imgur.com/RCq1S.png
Here the option is still selected, but the button is no longer highlighted. This is a problem, as I want to hide the checkboxes later on.
I want to solve this problem using CSS only. However the checkbox and buttons are automatically placed inside a table. The table uses the following structure:
<table>
<tr>
<td class="checkbox">
<input type="checkbox">
</td>
<td class="item">
<span class="Option">
Answer
</span>
</td>
</tr>
</table>
I've tried using:
input[type=checkbox]:checked + a{background-color:red;}
This only works when checkbox and answer button are siblings.
Hope you can help me with this...
I'm making a list app and I'm and trying to add a remove button, so that you can remove lists and list items.
My question is, how do I add this button within a list item? I want the whole list item to be clickable, but when I press the span element i don't want the anchor tag to activate, only the ng-click event.
<div class="list-group">
<a href="#/list" class="list-group-item">
{{listName}}
<span class="glyphicon glyphicon-remove pull-right" ng-click="delete()"></span>
</a>
</div>
I'm using bootstrap, feel free to suggest other ways to add this remove button.
You Can add this JQuery code:
$(a).click(function(){ return false;});