Using the tab panel with:
tabBarPosition: 'top',
with icons AND title's for the buttons...
The button / title alignment is:
correct: with Sencha Touch 2.1 CSS
"wrong": with 2.2 or 2.3 CSS
Question:
Any ideas what css styling I could use to get icon / text alignment of 2.1 (vertically centered), vs 2.3 (not vertically centered)
I have tried playing with the following, to no avail
tabBar:{layout:{align:'center', pack:'center'}}
jsFiddle: using sencha touch 2.3 ("Wrong") Example Here
jsFiddle: using 2.1 ("Correct") Example Here
Related
I have previously used bootstrap 3 css only with angular 2 for an application which did not require jquery dependent bootstrap components like modal, carousel etc.
I am now considering using bootstrap 4 with Angular 2 and have looked through bootstrap 4 documentation, but still confused on what components depend on jquery and/or tether.js and what components work if I include css alone. Any help will be appreciated!
Current Alpha (6) has 3 sets of CSS.
bootstrap-reboot - defines only Html standard tags
bootstrap-grid - defines the mobile-firt grid system, e.g. .container & .col-x-x
bootstrap - full version
Generally speaking, the first two above will not require the JS dependencies.
If you want to dig deeper then a quick look at the bootstrap.scss source has the JS dependant items listed separately. Thus, the non-JS dependent components are:
Core CSS
reboot
type
images
code
grid
tables
forms
buttons
Components
transitions
dropdown
button-group
input-group
custom-forms
nav
navbar
card
breadcrumb
pagination
badge
jumbotron
alert
progress
media
list-group
responsive-embed
close
Other
print
Alternately, as of 4.4, the only components that require JavaScript are
Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper.js)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Scrollspy for scroll behavior and navigation updates
I'm confused as to why the navbar does not collapse at its default breaking point of 768px.
In bootstrap's own example the navbar does not collapse at 768px.
I'm having a problem with this on my own website, and went and tested on bootstraps examples.
I tested bootstraps example page here in this screen emulator. I also tested on a real ipad. Both do not collapse at 768px.
IPad - Screenfly
Bootstrap navbar collapse at viewport width 767px, this means your window width is 781px. If your viewport width reaches 768px or any higher value, your navbar will be displayed normally like you see it on any desktop.
Width viewport 767px
Width viewport 768px or higher
You probably was confused by the window width, anyways, if you want to display the viewport and window size like i did in those screenshots, you need web developer addon for firefox, you can also see it in the screenshot, all you need to do is to press on that Resize button and pick Display Window Size but it also has other cool options like View Responsive Layouts or Resize Window.
Hope this helps.
I want to collapse navbar when screen size is <=750px.
You can use Bootstrap's customization tool to build a modified version of Bootstrap. From here, you can alter #grid-float-breakpoint to another breakpoint defined by Bootstrap (ie, xs, sm, md, lg).
You need to modified according to highlighted red in below image.
When you're finished, navigate to the Download section, and click On Compile and Download
& then use it bootstrap js & CSS.
Did you not read the docs?
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I am building an app using IBM Worklight 6.1 for iOS 7. In iOS 7 the status bar is overlay my Webview and i followed the below link and fix for the same issue.
But, it changes the style as iOS 6 and provided a scroll in my webview for that 20 pixel, so my page can be scroll up and hide the header for 20 pixel.
Please let me know if someone has a solution...
Screenshot 1:
Screenshot 2:
From the screenshots, it looks like the HelloWorklight project is being used.
In the context of this application, you can add the following to the #header in common\css\main.css:
position: fixed;
width: 100%;
This way, when swiping Up the status bar will not cover the header...
You can take a similar approach in your own app.
Fixed positioning in CSS.
Note that in iphone\css\main.css you can alter the styling of the default white status bar that is "injected" by the Worklight framework.
I built mobile web application with sencha touch 2.0
I have a regular panel object :
{
html : "content",
scrollable : true
}
When I use the scrollable option I have problem on android.
The scroll bar appears but all the content is no visible... just blank.
But the way , on iPhone I see the content and everything works.
Why its happened ? What I need to do to fix that ?
Please Mention
'fullscreen: true'
While creating this panel
Thanks
Jaffer