Just wanted to find out, to change the height of Foundation 5's Top Bar Navigation, what is the correct way to do it without it breaking on mobile?
Adding any sort of padding or height works only for desktop but on mobile views it breaks the navigation.
Thanks for the help.
Nick
The safest way will be using Sass version and modifying the line with // $topbar-height: rem-calc(45); in _settings.scss (don't forget to uncomment it)
Just add some lines of styles in your app.css
.top-bar, .title-area{height:46px; line-height:46px}
.top-bar-section li:not(.has-form) a:not(.button){padding:16px 22px;
.top-bar-section .has-dropdown > a{padding-right:22px!important;}
And you are done.
Related
I am using react-datepicker.
I have two datepicker in the one line, and it is working perfect on desktop screen but when using it on mobile screen, calendar is cutting from right side as it did not got enough space from right side.
Further, It is also not showing scrollbar to scroll to right side.
Below is the image how it looks on mobile.
I just came across this issue
On smaller viewports, the calendar is cutoff by the window. (overflows off screen to right or the left)
In order to solve this issue, I had to use the popperModifiers prop
More specifically, popperModifiers.preventOverflow
<DatePicker
...
popperModifiers={{
preventOverflow: {
enabled: true,
},
}}
</DatePicker>
Checkout the popperModifiers Docs Here
After doing a little research into the repository, it appears this is a known issue. One suggestion is to use the portal version of the date picker, which puts the date picker in a modal. You could preserve the current behavior for larger screens and use the portal solution for mobile only.
I fixed this by using the following code:
.react-datepicker{
position:absolute !important;
right: -290px !important;
}
This fixes the problem for all screen sizes
You won't see the .react-datepicker class in your css. This is built into the npm package.
You will have to play with the right: -290px figure to get the right figure that works for your code.
Sencha Touch 2.4 has this new toast class(Ext.Toast), which looks nice. But, by default, the location of the toast is centered in the viewport. Is there any way I can push it towards the bottom?
I looked at the top config, but it doesn't work well. (Pushes it down, but it's not centered horizontally now).
Tried a combination of top and left configs, but it's not perfect. I don't seem to find any hints in the docs.
Basically, I need to display the toast around of 70% of the height, and it should be centered horizontally in the viewport.
Not ideal but the following css will do it. Just change the number depending on high high you want it.
.x-toast {
top: -150px;
}
I've created a plugin that can create toast messages similar to Android style at the bottom of the screen.
I've also faced this problem I found the solution.You can also find it by the below link.
sample toast with different position and animation
I'm trying to set opacity for extjs (4.2.1) panel (whose id is myPanel) as Ext.get('myPanel').el.setOpacity(0.65). It works fine in firefox and chrome but not in IE 8. The ultimate goal is to make the panel transparent so that the user can see through it. Could any one please help me with this...
Ext will simply apply the CSS property "opacity" or alpha transparency to an HTML element. In IE8 this is almost in no case supported.
You could however use a plugin or hack to make IE 8 compatible with it.
Check http://css3pie.com/ or http://modernizr.com/ for example.
Also check http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/ for an example of your issue, and how it is solved using PIE
When you dont want to use 3rd party plugins, you can also try this:
Add the following rules to the CSS of your property
/* IE8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */ filter: alpha(opacity=50);
You can also do this with Ext.js using Ext.get('myPanel').el.setStyle()
e.g.
Ext.get('myPanel').el.setStyle('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=50)');
Finally..after breaking my head for as while..I came up with 2 solutions...
1) Apply x-panel-ghost (which is an extjs in build css applied during the drag process) for baseCls or componentCls gave the transparency. But all the other default css for a extjs panel are lost and so we have to manually write them up..
2) The best solution would be to set an image which is made transparent (through photoshop or something) as a background image for the panel header and body and apply it to the cls config of the panel as below:
In panel:
cls: 'transparency',
In css file:
.transparency .x-panel-header{
background: transparent url('../image.png') no-repeat center !important;
}
And in the same way, for the body as well..
Hope this helps someone...
I am developing a web app using the iWebKit framework. I am trying to have the top bar fixed. So I tried using iScroll. I followed the instructions of iScroll but somehow it is messing up the iWebkit. I am not sure what I am doing wrong. Any help or thoughts?
You do not need iScroll anymore.
Use position:fixed on header.
Add overflow:scroll;-webkit-overflow-scrolling:touch to the content div
Give the content div a fixed height! 440px in portrait + a 40px top margin (top bar)
Do the same for the content div in landscape
I am discovering css and I found a problem I can't fix.
My logo has a different position in IE7 than in other browsers like IE8, FF and chrome.
This is IE7:
http://www.prestashop.com/?ACT=29&fid=9&aid=16515_Awto8qE0tmhdhVFv8yWF&board_id=1
While IE8 and others show it correct, between the black and grey borders.
The css code:
#logo {
float:left;
margin-top:-45px;
margin-left:20px;
How can I fix this?
Different browsers have different default values for page elements. You should set all the elements to a base value. the best way to do this is using a CSS reset.
"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."
Check this tutorial out:
http://meyerweb.com/eric/tools/css/reset/
All the best.