I'm currently trying to style a dropdown menu, but I'm running into some issues. The biggest one is that the dropdown elements don't seem to be exceed the size of their parent object when the css for the dropdown is set to relative.
(Had to block out the search results, sorry).
It seems to work on fixed, but only in Firefox, Chrome's dropdowns are all off.
So I think I need one of two solutions:
Fixing the width issue and keeping the position: relative
Fixing the offset issue that occurs ONLY in chrome, and setting the position: fixed attribute.
HTML:
<div id="node">
<div id="nodebar">
<input type="text" id="nodetext" placeholder="Enter a node" name="nodetext" value="">
<div id="img-container">
<img src="styles/magnifyingglass.png" id="img" alt="" />
</div>
</div>
<div id="nodebr"></div>
<div id="noderesults">
<div id="nodetruncated"><span class="truncated">Truncated search results..</span></div>
</div>
</div>
CSS
#searchresults, #noderesults, #roadmapresults, #intersectnoderesults {
max-width: 1000px;
background: #2E3C3F;
width:auto;
height: 0px;
padding: 0;
border: none;
position: relative;
z-index: 3; /*So that the dropdown stays infront of the forms*/
}
Would anyone know how I could go about fixing this?
I ended up just fixing this by breaking down the CSS into one category for each one of the fields, set the position property to fixed, and scaled the css "top" property so that the results would fit for each of the search fields.
Related
I'm new to writing HTML and CSS, but I am on the final step of creating my website. Namely, the image slider which resides in the background.
The Issue: The pictures are not centered respective to the viewport.
The first image, for example, should have some padding on the left and
should be vertically aligned so as not to move when the height of the
image increases to match the viewport height. It should remain
centered behind the body of the page.
New Issue: When the first image's width expands over the viewport's, the images begin to move off-center because they are being locked at the left-hand side of the parent class/viewport. Is there a property that will allow the child class elements to expand past the parent's boundaries?
Could some of you wise web devs help me out here?
CodePen full version of the website: CodePen Link
Please go to "Full View", minimize your browser, and shorten its width to see what I mean.
Here is my HTML code for the slider:
<!-- Inside <html></html> and below <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
and my CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
Huge thank you in advance.
Use position and dynamic adjust left with click
As you can see above, I cannot select the overflowed events on the calendar date. It looks like it's because I have the overflow:hidden/visible toggle triggering on the class of the calendar date: '#cell-shell'.
Here is the HTML code for that specific date:
<td>
<div id="09" class="cell-shell>
<div class="date-num">9</div>
<div class="event-wrap>
<span></span> <!--these hold edit buttons when editor is logged in-->
<span></span>
<div id="e1" class="cell-data">Event 1</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e2" class="cell-data">Event 2</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e3" class="cell-data">Event 3</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e4" class="cell-data">Event 4</div>
</div>
... <!-- pattern repeats-->
</div>
</td>
Here is my current relevant CSS:
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
}
.cell-shell:hover {
overflow:visible;
}
.event-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.event-wrap:hover {
opacity: .5;
}
Is there any way through CSS or JS that I can prioritize the '#cell-data' elements? I need to be able to click on those events 6 & 7 and beyond, but once my mouse wanders out of the '9' '.cell-shell' box into the '16' '.cell-shell' box, '16' seems to take over.
EDIT: I added more information as requested by david. I thought it was irrelevant but perhaps not. I added the elements as well as the children below them. I also added in the event-wrap CSS
It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.
See the frame below where you're over an event on top of 16 just before you cross the gap:
The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.
I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P
One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.
In order to keep your current visual without having to add too much code, you can do something like the following:
...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...
...where the event-wrapper class looks like:
.event-wrapper {
margin: 0px;
padding: 0px;
}
Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.
Anyway, I hope that helps.
Use z-index to give priority to your cell-data elements over '16'.
Find a sample demo of it's usage below:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Add CSS property z-index: -1 into your css.
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
z-index: -1 // Here
}
.cell-shell:hover {
overflow:visible;
z-index: -1 //Here
}
Hope it will work for you.
This is my code jsfiddle. I have three text fields. headline1Txt, headline2Txt and headline3Txt. Right now it is working fine but if i change my headline1Txt to Vintage Lace Turquoise Dress. headline2Txt to SAle Price $135 and headline3Txt to Reg:$50 then my text allignment is overlapping each other and i want my text to appear like this
.
Can anyone tell me what i am doing wrong here?
<div id="mainContainer">
<div id="logo">
<img id="Img1" src="http://i.share.pho.to/cc9794da_o.png" width="50px" height="50px"/>
</div>
<div id="images">
<img id="introImg" src="http://i.share.pho.to/ebe3afc7_o.png"/>
</div>
<div id="headlineText">
<p id="headline1Txt" >Striped Bag</p><br />
<p id="headline2Txt" >$14</p><br />
<p id="headline3Txt" >Sale $25</p><br />
</div>
<div id="ctaBtn">
<button class="btn btn-primary" type="button">SHOP NOW</button>
</div>
</div>
Thanks
The css can certainly be cleaned up. I would try to avoid using absolute positioning as much as possible because it is not as easy to maintain or make changes. In your example increasing the text length of the headlines does not shift the other headlines down, because they are absolutely positioned to stay where they are.
I tried to leave as much of your code as intact as possible and I only made changes to the css:
http://jsfiddle.net/fAsNt/
The main thing I changed was the positioning of the headlines and added a width so they wouldn't overlap with the image:
#headline1Txt, #headline2Txt, #headline3Txt
{
position: relative;
margin: 0px 2px;
left: -150px;
width: 170px;
line-height: 1;
}
In each of your 3 headline text boxes, you specify "position: absolute;" but do not specify the "top:" property. Specify "top" where they should be and you'll be fixed right up.
Here's the js fiddle- note I added "top" at the end of your CSS:
http://jsfiddle.net/rttmY/7/
#headline1Txt { top: 0; }
#headline2Txt { top: 25px; }
#headline3Txt { top: 50px; }
Also, get rid of those <br />. Since you are positioning absolute, I would also recommend using <div> tags rather than <p> tags because you're technically not making paragraphs, you are positioning blocks. The result would actually be the same, but it's a best practice to use for absolutely positioned blocks.
I am using jquery draggable to drag and drop the contents on the table cells that are part of editor. We are allowing users to directly drag and drop content to respective tds and use the template for creating prints and emails.
Whenever user drags over the table-cells of editor, a div with option to replace split and add are shown.
I am appending this div inside hovered td.
<tr>
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1><a target="blank" href="http://local.smgt.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a>
<br><br><a target="blank" href="http://local.smgt.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv" style="position: absolute;">
This will show options replace/split/add new
</div>
</td>
</tr>
The problem is position absolute for this div doesnt work in firefox.
And i can not wrap up the contents of td inside other div having position relative as suggested Here and Here. The reason being for this is i am not sure how complex the dom of td can be as we are allowing user to fully customize the contents inside it.
Link To Fiddle
works perfectly in Chrome though. Any other solution guys??
Instead of using <table> <tr> <td> </td></tr> </table>, try to design div as a table.
For your reference http://snook.ca/archives/html_and_css/getting_your_di . After this try your code, it may help you out.
Design div as table is best approach. This may be used for responsive design too.
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1 style="position:absolute;"><a target="blank" href="http://local.amp.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a><br> <br> <a target="blank" href="http://local.amp.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv"> </div>
</td>
you've given absolute position to <div class="contentdiv"> </div>
Remove absoute position for this and add absolute position for <h1> which is placed above to <div class="contentdiv"> </div>.
I've checked. It's working perfectly.
http://jsfiddle.net/qfquj/69/
The following are I modified.
removed absolute position for
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
top:0;
opacity:.6
}
and added inline css for h1
<h1 style="position:absolute;">
Here is answer for your question. I hope this may help you.
http://jsfiddle.net/qfquj/73/
What I modified is,
Removed top:0 and added float:left
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
position:absolute;
opacity:0.6;
float:left;
}
Added inline css float left for <h1>
<h1 style="float:left">
Firefox has a problem with absolute positioning whenever tables or display: table-cell is involved, where it will ignore the table cells as a relative parent.
It's a 13 year old Gecko bug.
You can fix this by reverting from the table structure and using display: inline-block on your cells for example, or putting another relative div around your table cell.
Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute...right? Well that makes it so that our scrolling doesn't work. Right now it is anchored to the top, positioned relative, and scrolling does work.
Try clicking the "I said..." button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.
This is the temporary URL:
http://gotinto.com/text/
AND a PERMANENT JS Fiddle URL:
http://jsfiddle.net/Qyn7V/
Here is the simple HTML:
<div class="convoPhone">
<div class="phoneDisplay">
<div class="convoCont">
<div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>
Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!
Have you tried position: fixed? Observing your link, as a proof of concept, something like this should do:
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
Edit:
Put three place holder conversations as place holders with visibility: hidden (this ensures they occupy space).
<div class="convoCont">
<div class="actualConvo" style="">
<div class="invisibleFirst">
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
</div>
</div>
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
<div class="isaid textLine">I said...</div>
<div class="tsaid textLine">They said...</div>
</div>
<br class="clear">
</div>
Then for each of the first 3 real entries, remove one of the place holders. If you want more precision, you can replicate the same place holder effect with padding-top on actualConvo. Just reduce the padding-top by a fixed value until it bottoms out at 0. If you want to make the buttons scrollable, just removed the styling and apply the padding-top at a higher DOM level.
I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!
var contH = $('.phoneDisplay').css('height');
if($('.convoCont').css('height') < contH) {
$('.convoCont').css('height',contH);
}