I'm trying to use visible-xs,visible-sm,visible-md on a div like this: <div class="badge" class="visible-xs visible-sm">text</div>
But this not seems to work on mobile phone or tablet, on desktop however this works when i manipulate with window, on mobiles it works when i switch browser to "show as desktop".
Strange is that, everything else works, even the classes hidden-*
Does anyone have any suggestion, how to solve this?
visible-* should work fine with mobile devices.
show us an example please.
According to Twitter Bootstrap's website: http://getbootstrap.com/css/#responsive-utilities-classes
If you are using the current version of Bootstrap: 3.2.0, this is now no longer kosher. It should still be able to work, but you may want to try .visible-sm-*. The * is often a place holder for block, inline, or inline-block. Ex: .visible-sm-inline
That being said, I have found leaving the * also works. Ex: .visible-sm-* will hide things on small devices.
Don't use more than one class block on your div, or it will get only the first classname. Try like this:
<div class="badge visible-xs visible-sm">text</div>
As seen in:
http://www.w3.org/TR/html5/dom.html#classes
Related
I have got some HTML working fine in 2 web pages, but at one point, I grab the innerhtml of the container div and mail that to the user.
The same code, even when it's all in the email code, doesn't function the same way. Is this something that only works in browsers?
Here is some sample code that isn't working as I'd like :
<div class="flex" style="display: flex; flex-direction: column; margin:11px 0; ">
<div style="order: 2">Growth <strong> 2</strong></div>
<div style="order: 5">Safety <strong>5</strong></div>
<div style="order: 3">Income <strong> 3</strong> </div>
<div style="order: 4">Tax Efficiency <strong>4</strong> </div>
<div style="order: 1">Liquidity <strong> 1</strong></div>
</div>
ADDITION :
OK... most of what I'm finding around on the web, leads me to believe that displaying the code that I shared earlier will not transfer to email. So I have a different question.... is it possible, that when I save the div's innerhtml to the field for insertion into the email that I can put the sub divs in the correct order BEFORE sending to the email? so the email just has to display it, not process it.
So curious how I can actually move the subdivs around... as often happens, I got asked to do this at the last minute and don't have time to learn an entirely new system, but if someone knows how this can be done and maybe point me to the right link, that would be great.
Thanks very much guys for your comments so far.
Using flexbox (or any of the modern css methodologies) in email templates is simply no good.
You can find information about what to use in an email template here.
If this is your first time building an email template, I suggest that you use a semantic framework for doing this with a bit of ease. An email building framework takes into consideration all the requirements for a responsive email that is displayed in the same way across various email clients.
As from my experience so far, Foundation for emails (zurb email stack) is the best option of doing so. Like I said, it is semantic, and easy to understand (and use). Everything is automated for you, it even has browser-sync applied to it.
Sample syntax:
<container>
<row>
<columns small="12" large="6">Column One</columns>
<columns small="12" large="6">Column Two</columns>
</row>
</container>
July 07 2019 - UPDATE: You can also use a nice little tool by the folks at MJML which allows for even easier template creation, because of its own editor and live template view.
Is this something that only works in browsers?
In a way, yes.
Most email clients only support very basic HTML and certainly nothing newer. Don't rely on new HTML/CSS/JavaScript to work in them properly; even older doesn't always work well - still need to lay out pages with tables and use inline styles for visuals.
flexbox isn't supported by all email clients. It displays, it can work, see below for an explanation, but not the way you may expect. I ran your sample code as-is using Zurb Foundation for Email template 1.05. I did not add any flexbox CSS. I ran the results through Litmus.com and further verified the results with actual email clients (Outlook, Gmail, Apple Mail).
This is how your results looked in Outlook 2013:
This is how it looks in Gmail:
The results I saw in testing mostly follows the look of Outlook 2013 email, which includes Yahoo, AOL, IOS on various devices and others.
Bold characters were ignored by IOS devices like an iPhone or an iPad. In Outlook.com (Hotmail), it looks closer to the results shown with Gmail.
Your code will display with most major email clients, but your results not be consistent and it will not sort. Using flexbox and divs is not an approach that will bring you the best results across all email clients.
You could combine specific css to help enhance what you are attempting to do, so that you can use the same code base as you might with front-end development.
Flexbox is supported
This article is several years old, but flexbox works on Apple and Android devices, but might require a -webkit tag. display:-webkit-flex; I never added that or any flexbox css.
Flexbox is not supported across the board and using it might cause more problems than it fixes. For more information, visit:
https://litmus.com/community/discussions/1500-using-flexbox-in-an-email
Background
I've built a responsive website template. I've chosen to use Bootstrap 2.3.2 because it needs to work in IE7+ and be suitable for mobile devices. I've used respond.js and html5shiv.js so that it will work in IE.
Problem
The site works beautifully in Chrome and Firefox. And it displays well in IE8. However in IE8 it's incredibly slow. Even after the page has finished loading the browser freezes up if I try to scroll down or click on something. It looks great but the slow response time makes it virtually unusable.
Cause of problem
I've identified that Bootstrap.min.css is the cause. When I remove bootstrap.min.css from the page and leave everything else the same, the styles don't work but the page loads quickly and it's very quick to scroll up and down and click on buttons.
I think (or rather I hope!) that the cause is not Bootstrap but rather because I'm using the responsive elements of Bootstrap (e.g. row-fluid). I'd like to keep the site responsive for all non-IE users, but I'd like to try making all widths fixed for IE8 users and below.
Attempts to fix
I've tried overriding the percentage widths in IE by creating a conditional IE stylesheet. However it doesn't appear to be possible to override the media queries, even using !important (example below).
HTML
<div class="row-fluid">
<div class="span10 width7">
</div>
</div>
Bootstrap
This is an example of what I've been trying to override.
#media (min-width: 1200px)
.row-fluid .span10 {
width: 40.92827004219409%;
}
CSS to override Bootstrap
The code below is not able to override the bootstrap css above.
.row-fluid .span10.width7{
width: 485px !important;
}
Question
Has anyone got any suggestions about how I might adapt my template so that it continues to be responsive for non-IE users but has fixed widths for IE8 and below?
Many thanks,
Katie
I created a web page using the bootstrap grid.
This page is rendered perfectly, as expected, when I just open it with a browser.
The container in bootstrap is smaller than the screen, everything is perfect.
BUT, if I render the exact same page as an application.html.erb layout in rails, it always send this message to the browser: #media (min-width: 1200px). This makes my page become a bit bigger than my screen. The rest is fine. Bootstrap works but the container width is too big! In the plain page it is 960px, which is perfect!
Why?
I don't want this to happen! It is really weird. I read some posts where people say it happened to them, but I have the two pages side by side and "inspect element" shows #media (min-width: 1200px) in the css of the "row" class in the rails page and nothing in the other!
I am totally not willing to hack the bootstrap css. I would just like to figure out what is happening and fix it ! I would really like to use it as a stylesheet and not as a gem...
thanks so much in advance!
P.S.:
In rails, I copied the bootstrap folder in my /assets/stylesheets/ directory
How about adding your own style in the file 'bootstrap_and_overrides.css.less' (or any other you have)?
In my own CSS, I have this:
.container {
width: 960px;
}
and the problem is solved. :)
Maybe the answers to my questions regarding Bootstrap & Rails provide you with some insight:
How to access Bootstrap Files individually
How to pass Bootstrap-Variables in Rails
I'm using a Bootstrap modal dialog on my site (which works fine on desktop). When I try to use this function on iPhones and iPads, the modals do not work.
Is there a reason for this? Has anyone come up with a fix for this whilst using Bootstrap's CSS via #import?
I use the Bootstrap override file to make changes to the Bootstrap CSS.
I had the same problem these days and figured out, that safari on iOS is working differently to other browsers with respect to one thing. The modal window is not shown on safari but on many other browsers, when there is a href="#" missing.
not working on Safari/iOS but other browsers:
<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>
working on Safari/iOS and other browsers:
<li>Modal</li>
The iPhone's browser doesn't seem to support the modal's "fade" transition. Disable it entirely from your modal dialog box, or if you want to get fancy, disable only when your site detects an iPhone device:
This doesn't work on the iPhone
<div class="modal hide fade" id="deleteConfirmation">
This does
<div class="modal hide" id="deleteConfirmation">
please check out http://jschr.github.com/bootstrap-modal/ as it fixes a bunch of the modal issues.. all you'll have to do is just include the 2 js files --
- bootstrap-modalmanager.js
- js/bootstrap-modal.js
and it just works
I know I'm a little late to this party but I was having the same problem and came across a solution that solved it. In case anyone else is having the same problem and finds this question doing a search here is the answer:
Add the class "clickable" to whatever you're tapping on with your iOS device that's supposed to open the modal. I assume you're using a div because an a tag or button should work just fine. Then in your CSS put this:
.clickable {
cursor:pointer;
}
This is not a Bootstrap problem, it's an iOS problem. The pointer lets iOS know that whatever you're tapping on is clickable, which normally doesn't include a div.
I won't take credit for this answer, I found it here:
Bootstrap Modal does not work on iOS devices
this is still an open issue on the Bootstrap Project:
https://github.com/twitter/bootstrap/issues/2130
This may be caused by incorrect dialog positioning. try playing with the "top" setting in the .modal class.
I had similar error on my mobile device (Android OS).
Modal works fine on desktop but on mobile doesn't work.
Problem was in my wrong definition of grid layout.
So, define .col-xs in any column of your layout, that worked for me.
I also had the same problem where my button to trigger Modal was not working on iPhone. I had to convert the <a> tag with Rails link_to and providing all possible attributes. ie.,
= link_to "Open Modal", '#', :remote => true, "data-backdrop" => "modal-backdrop", "data-toggle" => "modal", "data-target" => "#myModal"
Very easy, just add the an inline style, "cursor" to pointer and it will work straight away. style="cursor:pointer;"
<li><a data-toggle="modal" data-target="#testModal" style="cursor:pointer;">Modal</a></li>
If you're trying to display a modal during form submission, then you'll need to make sure the modal is activated before the submit event. This is because iOS Safari doesn't allow animations during form submission.
I was displaying my modal after jquery validation completed, which was too late. So instead I show the modal on button click, and dismiss it if jquery validation fails during the submit event.
I have a png with transparent background that doesn't work in IE 6. I have gotten round the problem by replacing the few img tags using that image with a DIV, and in CSS I use:
#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}
the problem I have with this is that I then lose alt and title attributes which doesn't make the site very accessible. If I use the above CSS with an img tag I see the correct image but it has the big 'X' over it that IE shows when it can't display an image.
Any suggestions on how I can get IE to behave by showing the transparency correctly in an IMG tag?
One way you can continue to use the DIV tags, but still be accessable is to place a second SPAN tag within the DIV element and put the value for the ALT inside that, then style it to not be off the page... for example...
div.image {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}
div.image span {
position : absolute;
top : -9999px;
}
Then the HTML would look like this...
<div class="image" title="The title for the image" >
<span>The ALT Text</span>
</div>
The title tag will still work on the DIV so you should be okay on that part.
I don't think you can simply hide the text (as in display:none;) because I think screen readers will respect that rule (as in not read it)
you could use javascript to enable transparency in ie6. there are many examples you can find. here is a link to one i have used.
http://jquery.andreaseberhard.de/pngFix/
another option is to use htc for ie6 - see here for solution:
http://www.twinhelix.com/css/iepngfix/
only requires an extra line added to your css file - sorry still may require javascript - not too sure.
I used a small javascript tool for solving this problem a couple of month ago. It's named Unit PNG FIX and it's very easy to use.
While someone here gave a JS implementation for this, this solution will be also executed for FF and other browsers. There are better ideas, for example using MS technology :)
One of them uses something called HTC (hypertext component, if I am not mistaking). It's something like... a CSS for behavior. It's really an XML file which lets you attach some functions to a CSS selector. Again, an MS only technology.
In short, visit this site:
http://www.twinhelix.com/css/iepngfix/
I am using this withing a drupal module and I am very happy. If you are wondering, this is the module: http://drupal.org/project/pngbehave
Note: this does not work under IE tester: http://www.my-debugbar.com/wiki/IETester/HomePage
I am using a Windows 2000 with IE6 (running under vmware, if you have to know) to test IE6 sites.
IE6 supports PNG-8 transparency, but not PNG-24. One of my favorite tools to "fix" IE6 is IE8.js.