I use button in react-native-paper with icon. I need to add a shadow style only to the icon of the button. The only available option I found was to add an elevation to the button. But it is applied to the whole button instead of applying only to the icon of the button.
The code of button:
<Button
icon={icon}
onPress={onPress}
size={size}
color={color}
animated={animated}
disabled={disabled}
style={styles.btnStyles}
/>
The Style of button to add shadow:
btnStyles: {
elevation: 40,
shadowColor: '#000',
backgroundColor: 'rgba(0,0,0,0)',
},
The result:
enter image description here
(Here you can see that the shadow is applied to the button, not to the icon inside.)
How can I solve above issue and add a shadow only to the icon?
Thanks in advance.
We currently have a select made in React with ReactSelect that has a fixed 16 options in the table. Currently, when the control is clicked, the menu appears which shows 11 items and has a vertical scroll to scroll down to show the remaining 5 items.
This would be better if all 16 items showed when menu appeared, with no vertical scroll. We have tried to create the following custom style:
menu: (provided) => ({
...provided,
background: '#DDDDDD',
marginTop: '-1px',
zIndex: 10,
height: // what to put here? we've tried "auto", "fit-content", "100%" and none are good...
}),
is there another element in the select (other than menu) that we should be styling, or is there a better way to style the menu such that all options show?
Thanks!
First, I used the most upvoted answer in this post to inspect the ReactSelect menu (which I wasn't able to do previously). I discovered that menuList has a default maxHeight of 300px, which was preventing the menu from growing larger.
This then did the trick for me:
menuList: (provided) => ({
...provided,
maxHeight: null
}),
Is it a possible to keep grid's horizontal scrollbar (not a window scroll) called by
autowidth: true,
shrinkToFit: false,
After column resized
cmTemplate: { compact: true, autoResizable: true },
Here is jsfiddle.
Steps:
Move left border of result window to right to get grid's scrool (see pix1), then
double click the column border line - scroll bar become a lost.
My real table is too wide, so I need to save grid's scrollbar.
Has found an answer by using the following option
autoResizing: { adjustGridWidth: false},
I have a JQuery UI dialog with two columns of form elements. I'm using CSS float: left to create the columns. The problem is the dialog only shows a single column. What am I missing?
http://jsfiddle.net/CV9RG/1/
You columns has float:left it means if they don't have enough space on the parent to stay side by side they break in a new line. You can set a width for the dialog to auto and fixed for your columns to make it fit:
$('#mydialog').dialog({
modal: true,
resizable: false,
autoOpen: false,
dialogClass: 'no-close',
width : 'auto'
})
and CSS :
.select-col { float: left;width:250px}
See this demo http://jsfiddle.net/CV9RG/11/
I am trying to disable the controlNav and directionNav controls within flexslider. I am using the risen theme from themeforest and the theme is using jquery.flexslider-min.js. If I use the full jquery.flexslider.js there is the following options that I can disable controlNav or directionNav.
How can I either disable this from my functions.php or the jquery.flexsliders-min.js?
$.flexslider.defaults = {
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "fade", //String: Select your animation type, "fade" or "slide"
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
// Usability features
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
// Primary Controls
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
// Secondary Navigation
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: "Pause", //String: Set the text for the "pause" pausePlay item
playText: "Play", //String: Set the text for the "play" pausePlay item
// Special properties
controlsContainer: "", //{UPDATED} jQuery Object/Selector: Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be $(".flexslider-container"). Property is ignored if given element is not found.
manualControls: "", //{UPDATED} jQuery Object/Selector: Declare custom control navigation. Examples would be $(".flex-control-nav li") or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "", //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "", //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
// Callback API
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){} //{NEW} Callback: function(slider) - Fires after a slide is removed
}
Change to
controlNav: false,
directionNav: false,
$('#.slider').flexslider({
controlNav: false,
directionNav: false
});
see the documentation here.
As Kee said, but this is how to do it when you load the slider instead of editing the source JS file:
$('#.flexslider').flexslider({
controlNav: false,
directionNav: false
});