How can I have a Label and a Button.Group be attached to a Dropdown in Semantic UI for React?
The attached picture shows what I have currently. If I try using the attached attribute, the label or button group become nested within the dropdown.
Edit: Following is the Semantic UI React markup I currently have:
<Label size='big'>Code</Label>
<Dropdown
options={options}
placeholder='Choose a Patch'
search
selection
allowAdditions
value={value}
/>
<Button.Group>
<Button icon='save' content='Save' color='green' />
<Button.Or />
<Button icon='clone' content='Clone' color='yellow' />
<Button icon='cogs' />
</Button.Group>
I got this to work with semantic-ui-react v2.0.3.
Here's the markup I used:
<Container className='refreshable-dropdown'>
<Dropdown className='left attached refreshable-dropdown' multiple select />
<Button className='refreshable-dropdown' attached='right' icon='refresh' />
</Container>
You can see I added a CSS class called refreshable-dropdown. I added a "refresh" button next to my dropdowns. Here's the CSS classes I used:
/* This is for "fluid" dropdowns that take the whole width of
* their container.
*/
.ui.container.refreshable-dropdown {
display: flex;
flex-flow: row nowrap;
width: 100%
}
/* If you want the dropdown "inline" with other content, apply
* the inline CSS class
*/
.ui.container.refreshable-dropdown.inline {
display: flex-inline;
flex-flow: row nowrap;
}
.ui.attached.dropdown.refreshable-dropdown {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.ui.attached.button.refreshable-dropdown {
border: 1px solid #2185d0; /* Specific to my button color */
border-right: none;
box-shadow: none !important;
vertical-align: top;
}
.ui.attached.button.refreshable-dropdown:hover {
border-color: #1678c2; /* Specific to my button color*/
}
Note that I left the select attribute on the Dropdown. This causes some different HTML to be generated than other markdowns, so this may not be 100% applicable to your situation. But I hope it'll at least give you some inspiration for making this work for you. Oh, and here's the resulting dropdown:
Related
This question has a Stackblitz demo; Given the following Angular Material button
<button md-button>
<span>Foo</span>
<md-icon>keyboard_arrow_down</md-icon>
</button>
How can I increase the gap between Foo and the icon (see below):
I thought this would be easy but Angular Material wraps the contents in <span class="mat-button-wrapper"> so the final markup is more like:
<button>
<span class="mat-button-wrapper">
<span>Foo</span>
<mat-icon>keyboard_arrow_down</mat-icon>
</span>
</button>
So far I've got as far as adding the following CSS to make the wrapper fill the available space but I can't see how to progress:
.mat-button-wrapper {
display: inline-block;
width: 100%;
}
.mat-button-wrapper > span {
margin-right: 2em;
}
Stackblitz :-
https://stackblitz.com/edit/angular-material-6z4j4m
button md-icon {
margin-left: 64px;
}
This is more semantically appropriate.
https://stackblitz.com/edit/angular-material-yvqvhm
I'm using Angular6 with material-designs. What I'm trying to do is get color input from mat-form-field. For that I used matinput type="color" inside my input tag. My HTML file is as follows,
<div>
<mat-form-field class="form-field">
<mat-label>Color</mat-label>
<input matInput type="color" formControlName="color"required placeholder="Color">
</mat-form-field>
</div>
Then I have added some CSS on it to design the color picker box according to my need,
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 25px;
height: 25px;
float: right;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
Now the output what I'm getting is,
Even though this contains black color in default, the form field didn't get any default input. So what I want to do is get the default color box as follows. (To easily understand the requirement I have designed my expectation using photoshop),
You have to add some styles and need some changes in ts file code to display that box
Here is a working example: https://stackblitz.com/edit/angular-tbkqbt
I'm stuck with a design/UX issue that I'm working on.
I have a button which says "No Filter" and if I click, I want it to change to "Reset" and clicking on reset should get me back to old state. (No filter) (Additionally, I'm changing the value in the dropdown if that helps)
What should I use to represent this behavior? (Switch, Button?) Kinda confused.
Code:
<button type="button" class="btn btn-sm" id="removeDwell">
<i id="removeDwell"></i> No filter
</button>
I would suggest placing the both the button internal options in there at the start. Then use CSS and JS to toggle a class that hide/shows the relevant internals. Given that you mention you're changing the value inside the dropdown, i would assume you've probably already got a button .on('click') binding somewhere, this code would just extend that.
By using the .btn-active-toggle and the internal .when-active or .when-inactive classes, you have the option to use this same logic in a number of places that you'd like to toggle the internal display of a button (or rather anything with the class of .btn-active-toggle). In terms of naming conventions, given bootstrap includes CSS for any .btn with the class .active, you may want to consider using a different class name than .active if you do not wish for this out-of-the-box styling; just update the JS and CSS below.
Note: this solution is not the best from an accessibility point of view, as screen readers will read both internals, without knowing which is active. If this is important for you, consider similarly toggling aria values to specify which is active
HTML
<button type="button" class="btn btn-sm btn-active-toggle" id="removeDwell">
<span class="when-active">
<i class="glyphicon glyphicon-remove"></i> No filter
</span>
<span class="when-inactive">
<i class="glyphicon glyphicon-refresh"></i> Reset
</span>
</button>
CSS
.btn-active-toggle.active .when-active,
.btn-active-toggle .when-inactive{
display:inline-block;
}
.btn-active-toggle.active .when-inactive,
.btn-active-toggle .when-active{
display:none;
}
JS
$('#removeDwell').on('click', function(){
$(this).toggleClass('active');
})
JSFIDDLE
The following is a JavaScript solution which does not increase any HTML overhead:
var defaultText,
substituteText,
btn;
/* Default text of the button */
defaultText = 'No Filter';
/* Alternate text for button */
substituteText = 'Reset';
/* Grab our button */
btn = document.querySelector('.btn');
/* Add a listener to the button instance so we can manipulate it */
btn.addEventListener('click', function() {
changeText(this, defaultText, substituteText);
}, false);
/**
* Change the text of a button
* #param {el} object HTMLElement: button to change text of
* #param {dText} string: default text
* #param {nText} string: new text
**/
function changeText(el, dText, nText) {
var content = '',
context = '';
/**
* Set the text of a button
* - dependant upon current text
**/
function setText() {
return (content === dText) ? nText : dText;
}
/* Check to see if the browser accepts textContent */
if ('textContent' in document.body) {
context = 'textContent';
/* Get the current button text */
content = el[context];
/* Browser does NOT use textContent */
} else {
/* Get the button text with fallback option */
content = el.firstChild.nodeValue;
}
/* Set button text */
if (context === 'textContent') {
el.textContent = setText();
} else {
el.firstChild.nodeValue = setText();
}
}
.btn {
position: relative;
width: 6em;
height: 2em;
padding: 0 0.2em 0.2em 0.2em ;
margin: 3% 0;
left: 50%;
transform: translateX(-50%);
font-size: 1.2em;
color: #eee;
background-color: #1B6CBD;
border: 1px solid #0E3A59;
border-radius: 0.2em;
box-shadow: 0 1px 0 #0E3A59,
0 0 2px rgba(#1B6CBD, 0.8);
text-shadow: 0.05em 0.05em 0 #555;
}
.btn,
.btn:hover {
transition: background 150ms;
}
.btn:hover,
.btn:active {
color: #eee;
background: #114C8F;
border-color: #0E3A59;
}
<button class="btn" type="button">No Filter</button>
I found this tutorial, which introduces a transition that I need for my for my page to slide it down with a single click using radio buttons.
The idea is, that my page's width and height are 100% and each click moves the page "off the canvas" using translateY (found at tyyli.css line 663) just like in the tutorial provided.
After all efforts I can't get it work if I put the first radio button inside st-scroll div. I have to put it directly under site-wrapper to get it work but now is looks horrible, because it wont move along with the page and just hides under st-scroll. Also the dot putted outside st-scroll DIV causes the whole page to be 100px lower than it thould be.
This is the top radio button.
<input type="radio" name="radio-set" id="st-control-1"/>
Try to move this code from the first <secton> to just under site-wrapper like this
<div class="menu">
</div>
/*TRY TO PUT IT JUST BELOW THIS LINE AND SEE THE PROBLEM*/
<input type="radio" name="radio-set" id="st-control-1"/>
<div class="st-scroll">
and you will see the problem. My idea is, that this has something to do with the Z-index, but i might be wrong. I want to place both buttons inside st-scroll.
My site is www.kasperikoski.fi
You can use labels to control radio buttons, so you can put the labels wherever you want and have more control over styling them, as well as hide the radios. However, the radios must be siblings of the element you want to control or one of its ancestors if you want to use the ~ or + combinators.
DEMO
.st-scroll {
padding: 1em;
background-color: tomato;
transition: transform 500ms ease;
}
input[name="radio-set"] {
display: none;
}
label {
display: block;
margin-bottom: 0.5em;
padding: 1em;
background-color: lightgray;
border: solid 1px gray;
border-radius: 0.5em;
}
input[type="radio"] + label {
display: inline-block;
}
#st-control-1 ~ .st-scroll {
transform: translateY(100%);
}
#st-control-1:checked ~ .st-scroll {
transform: translateY(0);
}
<input type="radio" id="st-control-1" name="radio-set" checked="checked" />
<div class="st-scroll">
<label for="st-control-1">I'm a label in .st-scroll but am linked to #st-control-1 so I can control my parent</label>
<input type="radio" id="st-control-2" name="radio-set" />
<label for="st-control-2">I'm a label linked to the other radio</label>
</div>
The reason that the links only work outside the div is because the effect is driven by the CSS: #st-control-#:checked ~ .st-scroll which means it looks for a sibling DOM element with .st-scroll class. You need to either have it on the outside of the scroll element or rely on javascript to trigger the same transforms by adding/removing certain classes.
I could see it being done various ways, although the fastest (me being lazy and all) would be something like:
In html:
<input type="radio" name="radio-set" id="st-control-1" value="scroll-1">
... further down
<input type="radio" name="radio-set" id="st-control-2" value="scroll-2">
In a script including jquery to save time...:
$(document).ready(function(){
var scroll = $('.st-scroll');
$('input[name="radio-set"]').click(function() {
var which = $(this).attr('value');
var prev = scroll.data('current');
if(prev) scroll.removeClass(prev);
scroll.addClass(which)
.data('current',which);
});
});
And finally the css:
.scroll-1 {
transform: translateY(-100%);
}
.scroll-2 {
transform: translateY(0);
}
I have this button:
<input type="submit" value="#Translator.Translate("PAYOUT")"
class="btn-block secondary-button save-changes padding-8"
ng-disabled="PayoutEnabled==false" ng-click="PayOut()" />
But even when it's disabled it has the same class as it's enabled, just not clickable. I want to change background when it's disabled so that user can see that button, is disabled. How can I do that? Do I need some ng-disabled CSS class or there is some other way?
What Toress answered should work fine but you don't need the help of AngularJS here at all (a native implementation & usage is always best).
You can make use of CSS3 since you already have a class on it. Example:
input.save-changes {
/* some style when the element is active */
}
input.save-changes[disabled] {
/* styles when the element is disabled */
background-color: #ddd;
}
Edit: You can immediately test it on this page of StackOverflow. Just inspect the blue button element and put the disabled attribute and see it's CSS.
.save-changes {
background-color: red;
padding: 7px 13px;
color: white;
border: 1px solid red;
font-weight: bold;
}
.save-changes[disabled] {
background-color: #FF85A1
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="PayoutEnabled = true">
<a href="#" ng-click="PayoutEnabled = !PayoutEnabled">
{{PayoutEnabled ? 'Disable' : 'Enable'}} the below button</a>
<br>
<br>
<input class="save-changes" type="submit" value="PAYOUT" ng-disabled="PayoutEnabled == false" />
</div>
use ng-class
<input type="submit" value="#Translator.Translate("PAYOUT")" class="btn-block
secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false"
ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />
this will add css class diabled-class to the input when PayoutEnabled is false (!PayoutEnabled is true).
AngularJS adds pseudo-class disabled when ng-disabled is false so i think here is the simplest solution to refer to disabled button :
button:disabled {
color:#717782;
}
In case you are using Bootstrap and a more recent Angular version than AngularJs you can ovverride the default style adding this to the styles.css file
.btn.disabled, .btn:disabled {
opacity: .35 !important;
background-color: gray !important;
}
The higher the opacity the darker or more solid the color will be.