I have a dynamic generated Table that I want to show in a Ionic 2 Page.
The problem is that when the table is wider than the screen the table just gets cut what makes it impossible to read it entirely.
So a horizontal scroll would solve this problem and I already found a similar question but the answer of that question does not work with tables. Has anyone a suggestion?
I solved it by wrapping the table with a div and adding "overflow-x:auto" to the div.
<div style="overflow-x:auto">
<table></table>
</div>
Related
I am using ChartJS to draw a line chart. I want to update the chart with the different dataset but that is another case. Right now i am having trouble in adding a button in the title because no callback function is available for this. Any thing from i can get help ?
According to this issue on github.
There are two points mentioned:
1- You cannot have a hyperlink inside the canvas.
2- There is a solution to make title clickable but this makes whole one point to another point clickable not only text but the white space also.
My solution : what I did was to use a simple hack; I hide the title by giving it display :false and then add an external link to it. Line adding a link into the div. And upon clicking it I was changing the chart.
You can control the chart by using any external element but there are some limitation on manipulating the chart from the elements of the charts itself.
I hope it may help the future readers.
Morning,
I wanted to find out if its possible to make a change to the current foundation 5 navbar without breaking it for mobile and desktop views.
basically the current one sits the left text/image to the far left and the nav menu to the far right, which is great when the design is across the entire page, but if the content is centralized in the middle sort of like the normal 960 web layouts, it looks a bit weird at times.
is it possible to have the left image/text and nav menu links centralized in the center like it would be seen if it was in a 960px wrapper.
this all ofc without stopping the responsiveness of it.
Thanks
It sounds like what your are trying to accomplish is to center a top-bar navigation within a row.
If that's the case then you can use <div class="contain-to-grid"> to keep your top-bar within your grid layout and something like <div class="small-9 small-centered columns"> to center the row that the top-bar is in. I created a codepen example for you to look at here: http://cdpn.io/jJhyn.
The classes mentioned above are all part of Foundation so you will not be affecting the responsiveness of your design.
For a complete list of the options available to customize the top-bar see the Zurb Foundation Top Bar documentation.
If I have misunderstood your question let me know, and code is always appreciated.
I hope that helps.
EDIT: 02/13/2014
I was looking into another issue when I stumbled upon this, How to center top-bar nav?. It center's the buttons/links within the top-bar, not the top bar itself. They page they used as an example is Mister Dutch. I updated the codepen above to reflect what I found on the Foundation Forum.
Again, if I have misunderstood your question let me know.
To enable horizontal scrollbars in a table I need to style the containing DIV with "overflow: auto", highlighted in blue.
I tried it with FireBug and got the desired result. Just can't figure out out how to put the setting into APEX.
Using the theme "Blue Responsive".
I've played with this a bit in Apex 4.2.2, it should work the same in 4.2.1 I think. That particular div doesn't come from any template but you can target it with some CSS.
In the page properties, for CSS Inline, I entered the following and it seemed to work:
#report_2583625959157728_catch {overflow:auto}
(I think I've transcribed the correct id from your screenshot - you may need to check)
Unfortunately this means you'd have to do this for each report in your application individually where you want the scrollbar to appear.
Note: I haven't tested this in IE, however - last time I was mucking around with scrolling areas I found it incredibly frustrating to get it working in IE without breaking other functionality in the region - especially for Interactive reports.
You can add to Region Header:
<div style="overflow:auto;">
and to Region Footer
</div>
You can also add your css line to a report region template, if you want the scrollbar to be added to each report.
Other wise you're better of putting the overflow on a class and add it to your application's stylesheet, eg:
.myClass {overflow:auto}
you get more flexibilty to style your region this way. You can add the class to your report by setting the region attributes to class="myClass".
Note that instead of "auto", you can also try to use the element option "scroll", check the w3schools docs: http://www.w3schools.com/cssref/pr_pos_overflow.asp
I've been googling around for hours now trying to look for a way to make a column be full browser width like the top bar is. Is there a way to do this or is the only solution to just make a custom div without the div row class?
Thanks for any help!
Yes, it sounds like making a div that is not a row is the best solution.
Rows will be sized by Foundation's grid. The size of the grid can be changed (see "Grid Variables" on this page) — but if you just want to make something fill the window, it sounds like you don't want to use the grid for this element.
<div class="row collapse">
...
</div>
I have a bit of a problem with a navbar not displaying correctly in IE6. http://classicpartsltd.com/ - this is the page, and if you hover over a nav item such as 'Goggles' in IE6 you will see that some of the list items are showing up, but that they will in IE7 and IE8... Does anyone know why this would be the case?
Many thanks,
Theo.
No worries, it was a combination of too great a width and float being applied where undesired.