The col-xs-* is used to control screen with with range: 0-767px.
This appears to be too large for my site.
In my case, I need grid options for a screen width that is larger than 500px AND another with range less than 500px, and that enables me to manage iphone screen with 320px for example.
I already has the media query as an answer, but I am expecting a more elegant answer.
Customize and Download your own version of Bootstrap after modifying the media query breakpoints:
http://getbootstrap.com/customize/#media-queries-breakpoints.
Alternatively, if you have node and grunt available on your system, you can actually add more LESS variables, such as a col-xss-*, or col-xlg-*, but this would require you to modify the source code (which is available to download VIA bootstrap's website).
Long story short, there isn't a way short of modifying the underlying bootstrap code.
Related
Our company is addressing gaps in accessibility on the Native side of our app. We get a general diagnostic indicating lack of zooming on text on the Native app. The ticket looks like this:
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
Zooming and scaling should not be disabled.(meta[name="viewport"]).Fix the following: user-scalable on <meta> tag disables zooming on mobile devices
We use react-native-web which allows for both web and native in one codebase. Looking at the top HTML file, I don't see anything indicating user-scalable is disabled.
In order to be able to use pinch gesture to zoom in on text, do I need to go through every text component and add a prop to enable this? Don't want to use a jack hammer for a nail but we might have to if this is what's required. I would think it would be automatic.
Your ticket seems to come from an automatic test, by axe-core : https://dequeuniversity.com/rules/axe/4.4/meta-viewport
Unlike what your ticket said, it's not a WCAG 1.4.4 failure but an accessibility best practice for the web.
If you don't have user-scalable in your HTML file, maybe the automatic test did not run correctly ?
Anyway, to manually check if your mobile app is WCAG 1.4.4 compliant, you have to increase the font size to 200% in the accessibility settings of your phone.
You absolutely do NOT need to go through every text component.
The error is accurate. You have disabled some resizing capabilities in your meta tags.
Just check the head of your document for a meta tag with the attribute name="viewport". You will probably find it has an attribute of content set to either "width=device-width, user-scalable=no" or "width=device-width, user-scalable=0". Reset the content attribute to "width=device-width, initial-scale=1". You should be all set.
In Chromium version 72.0.3626.121 the button to leave the fullscreen mode could be disabled by using the enable-experimental-fullscreen-exit-ui flag. In version 86.0.4240.193, this flag is no longer available.
Does somebody know how to disable this button?
I'm using the following options to start Chromium.
"chrome.exe" --no-default-browser-check --DisableSplashScreen=true --disable-infobars --overscroll-history-navigation=0 --js-flags="--expose-gc" --incognito --start-fullscreen
Adding the --kiosk option disables the button, but it also changes the behavior of the browser, which I don't want.
Appologisied if I'm wrong, and I do not propose this as a proper answer to your question, but this is what I think.
It might be possible that the only way to achieve what you want is to rebuild the browser from the source. For example, I wanted my bookmark UI to show a list bigger than few last items, was thinking this could be tweaked by a plugin or config, but it turns out it's a hardcoded const variable in the source code. An extension could use a different bookmarker to replace the bundled one. However, nothing can change that const value except changing it in the code and recompiling the browser.
Without knowing much internals it feels to me the X is there on purpose as safety, not to allow somebody to take advantage of less tech-savvy users (imagine a Windows login screen made in HTML to steal users credentials). Therefore I think very likely you will not be able to do what you want easily. A lot of the experiments and features get removed from the browser, remember the vertical-tabs were there for few versions as a hidden command-line argument, but then that got removed too.
I'm new to UWP (windows 10), working on an app for windows phone, I wanted to know what is the difference between:
Using multiple frames and navigate from one to other.
Using a single xaml with no frames but with multiple grids (or other patterns), and instead of navigate- just change visibility so only the desired grid will be visible.
which option is better? and why?
The system keeps track of the Page you are currently on. So even when your App exists and even if it's removed from memory the OS can tell the App to reopen on that page.
Similarily when your App provides other Apps with the capability of calling into it to open certain file types of to perform certain actions (e.g. start navigation, etc.) pages will be used.
Lastly if you put everything on a single page and just manipulate visibility this will increase memory consumption of your App (as everything needs to be loaded even if it's not visible) and it also might increase load times.
Of course how much that impacts you is up to the type of App you are building. In general however I'd advice you to start building using separate pages in case your App grows. Also you get a lot of stuff out of the box if you do so (e.g. animated transitions, etc.)
Ok so this question is actually in two parts.
I coded a video filter for VLC and I would like to add a control to the Video Effects panel on the OS X UI. So far I've been able to link my plugin the the UI by hijacking one of the existing controls, but this isn't ideal.
Now, if I open up the Xcode project (I'm running Xcode 6.3.1) and try to open the VideoEffect.xib file, I get the following error:
I tried to google this but it sounds like the only alternative would be to play archaeologist and dig up an old copy of Xcode 3. Is there any other way to be able to open this file and edit it somehow? I tried to look at the XML code but if I started to change that I'd do more damage than good.
The second thing I'd like to do is sending back values from the effect module to the UI. At the moment (by hijacking one of the existing sliders), all I can do is read a value from the panel with
config_ChainParse(p_filter, FILTER_PREFIX, ppsz_filter_options, p_filter->p_cfg);
p_filter->p_sys->i_factor = var_CreateGetIntegerCommand(p_filter, FILTER_PREFIX "factor");
and then, inside the callback function:
p_sys->i_factor = VLC_CLIP( newval.i_int, 0, 255 );
However, I haven't been able to write back the value. I'd like the filter to set p_sys->i_factor to a random value at start. This works (using var_SetInteger()), but it isn't reflected in the position of the slider in the Video Effect panel. I suspect I need to hack a bit deeper for that. Any ideas?
Regarding your first question with the xib-file. Consider downloading and using our forthcoming 3.0 code from git://git.videolan.org/vlc.git - it allows editing of said file without Xcode 3.
Regarding your second question, why would you want your video filter to interfere with the UI? This is not how the architecture of VLC works and there is no correct way to do it at this point. You would need to edit the core to do another global variable callback to ask the UI to reload the presented filter configuration.
Perhaps, if you give details about what your filter does and what you want to achieve, we find a more supported way :)
For plone 4.2.5 is there a non-complicated way to set up theme switching between desktop/mobile versions based on visitors screen size?
Something like "if less than 640x480 then" serve the mobile version ?
Talking about 2 non-Diazo themes for instance?
What is ++skin++ for skin switching, may it work?
I am quite new to plone and not really a programmer so a "sane" solution would be really appreciated !
Take a look in portal_css (via the Zope Management Interface) and search for "mobile." In the ""CSS Media" field, you'll find:
handheld, screen and (max-device-width: 480px)
This sets up a media query that causes browsers to use the mobile.css stylesheet if they know (admit) they are a handheld device or if they have a screen width of 480px or less. This is all done through completely standard CSS, and you may use the same principles to achieve completely different page designs for different screen widths. There are several great books on responsive design ("responsive" is the magic word). You may customize this stylesheet, or add your own media query style sheets.
You can also see a thorough and popular use of media queries and responsive design in "Twitter Bootstrap," which provides all sorts of class selectors that you may use to change designs at various screen widths. A bootstrap example is included with the newer version of plone.app.theming that is included with Plone 4.3.
Note, if you want design to change when you reduce a window size (not just the screen size), use "max-width" rather than "max-device-width."
I don't think so. However, you should look into responsive design and media queries. I suspect you can achieve what you want using standards compliant CSS in a single theme.
http://plone.org/products/collective.themeswitcher/
This is an alternative implementation you can use. From the description:
This addon has been designed to easily support new switcher. At the moment the only switcher that is implemented is the "mobile switcher" based on user agent from http://detectmobilebrowsers.com/ (python version).