The content of the drop-down box can be scrolled laterally if it is too long
The Ant-Design version: 4.1.5
I set the dropdownStyle in the document and it doesn't work
<Select
dropdownStyle={{ overflowX: 'scroll' }}
>
// Options...
<
I also tried to set the dropdownClassName
It didn't work
Can someone point me in the right direction?
Apply this CSS should be working
.ant-select-item-option-content {
overflow: initial;
}
I have a react material-ui expansion panel now the collapse child of that panel is causing me issues so I need to set it's overflow to visible however I do not know how I can do that in react especially since this child is not a class I've defined but a child of the imported expansion panel.
I've tested in the console and I know which class needs to overflow: 'visible' style on it however I have no idea how to apply it.
Below is my HTML and css for basic structure but really the question is how can I apply it to the child component of the expansion panel
The HTML
<ExpansionPanel
className={classes.expansionPanelExpanded}
>
// the stuff inside the panel
</ExpansionPanel>
The CSS
const materialStyles = (theme: Theme) =>
createStyles({
container: {
overflow: 'visible'
},
expansionPanelExpanded: {
boxShadow: 'none',
root: {
overflow: 'visible',
expansionPanelExpanded: {
overflow: 'visible'
},
},
},
})
All the stuff inside expansionPanelExpanded is what I've tried to pass the overflow: 'visible' to it's child which in the console appears with the className as:
class='MuiCollapse-container-444 MuiCollapse-entered-445'
The Parent of this class is:
class='MuiPaper-root-405 MuiPaper-elevation1-408 MuiExpansionPanel-root-402 WithStyles-ExpansionPanel--root-500 MuiExpansionPanel-expanded-403'
if I can set the overflow: visible style for this it would solve my problem.
Is there any way to use react-semantic-ui's <Sidebar> to have a sticky sidebar?
One way to achieve the sticky behavior is to just skip and not use <Sidebar.Pushable>, but then I can't use <Sidebar.Pusher>'s dimmed prop.
Other than the method I stated above, I found no other method that's not too hacky.
I was looking for this a while back. Here is how I did it:
my-sidebar.css:
.pushable {
height: auto;
}
.pushable > .pusher {
min-height: fit-content;
}
It was long time ago so let me know if it didn't work so I can update this.
Sticky with sidebar
I wanted to have a sticky error message overflowing the content with a vertical sidebar pushable on the left.
I tried for hours with sticky but I have not been able to make it.
The cleanest solution I found is to use Portal and to add css to push it at the top.
This is my message component (next to the pushable sidebar)
class AppAlert extends React.Component{
getColor(){
return 'green';
}
render(){
return (
<TransitionablePortal open={true} transition={{ animation: 'swing down', duration:1000 }} closeOnDocumentClick={false}>
<Sidebar style={{position: 'fixed', top: '0'}} direction="top" animation="overlay">
<Message color={this.getColor()}>
My message<br/>
My message<br/>
My message<br/>
</Message>
</Sidebar>
</TransitionablePortal>
)
}
}
export default AppAlert;
Screenshot of the result
When using datatables with jquery mobile, I can not seem to get a horizontal scroller going. I have tried every combination of sScrollX and sScrollY I can think of.
To see an example of the lack of vertical scroller, please try the webapp example I put up here.
On an iphone or some other small screen try the following:
1) Switch the slider from Graph to Table
2) Hit the favorites button
3) Scroll down the left panel and select "MSFT".
You will see only the first few columns. You can scroll up and down but not to the right.
I tried sScrollX and sScrollY but the scrolling is then inconsistent and buggy. At the moment I've disabled both and at least vertical scrolling works ok.
Any help would be much appreciated as I've now been fighting this for a week!
Please find the current datatables code below:
var table = $('#table_container').dataTable( {
"symbol": symbol,
"exchange": exchange,
"aoColumns": columnData,
"aoColumnDefs": [
{ "aTargets": [0], "mRender": function (data, type, full) {return dateFormat(data)} },
{ "aTargets": [1], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": [8], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": [14], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": ["_all"], "mRender": function (data, type, full) {return numberWithCommas(parseFloat(data).toFixed(2))} },
],
"aaSorting": [[ 0, "desc" ]],
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"bProcessing": true,
//"sScrollX": "100%",
//"sScrollY": "100%",
//"sDom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',
"bScrollCollapse": false,
"bServerSide": true,
"sAjaxSource": str,
"bDeferRender": true,
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
} );
Try like this
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );
Refer this Fiddle Demo
Wrap the table in a div.
You can set the overflow value to auto.
<div class="table-container">
<table>
...
</table>
</div>
CSS
.table-container{
overflow: auto
}
another way is to set the overflow to hidden, and then set the overflow-x (horizontal scrolling) to scroll. This has the benefit of also allowing you to set the -webkit-overflow-scrolling to touch, which will allow for momentum scrolling on mobile devices.
CSS
.table-container{
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
I have inspected the CSS of your APP from the link you provided.
To get the table to scroll in any direction independently you will need to set a desired width and height in your .dataTables_wrapper class. Vertical scrolling works in your APP because the Table is not actually scrolling itself but the Whole Page is. If your APP will not have any other content below the table then the table height can be set all the way to the bottom of the Page or else you will need to have a small Gap at the bottom so a user can touch and scroll further down the Page. Also If you are aiming your app on different mobiles then you need some jquery code to calculate screen size and update the width and height in the .dataTables_wrapper class on the fly so the table will fit the screen from left and right and to the bottom. Any excess width and height will be scrolled if the table contents are longer than the size. If the APP is just for one mobile then its easy to play around with the width and height in the class to get the desired size of the table.
Example
.dataTables_wrapper {
position: relative;
clear: both;
height: 400px;
width: 400px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Your main_container css should be like this, so delete the rest. Otherwise you will have another horizontal scroll bar that does nothing.
#main_container {
overflow: hidden;
}
Although scroll bars are usually hidden from mobile browsers unlike desktop browsers, if you want add this css trick to hide them from view. This trick only works for webkit browsers such as Google/Safari/Native Android etc.
::-webkit-scrollbar {
width: 0px;
}
It may be a good idea to you have Fixed Table Header so a person can see what data relates to the columns when they are scrolling. There are lots of ways to achieve this, below i added a link i found
http://fixedheadertable.com/
I have a panel in Sencha Touch defined as so:
var albumContainer = Ext.create('Ext.Panel', {
id: 'album_container',
html: '',
flex: 1,
scrollable: 'vertical',
padding: 0,
});
Everything works, however since adding the scrollable property the panel has had a white background, which I'm trying to get rid off, however just setting the background of #album_container, even as !important, does nothing. Any help? Thanks in advance.
Best regards,
Damir H.
For me, I had to change the background color of the items.
items: [{
style: 'background-color:#F00',
layout: 'hbox', padding: '5',
// some other stuff