I'm trying to get started with Jquery UI tabs and I'm running into an issue with the demo they have on their site. It runs fine for me on the site itself, but when I download the source and all the other files to run it on my machine, it initially renders correctly like this:
but when i click on any of the other tabs, they render like this:
Clicking the leftmost tab always makes things look correct, but clicking the other tabs cause the lines I have circled not to be rendered. It works fine for me in Firefox and Chrome.
Has anyone else seen something like this before?
I'd be really grateful for some advice.
Thanks,
-Mark
I found the issue. Its in the JQueryUI CSS. Its defining the .ui-tabs .ui-tabs-nav li elements like this:
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
when it should be
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em -1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
i.e. 1px should be -1px for the margin
Related
I have a function that creates a grid of divs that are generated and sent to a container div when the document loads (or when the user resets it). Everything seems to be about the way that I like it, except that there is a gap between each "row" of divs. I'd like it to be a perfect grid, with each square flush with each other. I've tried modifying borders, outlines, padding and the like with no success. I'm convinced there has to be a way to make this work that is less complicated than I am making it out to be. jsfiddle example: https://jsfiddle.net/psyonix/1g9p59bx/84/
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var n = 0;
var squareSize = (area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
border-radius: 5px;
margin: 0 auto;
overflow: hidden;
}
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #000000;
outline-width: 1px;
outline-style: solid;
}
You just need to either remove a outline-width from .square or give it some 2px or 3px value.
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #000000;
outline-width: 3px; //or 2px or just remove it as I have done in my DEMO
outline-style: solid;
}
DEMO HERE
You are using inline-block on the square elements, so the square elements will act like the words inside a paragraph, and will be laid out as in lines of a sentence. These lines will have line-height just as in normal sentences, so one way is to reset the line-height of the parent holding these square words.
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
border-radius: 5px;
margin: 0 auto;
overflow: hidden;
line-height: 0px;
}
This way you can JAM the lines as you are not exactly looking for lines as in normal sentences.
Another way is to avoid using the inline-block and using block and float to attain the same. Block display doesn't have the issue of line-height or white-spaces between elements.
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #bc0000;
outline-width: 1px;
outline-style: solid;
display:block;
float:left;
}
I have a form where i have fieldsets, in 1 fieldset i have a table. This table will be in the fieldset in chrome and IE but not in Firefox. Please have a look:
https://jsfiddle.net/79504g5b/1/
my fieldset has this CSS:
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*----------------------->2*/ position: absolute;
}
I don't know what is the problem.
The element .statusHead1 does not occupy the available width. So, table is added next to it, in the available space.
To move table on it's own line, use clear: both on the table.
table {
clear: both;
}
See Demo.
Optionally, you can also set the float: left to the table.
Demo
I'll recommend you to use clear: both. Using this, you don't have to change your other elements structure/view.
Remove float:left form .statusHead1 class
Check this link https://jsfiddle.net/g0t1rwyw/
.statusHead1{
/*float:left;*/
width: 600px;
font-weight:bold;
border-bottom:1px solid #bfcfdf;
}
I created a modal dialog using CSS3, it works perfectly. But my site is responsive and the modal has to appear on several items inside an iframe (see here: http://labs.tageswoche.ch/interaktives/filmPortraits/ and here: http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm). In the iframe it doesnt work, but it works as expected on the real site.
The modal dialog is implemented on the first two pictures.
And here the code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
Here is a jsfiddle I used to implement the modal dialog:
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
What i want to achieve is that the modal appears where the mouse click was (or more or less) so that also on mobile devices on the last images of the wall. Right now the modal appears on top. How can I implement this? I have no clue.
One thing I'd like to say about your design is, do not make separate modal window htmls for each person's modal, use one modal and change its innerhtml as you click on different people so you write less code, easier to maintain (if you add changes to your modal, you do one change in one location etc)
Also, the nature of modal windows is, it has a semi transparency background, with the modal window floating (not in css context) in the middle of it.
If you see this css bit below you'll understand better:
.modalDialog > div {
width: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
The bit that says "margin: 5% auto;" causes this behaviour, what you need to do is change this to the same notation the padding is set and for each position of the image, give it certain values, ie margin: 10px 10px for a modal window that just shows at the top left corner of the window etc if you're not too fussy about exact mouse location.
If you are, than use "onclick" event of your outermost background div with width/height equal to the overall size of every person's image included, than use the event object to get mouse location values (read this link http://www.w3schools.com/jsref/event_clientx.asp)
I didn't write it for you so that you can do it yourself and learn, hope this helps!
I have default bootstrap tooltip with custom styles for arrows that have only font color and size, nothing special with paddings or margin.
If I have short text - it's ok:
If it's a littile longer - arrow goes down through the tooltip:
another common problem - if tooltip position is near the end of the page/window:
There are the same styles for each tooltip.
I've tried to fix it by different ways based on answers from stackoverflow, but it wasn't helpful.
Please, help me to understand this strange behaviour. What style should I use for arrows to make it fixed at the border of tooltip?
PS: another detail - if I will swap "hide people" and "show feedback" tooltips - it becomes ok. So, probably it depends on tooltip position too.
This what I expected!
Can you try it? and post your after/before pseudo code
reference
http://cssdeck.com/labs/pure-css-tooltip-with-arrow
.tooltip:hover:before {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: block;
left: 1em;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
z-index: 98;
}
.tooltip:hover:after {
border: solid;
border-color: #111 transparent;
border-color: rgba(0,0,0,.8) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1em;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 99;
}
Thanks to #Youness,
max-width exactly for main .tooltip class is helpful.
Applied Background image for a Drop-down it works fine in FF and other modern browser but not in IE(all version)
here is my code:
div.timeslots select {
background: url("./images/imag1e.png") no-repeat scroll 0 -48px transparent;
border: 0 none;
color: #999999;
font-size: 12px;
height: 30px;
padding: 6px;
width: 242px;
}
can anyone help me to fix this issues
There is no fix. It is not supported.