The uk-text-center has changed in UiKit 2.18.0, it centers a child h1 but not a child ul.
In order to center the ul I have to use the uk-flex-center, but this does not work in IE9.
<div class="uk-container uk-container-center uk-text-center">
<h1>Centered heading</h1>
<ul class="uk-subnav uk-flex-center">
...
.
The unordered list doesn't center in IE9, any ideas?
Related
I am trying to apply styling, only if there are consecutive button elements. The buttons are wrapped in a class-less div which I can't change.
html:
<div>
<section class="button" />
</div>
<div>
<section class="button" />
</div>
Initially I tried the sibling operator:
div .button + div .button
but this doesn't work as all button components don't have the same parent.
Of course I can style all buttons with
.button
but need a way of checking only for multiple siblings (which in this case is the parent div)
I'm using a Webview in Xamarin to draw an RGraph.Bar.
The user can press a "+" button to manipulate the Graph then Graph is refreshed. The thing is for some reason the Webview is cutting off the labelsAbove the bars.
I was wondering if there's a chance to put labelsAbove in the center of the bar or at the beggining of it so it's not that obvious or... a solution to the WebView cutting the graph (Height)
A few things to try:
Try increasing the marginTop property. Try setting it to 50 and see how that looks.
Try wrapping your canvas in a div and adding some margin-top to it:
<div style="margin-top: 50px; display: inline-block">
<canvas id="cvs" width="700" height="300"></canvas>
</div>
I am working on an application in Ruby. It has 8 pages and on each one of the pages the general layout is bootstrap's .container . row .col-sm-6 .col-sm-6 layout. I have a btn-group in the 2nd col-sm-6 layout that looks great on lg, xl and s devices.
When the screen falls between 992px-768px the button group breaks in an unpleasant fashion
It adjust well when the columns shift one on top of the other on small screens 544px-768px and Breaks bad again on xs devices < 544px
.
I have found a nice solution where I make the btn-group vertical on xs screens by duplicating the code adding the btn-group-vertical to duplicated code and hiding this code until it detects an xs screen (then it hides the horizontal btn-group). However, this is a lot of duplicate code that I have to replicated on 8 pages and still doesn't solve for medium screens.
I thought about keeping my code cleaner by adding scss like this:
.myClass {
#media (max-width: 760px) {
&:extend(.btn-group-vertical all);
}
#media (min-width: 761px) {
&:extend(.btn-group all);
}
}
That I found on stack overflow question 31893581. It doesn't work even with the manipulations that I thought would work. I could follow the solution stated in that same post but I am uncertain how sanitary that would be etc.
If somebody has any advice for me on how to solve for a class that pulls in bootstrap classes at specific browser widths or a completely different solution to my problem, I am all ears.
Thanks in advance.
I can think of a number of ways to do this, here are two methods that are easy to picture:
https://codepen.io/panchroma/pen/XgojBL
Add a clearfix div at the point where you want the buttons to break, then use media queries to hide or show this div.
Another method instead of using a clearfix would be to target .btn-group in your CSS, and using media queries set a max-width at viewports 768 - 992 px.
Good luck!
HTML
<div class="container">
<div class="row">
<div class="col-sm-6">first col</div>
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-primary">btn-1</button>
<button type="button" class="btn btn-primary">btn-2</button>
<div class="cf"></div>
<button type="button" class="btn btn-primary">btn-3</button>
<button type="button" class="btn btn-primary">btn-4</button>
</div>
</div>
</div>
</div>
CSS
.btn-group .cf{
display:none;
}
#media (min-width: 768px) and (max-width: 992px) {
.btn-group .cf{
display:block;
}
}
my IE8 doesn't show images inner the figure tag.
TYPO3 Installation 6.1.x
DOCTYPE HTML5
css styled content (latest)
Frontend: Text & Image will shown as
<div class="csc-textpic-imagewrap">
<div class="csc-textpic-center-outer">
<div class="csc-textpic-center-inner">
<figure class="csc-textpic-image csc-textpic-last">
<img height="308" width="828" alt="" src="fileadmin/media/image.JPG">
</figure>
</div>
</div>
</div>
I 've included HTML5shiv Script - nothing happens .. then I tries to unwrap the figure element with jQuery - nothing happens
Has anyone an idea how I can show my image wrapped with
it was a responsive big
img {
max-width: auto;
width: 100%;
/* and for IE 8 */
width: auto\9;
}
That's it Damn.!
I had the same problem:
tt_content.image.20.rendering.singleNoCaption.singleStdWrap.wrap.override >
tt_content.image.20.rendering.noCaption.singleStdWrap.wrap.override >
Or instead of deleting it, replace it with whatever html you like.
just set this in config typoscript
doctype = html5
Please help! I have tried using Firebug to see why my href's are not click-able but I can't figure it out. I don't use tables. The site is http://spiritfestcorpus.com/
The big circular image is wrapped in a href
I'd really appreciate any suggestions.
Here is the code from line 357 if you VIEW SOURCE in Firefox
<div id="slideshow_wrapper" )">
<div id="frame"></div>
<div id="slideshow_container">
<div id="slideshow">
<a style="z-index:9999999; position: absolute;" id="cdImage1" href="concertsbuy.aspx?eventId=53"><img id="Repeater1_ctl00_cdImage" src="images/slideshow/home/albums/2012/SPIRIT_Fest_Corpus/LMG_DC12Circle.png" style="border-width:0px;" /></a>
with position: absolute you must specify width and height. And if you are going to specify width and height on an a tag, you need to use display: block