I have bootstrap 4 beta 3 installed in a Laravel 5.4 application by changing the package.json to use "bootstrap": "^4.0.0-beta",
in place of the entry for loading v3 of bootstrap. I also modified the app.scss file and other locations to be sure to reference the bootstrap v4 files with respect to both css and js.
I am having an issue with in my header with an element that has the navbar-brand class applied to it with respect to it being the proper size. Upon inspecting that element I found that "font-size: 2;" was there and struck out as being invalid. Clicking the link to the css file I see this bit of css that clearly is missing the length not on the font-size value.
.navbar-brand {
display: inline-block;
padding-top: 0.18rem;
padding-bottom: 0.18rem;
margin-right: 1rem;
font-size: 2;
line-height: inherit;
white-space: nowrap;
}
So, is there something I missed, or is this just a case where this bets 3 is not ready yet?
In Bootstrap 4 beta 3 the default style of .navbar-brand is as follows:
.navbar-brand {
display: inline-block;
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x;
font-size: $navbar-brand-font-size;
line-height: inherit;
white-space: nowrap;
/* #include hover-focus */
}
The value of $navbar-brand-font-size is defined in the _variables.scss file as:
$navbar-brand-font-size: $font-size-lg !default;
Where $font-size-lg above is defined in the same file as:
$font-size-lg: ($font-size-base * 1.25) !default;
Finally, the default value of $font-size-base is set to 1rem with that:
$font-size-base: 1rem !default;
All of that compiles to font-size: 1.25rem; by default, and this is the value that can be observed in the bootstrap.css file available from the official Bootstrap cdn.
So, I guess that this value gets overwritten somewhere in your code.
Related
First time here, so sorry for any lack of understanding in the code of conduct of this place.
I've already read the post with a similar described problem, but it didn't help :-/
Sorry, I'm a n00b, be gentle!
Just started structuring my sass into different files, and at the same time started using sass instead of scss.
My problem, which is probably really simple and stupid, is:
Compilation Error
Error: Invalid CSS after "...align: top; } }": expected 1 selector or at-rule, was "{"
on line 43 of Users/Test/Documents/walters.dk 6.0/styles/1-base/_typography.sass
from line 2 of Users/Test/Documents/walters.dk 6.0/styles/1-base/_base-dir.sass
from line 2 of sass/Users/Test/Documents/walters.dk 6.0/styles/app.sass
>> vertical-align: top; } } {
The file the error is originating from looks like this:
(Line 43 is the bottom one, "vertical-align: top")
// Text
h1
font-family: 'Raleway', sans-serif
font-weight: 300
display: inline-block
color: $redish
margin: 0 auto
text-align: center
font-size: 25px
line-height: 1
h2
font-family: 'waltershand', Arial, sans-serif
text-align: center
font-size: 10rem
margin-top: 3%
h3
font-family: 'waltershand', Arial, sans-serif
text-align: center
h4
font-family: 'Raleway', sans-serif
font-size: 0.85rem
font-weight: 600
display: inline-block
h5
font-size: 3rem
font-family: 'waltershand', Arial, sans-serif
margin: 4vh 5vw auto 5vw
z-index: 2
+mq(875px)
font-size: 4.4vw
display: inline-block
vertical-align: top
First time using mixins, so in case it helps, i have added the code below :
=mq($size)
#media only screen and (min-width: $size)
#content
The files compile into app.sass like this:
#import 'variables'
#import '1-base/base-dir'
I'm guessing the problem isn't in the actual line 43, but rather in the way my mixin is written, or the way its importet.
Here's hoping some brainy code master can help!
By removing this
+mq(875px)
font-size: 4.4vw
display: inline-block
vertical-align: top
Your code is good to go. I'm not sure about the mq what does it do ?
You can cleary see the error and try it out here
Error: no mixin named mq
Backtrace:
stdin:38
on line 38 of stdin
#include mq(875px) { -------------^
As the title says, I have a weird css error on my hands. I've built a rails app using bootstrap and some custom css, testing the whole thing in chrome initially. I started checking it out in firefox and my user sign in form-fields don't seem to respond to clicking on them or typing. You can't see the placeholder value nor what you're typing. Has anyone heard of this before? Any ideas what causes it?
To illustrate I made a jsfiddle (my first). I was kind of heavy handed and just copied the css right out of my inspector so it's a little bit of a mess. Open it in firefox and the form cannot be typed into. In chrome it's fine. The offending line on this fiddle appears to be 28, the -mox-box-sizing rule.
http://jsfiddle.net/vRF3F/
.row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: left;
margin-left: 2.12766%;
min-height: 30px;
width: 100%;
}
Ok, I think I have found the cause:
If you remove this line:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border-radius: 4px 4px 4px 4px;
color: #555555;
display: inline-block;
font-size: 14px;
/* height: 20px;*/
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
}
it will work. Setting the height property will cause the parent div to collapse so you won't see the input box anymore, hence it appear to not work. The padding alone should be fine to give it a height.
See updated fiddle here:
http://jsfiddle.net/AbdiasSoftware/vRF3F/3/
Bootstrap CSS does include the box-sizing property with all vendor prefixes in that selector, I don't know why you are only getting the -moz
.row-fluid [class*="span"] {
...
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
...
}
Try updating your CSS with that and you will note that your inputs are now smaller in height so just set a specific value for height and I think you'll be good to go
.new-user input[type="text"],.new-user input[type="password"]{
height: 60px;
}
I've styled an ordinary link to resemble a button in our Sencha Touch 2-based mobile application, and I'm having issues with most of the link not functioning in Safari on the iPhone.
The link is an ordinary <a> tag with an inner <span> element containing the label text. There is padding on the <a> element, which allows taps to be registered. It appears that the inner <span> is blocking taps from being registered in the parent anchor as a link tap, and its background is transparent.
Here's the markup:
<a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile">
<span class="x-button-label">View profile on full site</span>
</a>
Testing this in Chrome doesn't present any problems, i.e. clicking the span causes the parent hyperlink to be followed. Both are Webkit-based browsers. One of our testers also tested this in Safari on a Macbook with no problems; I have also tested this in Chrome using a Wacom Bamboo tablet with no problems. This is only an issue on mobile devices (tested on both iPhone and Android 2.2) - which is what we're targeting.
Is there a CSS property I can set on the <span> element to allow taps to fall through to the parent hyperlink? Ideally I want to avoid having to set events through JavaScript. Any ideas as to why this isn't working as I'd expect?
Update: Here are the styles for the inner span as reported by Chrome's developer console:
-webkit-box-align: center;
-webkit-box-flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: white;
cursor: auto;
display: inline;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif;
font-size: 18px;
font-weight: bold;
height: auto;
line-height: 21px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
Many thanks.
Solved it, thanks to this post which mentions the following CSS property:
pointer-events: none;
Adding this to the style for the inner <span> (and inner floated <img> as alluded to in my second comment) allowed these to pass the tap through to the parent hyperlink.
The strange thing is that Sencha Touch 2 seemed to interfere with the DOM, not sure what it was in particular. Mocking up a similarly-styled button on a completely static HTML page (no JavaScript, let alone Sencha Touch 2) did not exhibit the original problem on a mobile device.
Another option in the simple case (single <span>, no floated images) was to refactor the styles to eliminate the need for an inner <span>, though this wasn't feasible for the more complicated case:
<a class="attachment" href="/someRepository/someDownload.pdf">
<img src="/images/fileExtension-pdf.png" alt="Attachment"/>
<span class="title">Title of download</span>
<span class="size">xxx kB</span>
</a>
I think this has to do with Sencha Touch's prevention of zooming. They have added in code to preventDefault most touchstart events (which kill the use of the link). There is an exception for anchors, but not for children of anchors (so tapping on an anchor itself works fine, but not tapping on a span within an anchor). I was able to monkey patch a quickfix in my application launch method:
Ext.Viewport.setPreventZooming(false); // unbind any existing handler
Ext.Viewport.doPreventZooming = Ext.Function.createInterceptor(Ext.Viewport.doPreventZooming, function(e){
return !Ext.fly(e.target).findParent('a');
});
Ext.Viewport.setPreventZooming(true);
The above code comes with no warranties (have not tested on Android and I suspect it to be fairly inefficient). I have also reported this as a bug: http://www.sencha.com/forum/showthread.php?215032-Links-are-prevented-when-tapping-on-children
I'm trying to make this website: http://501commons.org render the same on iPhone as on other browsers. On Android it works just fine. I have already added the -webkit-text-size-adjust: 100%; to the body style, which helped a little. What is still not working are the following pieces, and I can't figure out why mobile safari is not displaying them properly:
the top left logo just plain won't show up
the search box in the top right is way too far to the left
the red slogan in the header "A Resource for Nonprofits etc" is too large, too low, and extends beyond the right border
the font of the three nav menu items (Explore the Commons, Volunteer, Invest) is too large
Everything else seems ok, at least on the home page. What's weird is that all four problems above occur in the header.
Any help would be hugely appreciated!
Thanks!
I figured it out:
Top left logo
The logo not showing up was due to a strange non-cascading issue. The logo is an <img> tab inside an <a id="portal-logo" ...>. The #portal-logo has a display: inline-block; rule in the next-to-last stylesheet that applies to it, but not in the last one. In other words, this is what we have:
#portal-logo { /* in the last CSS file */
margin-bottom: 0;
}
#portal-logo { /* in the next-to-last CSS file */
display: inline-block;
margin: 1.375em 0;
}
Adding display: inline-block; to the last stylesheet magically makes the logo appear. Then I had to also fiddle with margins, position, top, etc to make it appear in the right place, but all these are in a CSS file that is loaded conditionally only on mobile browsers, so it's ok. It's just really strange that Safari on iOS does not cascade the display: inline-block; style!
Search box
I made the search box be rendered in the proper place by adding text-align:right; to its container, even though an earlier rule for the same container with text-align:left; makes it work just fine in every other browser.
Slogan
The slogan required the most tweaking. It's contained in a <div id="slogan">. Here is the old rule:
#slogan {
color: #EE3524;
float: right;
font-size: 110%;
font-weight: bold;
margin-right: -190px;
padding-top: 60px;
position: relative;
z-index: 1;
}
And here is the new rule that works on mobile safari:
#slogan {
-webkit-text-size-adjust: 100%;
clear:right;
color:#ee3524;
font-size:17.6px;
font-weight: bold;
float:right;
margin-right:0px;
padding-bottom:50px;
padding-top:0px;
position:relative;
text-align:right;
z-index:1;
}
One of the key differences is the absolute font-size in px, instead of as a % value.
Menu Items font
Likewise, specifying the font-size in px instead of % seemed to be the key here:
Old:
#portal-globalnav li a {
background-color: transparent;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;
min-width: 3em;
padding-bottom: 11px;
}
New:
#portal-globalnav li a {
background-color:transparent;
color:#fff;
font-size:15.4px;
font-weight:bold;
padding-bottom:11px;
min-width:3em;
}
YMMV!
I'm having trouble to get the -webkit-tap-highlight-color property to apply to a div - I'm at a loss as to why it isn't. Copying all the styles that apply to it below. The desired outcome is a back button as shown here: http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932102
.backButton {
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
position: absolute;
top: 13px;
left: 6px;
font-size: 14px;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-width: 0 8px 0 14px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-border-image: url(/static/images/backButton.png) 0 8 0 14;
}
.backButton.clicked {
-webkit-border-image: url(/static/images/back_button_clicked.png) 0 8 0 14;
}
.toolbar{
background-color: #e1f7ff;
-webkit-box-sizing:border-box;
border-bottom:1px solid #559D75;
padding:10px;
height:53px;
background-image:-webkit-gradient(linear,left top,left bottom,from(#e1f7ff),to(#a1d2ed));
position:relative;
z-index: 70; }
Applied here:
<div class='toolbar'>
<div class='backButton'>Back</div>
</div>
Viewing it in iPhone simulator (OS 4 enabled) and Safari - same problem with both (tap highlight still shows up).
Thanks in advance.
Try adding:
-webkit-user-select: none;
This is embarrassing. The image I had been using from an example back button online had the background color in it - it wasn't a problem with the CSS property.
I'm almost embarrassed enough not to post this answer, but I'm willing to swallow my pride in hopes of helping others. Let this be a lesson: if you use example images from Google images, etc., be sure the copy you download looks as you expect it to.
I wish I could reclaim the hours I spent trying to debug this, but maybe this will help someone else gain them back.
Lesson learned... thoroughly.