i am not able to find the reason why this popup won't work.
He recognizes the hover above the table, but it has no effect on the popup.
The weird thing is, when i include the path to the table to the .popup class he won't do anything, not even modify the span itself. I assume it has something to do with the selectors, but the path works without span.popup. I don't get the problem because space means descendant, but it kills somehow the whole selection.
<div id="center">
<tr id="name">
<td class="description">Name</td>
<td>Hulu</td>
<span class="popup">
This should be the text in the popup.
</span>
</tr>
</div>
----------css
div#center tr.name:hover {
background-color: white;
}
div#center tr#name span.popup {
display: none;
}
div#center tr#name:hover span.popup {
display: block;
background: white;
border-style: solid;
border-width: 1px;
border-radius: 15px;
position: absolute;
top: 45%;
left: 550px;
padding: 20px;
width: 450px;
}
I would be glad for some answers.
tonlap
You cannot have tr tags without a table tag. Moreover, you cannot have extraneous tags outside of the td tags within a tr for them to be valid. These are not being recognized. If you put table tags around the table row and the span inside a td, then it will work more or less as you intend. Instead of using the table row in such a way, any reason to not use two divs?
Related
I'm trying to get a second sibling element displaying in front of the first - with some severe restrictions:
I cannot alter the HTML or use javascript or jQuery.
I can only use CSS.
I can't change how classes are assigned (again, I don't have access to change any code apart from the one bespoke CSS file).
The left-hand menu features a number of the above HTML structures, building a clickable menu for the sections on the page. When a page section is completed, the 'completed-section' class is added to the first span (as shown above). This is what is causing me problems:
The CSS styling of the nav-link 'button' should change when it's completed, but since I can't access the parent of a CSS-selected element I need to make these changes directly to the 'menu-number' span element, including a 'nav-link' sized background colour. So I've made the menu-number the same size as the containing 'nav-link' . But when I add a background colour to the 'menu-number' , the text in the second is obscured.
How can I 'move' the second span in front of the first so I can see its text?
I have also tried making both spans position absolute or position relative and used z-index but this pulls the spans out of the flow of the document and means the width of the menu collapses. I can't set the width to a hard-coded value because the menu toggles open and closed, width-wise, (without a class being set) and the toggled width is set by javascript which, again, I can't access.
I have also tried using display: flex on the 'a' element and reversing the 'order' of span elements. No luck.
In semi-desperation I have tried setting the direction property on 'nav-link' to rtl. No luck.
I think I've tried a couple other things too, but at this point I'll wrap this question up.
Any pointers, much appreciated...
.menu-number {
border: none;
border-left: 10px solid transparent;
border-radius: 0px;
padding-top: 13px;
padding-left: 20px;
height: 45px;
position: absolute;
width: 100%;
text-align: left;
z-index: 100;
float: left;
}
.menu-number + span {
/*position: absolute;*/
padding-left: 40px;
z-index: 200;
}
.completed-section {
color: #42bb76 !important;
border-left: 10px solid #42bb76;
background-color: #274d56;
text-decoration: underline;
}
.nav-link > div > a {
display: flex;
*/flex-direction: row-reverse;*/
}
.nav-link > div > a > span:nth-of-type(1) {
order: 2;
}
.nav-link > div > a > span:nth-of-type(2) {
order: 1;
}
.nav-link > div > a > .section-name {
color: white;
padding: 13px 20px 0px 60px;
height: 45px;
float: left;
}
<div class="nav-link">
<div>
<a href="scroll/to/section">
<span class="menu-number completed-section">1.</span>
<span class="section-name">Section name</span>
</a>
</div>
</div>
I've also tried 'flex-direction' but I've now commented that out.
You can achieve this using CSS order property:
Here is the fiddle:
.menu-number {
order: 2;
}
.section-name {
order: 1;
}
.nav-link a{
display: flex;
}
<div class="nav-link">
<div>
<a href="scroll/to/section">
<span class="menu-number completed-section">1.</span>
<span class="section-name">Section name</span>
</a>
</div>
</div>
I am trying to style a tooltip in a jqgrid in a page delivered through AngularJS. Essentially in other places in the app I am using the Bootstrap tooltip styling. I'm struggling to get this to work in the AngularJS part (possibly to do with the initialisation not running in the right place). I thought I might change tack and try to emulate the styling instead.
I have started and got a very rough and ready bit of styling almost 'working' as a PoC (it needs a lot of work buit I want to see if it is possible before doing that work! It is here in the Fiddle
I have 2 questions I wondered if anyone could help me with before I try to tidy it up
1) Is there a way to stop the normal tooltip appearing as well (I thought I was styling the tooltip but I seem to be adding a second one!)
2) Is there a way to make it 'float'. In the fiddle it is not obvious but in the jqgrid where the th element is more structured (bounded) the css tooltip I have created is contained in the th element and mainly hidden (as it is too large for the element).
I'm thinking this is a CSS question more than a jqgrid question so just in case I'll point out I can't really use the span technique posted in a few answers.
Thanks.
The code in the fiddle is
<table>
<th title="This is a tooltip">John</th>
<th title="so is this">Albert</th>
<th title="And This">Spencer</th>
</table>
th[title]:hover:after {
content: attr(title);
background-color: #000;
color: #fff;
width: 120px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
z-index: 1;
left: 50%;
top: 100%;
position: absolute;
margin-left: -60px;
margin-left: -5px;
border-width: 5px;
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
Yes. All you need to do is change from title attribute to data-title so it would be: content: attr(data-title); Then also update the th title attribute accordingly.
I have the following badge that I can add to any element:
.notification-badge {
position: relative;
}
.notification-badge:after {
content:attr(data-badge);
position:absolute;
top:-10px;
right:-10px;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
background-color: $brand-danger;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: 10px;
border: 2px solid #fff;
}
It's fairly straightforward, the element that I attach the badge class onto provides a data-badge attribute with some number, which gets shoved into the :after element's content.
I would like the badge to not appear at all if content is empty. I've tried using the :empty selector, but it doesn't work because the actual tag may still contain other elements, for instance:
<a href="/cart" class="notification-badge" data-badge="">
<i class="fa fa-shopping-cart"></i>
</a>
In this case, I'd want the shopping cart icon and link to still exist, but have the notification-badge class not render the badge.
So, I suppose I could give up on the idea of it being a pure pseudo element and just make it a span with the number inside of it instead of a data- attribute, but it seems like there is probably an easy way to do this that I'm just not aware of.
This works for me:
.notification-badge:after {
visibility: hidden;
}
.notification-badge[data-badge]:after {
visibility: visible;
}
The :empty selector selector matches every element that has no children (including text nodes) W3Schools
So what you could do is here do something like this:
.notification-bade .fa-shopping-cart {visibility:visible}
.notification-badge:after {
content:attr(data-badge); visibility: hidden
}
I was wondering if this is possible:
if I have an input field:
<input type="button" value="some value" class="icon-button" />
and it is styled with gradient background, border, box-shadow, etc.
I want to have the button like an Icon with all its style and the value-text right next to it.
I thought of something like this, but it didn't work:
.icon-button{
display:block;
width: 25px;
height: 25px;
/* gradients, borders, shadows, etc. */
text-indent: 30px;
overflow: visible;
}
Any Idea? I know I could solve it with javascript, but I would like to know if there is a css way to do this.
I don't think you're going to achieve this (at least not very neatly) using an input. If you can amend your markup to use an actual button to submit though, it's pretty trivial:
<button type="submit">Some value</button>
CSS:
button {
line-height: 25px;
border: none;
background: transparent;
cursor: pointer;
}
button::before {
content: '';
display:inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
margin-right: 3px;
/* gradients, borders, shadows, etc. */
background: red;
}
You could use a span rather than generated content if IE7 support is needed. This approach is not possible with an input, as that can't contain any elements, nor can it have generated content.
If you need to use an input, you could achieve the same thing by wrapping it in a span and styling that.
Sorry gals & guys for a potentially dumb question but I have been looking for various ways to solve this issue and it still does not work like I want it to.
This is one of these issues where an input field stays very short (like ~150px) even though the box it is is much wider (like ~1300 px on a wide monitor).
I originally had the html & CSS shown in:
http://jsfiddle.net/jjoensuu/qSz5x/5/
In an attempt to solve this issue I found the solutions in:
How to make text input box to occupy all the remaining width within parent block?
I created what I think is similar to "wdm"'s answer in above thread, but I am missing something because the result is still a narrow input field. My creation is here:
http://jsfiddle.net/jjoensuu/rJ45P/8/
I also tried the solution from "Marty Wallace" in same thread but could not get it to work.
So as a reference to my code on the jsfiddle site, the "topsearch" box gets the width of ~1300 pixels but the "field-topsearch" input field stays at around 156px.
With some of my attempted solutions the "Go" button wraps to the next line below. Any help on how to solve this would be appreciated.
I took a slightly different approach. It appears to me you wanted the input text field to expand but the label and input button to remain the same size either side of the input field. This may well be useful for generating a form containing multiple rows without resorting to table layouts. Also the previous suggestion does not really work very well regarding keeping the elements on one line. This technique would allow the containing 'box' to be resized to whatever you liked at will.
I did have to tweak your html a little, but I feel the label should be next to the element it is related to anyway. I have also left out the form html for clarity since that is not part of the layout:
<div class="input">
<label for="field-topsearch">Search</label>
<div class="value">
<div>
<input id="field-topsearch" maxlength="256" type="text" name="search_str" value=""/>
</div>
<input type="submit" class="button-start-search submit " value="Go!"/>
</div>
</div>
And the css:
.value {
position: relative;
}
.value>div {
margin-left: 60px;
margin-right: 40px;
}
label {
position: absolute;
top: 0px;
left: 0px;
}
input.submit {
position: absolute;
top: 0px;
right: 0px;
}
input[type="text"] {
width: 100%;
}
The fiddle is available here
Here is the working fiddel: http://jsfiddle.net/surendraVsingh/rJ45P/18/
CSS
.topsearch
{
height: 40px;
line-height: 35px;
padding-right: 10px;
width:100%;
display:table;
}
.topsearch label
{
color: #c98116;
text-transform: uppercase;
font-weight: normal;
font-size: 0.9em;
margin: 0 5px;
}
.topsearch label, .topsearch form
{
display: inline;
}
.topsearchfield
{
border: none;
height: 24px;
font-size: 15px;
width: auto;
}
#field-topsearch{width:80%; display:inline-block;}
.button-start-search submit
{
display: table-cell;
}