I'm trying to style the Finish button for jquery-steps, however it appears to have an inline style:
<li class="ui button" aria-hidden="false" style="display: list-item;">
How can I remove this style, it's interfering with my styling.
You can do it in css like
li.button { display:block;}
Related
I'm using material-ui as my css framework and I want to select button that contains a specific text.
My current code:
cy.get('button').contains('Edit Claim').should('be.disabled');
It fails because the button component of material ui outputs the text inside a div so cypress is asserting the disabled attr to the div. I want it to assert to the button.
Edit:
I solved it using cy.contains('button', 'Edit Claim').should('be.disabled');
On the Material-UI demo page the label is in a child <span> (not <div>),
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained Mui-disabled Mui-disabled" tabindex="-1" type="button" disabled="">
<span class="MuiButton-label">Disabled</span>
</button>
but there may be variations - in any case, you can reference the button by adding .parent() to the test
cy.visit('https://material-ui.com/components/buttons/');
cy.get('button')
.contains('Disabled') // span is the subject
.parent() // move up to the button
.should('be.disabled');
I have a UI Bootstrap accordion whose heading I want to be fully clickable, not just the title like the default behavior.
<accordion class="fda-accordion panel-group panel-group-square" close-others="oneAtATime">
<accordion-group is-open="fdaClass1Open" ng-show="fdaRecallsClass1Count">
<accordion-heading>
<div class="panel-heading-blue">
<i class="fa fa-plus fa-fw" ng-class="{'fa-minus': fdaClass1Open, 'fa-plus': !fdaClass1Open}" style="margin-right:10px"></i>
FDA Class 1 Recalls ({{fdaRecallsClass1Count}})
</div>
</accordion-heading>
{{fdaRecallsClass1Content}}
</accordion-group>
</accordion>
Is there some workaround for this?
The issue is that the anchor that's handling the toggle is wrapped around the header text rather than the div. I would style the content of the heading with negative margins and matching positive paddings corresponding to the padding values of the heading panel in order to expand the clickable area beyond the div.
So say for instance the padding on your panel-heading is 9px 15px, you'd have the following css in your panel-heading-blue class
.panel-heading-blue{
margin: -9px -15px;
padding: 9px 15px;
}
I want to hide only clear button from datepicker directive in angular js.
Currently there are three buttons at the bottom of the angular js datePicker directive(Today, clear and Close), Is there any way to make visibility of these buttons configurable, such that i can hide one of the buttons out of it.
The Date picker which i am using is using ui-bootstrap library.
Currently there is now way to hide individual buttons in the datepicker button bar via options on the directive. You can override the template and remove the clear button, but that is a global patch and doesn't offer hiding/showing based on a condition. You could create a class that targets the button you want to hide as this plunk
.datepicker-noclear [ng-click="select(null)"] {
display: none;
}
demonstrates although that is a fragile workaround.
I would suggest submitting a feature request to add the option of which buttons are available in the button bar.
Easy, replace the template:
<script type="text/ng-template" id="template/datepicker/popup.html">
<ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
You hack with css. It worked for me.
.ui-datepicker .btn-group .btn-danger.btn{
display: none;
}
Further to Rob J's solution, if we add a ng-class={"require": "vm.required"} to the parent div of the datepicker input, or simply add a class called require to the div. Then use the magic css to hide or show the clear button depending on the value of vm.required:
.require button[ng-click^="select(null)"] {
display: none;
}
if you want to remove the clear button, it means that the field is required, and as I do not agree with forcing things (like creating a div parent and typing classes), then just set the element for which you active the datepicker as required
[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
display: none;
}
<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />
You can do this css trick to hide the clear button :
.uib-button-bar > .btn-group > .btn-danger {
display: none !important;
}
You can hide it by adding to style.css this :
.uib-clear {
display: none;
}
Angular's animate-repeat isn't applying the ng-move class when it seems like it should, so I'm confused and unable to create the animation I want.
I'm using ng-repeat with a custom filter to add and remove divs from a horizontal row:
<div id="presidents">
<div ng-repeat="president in presidents | showPresident:this" class="pres animate-repeat" id="{{ president.birth }}" >
<a href="{{ president.url }}" target="_blank">
<img src="{{ president.imageURL }}" alt="{{ president.name }}">
</a>
<p>{{ president.name }}</p>
</div>
</div>
I'm trying to create animations for when the divs are added and removed from the DOM. The Angular docs for ng-repeat state that there are three classes available for this type of animation: ng-enter, ng-leave, and ng-move. I've applied CSS animations to the enter and leave classes so that the divs fade in and out.
.ng-enter {
animation: zoomIn 1s;
}
.ng-leave {
animation: zoomOut 1s;
}
When a div fades in or out, though, the others have to slide into or out of its way and it seems like the ng-move class should be applied while that happens so that I can animate the process, but the class is never applied, so the divs just snap over instead of sliding the way I'd like. I verified that the class is never applied by giving it a red border:
.ng-move {
border: 4px solid red;
}
So, am I misunderstanding ng-move? Why is it not applied to the remaining divs when they re-position themselves?
How do I get these divs to slide over instead of snapping?
The solution I've ended up using is to animate the width and opacity of the elements myself instead of using animate.css. As they shrink in size, the others slide into place. Looks weird with text, but works fine with images. No need for the ng-move class.
I am upgrading a table form. Each row in the table has several elements, including two drop downs in specific columns for each row. I have upgraded the table to ng-grid and upgraded the drop-downs from plain select widgets to styled bootstrap drop-down elements to match the others on the site. The essential problem I am having is that the CSS layout of ng-grid causes the actual drop down menu to be put behind the cell below, and so not visible. Examining the elements shows that they are actually being rendered, have proper height, width and content, but are merely displayed behind the content in the other cell. I have tried disabling the CSS overflow: hidden on the desired cells, but it seems this property is also set for the entire grid and turning it off at that level totally breaks the grid layout. I have a working workaround, but it makes me want to take a shower and I am sure there is a more elegant way to do this:
1) put a cell template in for just the visible part, including an ng-click call passing the column (Coffeescript):
{field: "type",
displayName: "Type",
width: 155,
original_width: 155,
pinned: false,
cellClass: "type_col",
headerClass: "type_col",
cellTemplate: """<div ng-click="editor.activeCol(col)" class="btn-group">
<button ng-show="row.entity[col.field]" style="width: 125px"
class="btn dropdown-toggle blk-txt" href="#">
{{row.entity[col.field]}}</button><button class="btn">
<span class="caret"></span></button></div>"""
},
2) Put a select row callback to a different method:
multiSelect: false,
enableRowSelection: true,
afterSelectionChange: angular.bind(#, selectFunc),
3) Have a totally separate angular template of the drop-down options that is classed to always be shown open for bootstrap, but has both a ng-show and ng-style elements to allow my code to change its visibility and exact location:
<div ng-show="editor.utilization" ng-style="editor.dropdown_style">
<div class="btn-group editor-widget open">
<ul class="dropdown-menu">
<li ng-click="editor.selectUtil('heavy')">Heavy</li>
<li ng-click="editor.selectUtil('medium')">Medium</li>
<li ng-click="editor.selectUtil('light')">Light</li>
</ul>
</div>
</div>
When a user clicks on the (apparent) drop down, the following happens:
1) ng-click event delivers the column to the class, this is stored
2) row select (afterSelectionChange) callback triggers with the row and is able to get the column from the previous call, with both the row and column we now know the actual cell
3) The exact screen position of the cell in question is grabbed and the drop-down selections template is made visible directly below the clicked cell, making the illusion of a normal drop-down operation.
This is a long explanation, but wanted to give the background of what I have tried, to show that I am looking for a simpler (hopefully MUCH simpler) way to just include styled bootstrap drop-down widgets in ng-grid cells. The entire thrust of this project is to style and beautify already working forms so solutions that work only by cutting style for pure functionality don't really serve the purpose.
This is how I solved it. I have a cell in the ng-grid and in the cell i have a glyphicon arrow down. When I click it I want the dropdown toggle to show. With the CSS I got what I wanted. However, I have many cells with arrows and thus I had to change the css-style "left" dynamically. I do this with my javascript.
Hope it helps!
Cell Template:
<div class="ngCellText" ng-class="col.colIndex()" class="dropdown">
<span ng-cell-text>{{row.getProperty(col.field)}}</span>
<a class="dropdown-toggle" ng-click="setXchords($event)">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in editableItems">
<a>{{choice}}</a>
</li>
</ul>
</div>
CSS:
.dropdown-menu {
position: fixed;
top: inherit;
left: 85px;
}
JavaScript:
$scope.setXchords = function(e) {
var elem = angular.element(e.currentTarget);
$(elem).next().css('left', e.clientX).css('top', e.clientY);
};
In order to show regular dropdowns, I added this css:
.ngCell { overflow: visible; }
In order to get multiselects to appear, I needed to add a class (I used "field-multiselect") to an editableCellTemplate and then add the following css to the class:
.field-multiselect {
position: relative;
overflow: visible;
z-index: 888; }
This worked for me! (Finally, after quite a bit of trial and error!)