I have a nav-bar and trying to place the users name and profile picture in the nav-bar with a dropdown menu. Its working fine except I cant get the padding/margins right to prevent it from making the top-bar larger when the image is there. This is the html for the part of the top-bar with the user avatar and name (its a dropdown menu)
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a class="avatar">
<%= image_tag(current_user.avatar.present? ? current_user.avatar : "default-user.jpg", width: "40", height: "40") %>
<span><%= current_user.displayname.present? ? current_user.displayname : current_user.firstname %></span>
</a>
<ul class="menu vertical">
......
</ul>
</li>
</ul>
</div>
Ive tried adding various classes and editing the css but I cant seem to get rid of the padding that creates the extra space...I can make the image smaller but the size gets to small to prevent the padding making the bar larger. Heres a screenshot of what i mean with the bar being too tall, you can see that there is a gap under the rest of the bar besides the image:
EDIT: Been playing around and still cant figure this out, Ive updated the screenshot with the inspect so you can see the specific html. Also ive tried to add a class "avatar" and added this to my scss file:
a.avatar{
padding-top: 500px;
padding-bottom: 0px;
}
but it doesnt change anything (tested with another element and it did change things)
EDIT 2: Figured it out...took awhile but I had to fully define the path in the css. So it turned out to be this:
.dropdown.menu li.is-dropdown-submenu-parent a.avatar{
padding-top: 0rem;
padding-bottom: 0rem;
}
And that worked out perfectly....thanks for all the comments still
Related
CodePen https://codepen.io/david263/pen/zYNaoRQ shows an example simple home page layout that fits the browser viewport perfectly and centers some div content (choose Change View > Full Page View in CodePen to see the page clearly). But note the CSS style elements used to set div heights and the many Bootstrap 5 classes used to achieve vertical centering. It took several days to get this working, but it fails to use only simple Bootstrap 5 classes.
<header id=jumbo class="px-5 d-flex justify-content-center align-items-center bg-dark" style="height:70vh">
<div class="row col-12 text-center text-light">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</header>
My attempt to use the usual container, row, and col classes (see https://codepen.io/david263/full/xxgzLPj) failed to achieve the full height demonstrated by the first example.
<header id=jumbo class="container-fluid bg-dark">
<div class="h-50 row align-items-center col-12 text-center text-light">
<div class="col py-auto">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</div>
</header>
And these difficulties were encountered before adding a background image, which doesn't seem possible in Bootstrap 5 at all.
Don't get me wrong; I'm not opposed to using CSS when necessary. It's just that it's hard to tell exactly what the limits are for Bootstrap 5 so that custom CSS becomes necessary.
Many websites have a home page containing a large photo or video in the background, with text centered horizontally and vertically in the foreground, so this example represents something that is very often used. Surely such a frequent layout must be possible in Bootstrap 5.
Bootstrap isn't a silver bullet - its a framework (think of it as a chassis that you need build on top of). Bootstrap offers a few "helper" classes so that one does not need to add a whole bunch of repetitive CSS .. but that's all it can do. A clear understanding of CSS helps a lot too in using Bootstrap.
For example, the h-50 class is only height: 50%; in CSS. That's 50% of it's parent .. but your <header id="jumbo" does not have a height .. so 50% of what .. 0 .. is unknown?? (This may vary from browser to browser)
It's not clear what you're trying to achieve - but if you head on over to https://getbootstrap.com/docs/5.0/examples/ you'll see a whole bunch of examples and starting points for you to get to where you need to be. I think the Cover example is a good spot to land on. (Once there, right click and "view page source" ...)
I would like to make a gif clickable to a new page. I'm not sure what code to include and have tried many options that did not work out. The following is part of the code:
<div class="col-md-7 col-sm-4 col-xs-12" style="background-image: url('xx.gif'); background-size: cover; background-position: 50% 50%;" id="xx" data-image-url="xx.gif">
Thank you in advance!
Welcome to SO. HTML link use the <a> tag with the intended URL in the href property. Wrap your GIF in an <a> tag to make it clickable.
I have this simple html that uses a tiny bit of bootstrap:
<div id="A" class="col-4">
<div class="img" style="background-image: url(/images/image.jpg);">
</div>
<div id="B" class="col-8">
*some content*
</div>
And its corresponding CSS:
.img { width: 100%; height: 100%; }
Everything is in this pen : https://codepen.io/anon/pen/EbBGQw
The image correctly displays on the entire height of the parent div on either Chrome or Firefox, either Windows or Android :
However, on iOS devices (tested on iPhone and iPad recent browsers), the images don't show up :
I've done some digging and cleared some potential culprits :
I'm not using position: fixed;
My images aren't too large
I'm not using the background shorthand
What I have found, however, is that entering any text inside the "img" div will make the background-image appear behind the text. The image still won't cover the entire div, but it does appear.
Why is Safari not showing the image properly ? What is the best way to deal with the issue and have the image properly cover its entire div ?
When you set the height to 100% :
The height will only be as large as what is inside the element.
If there is nothing inside, the height will be 0.
If there is a paragraph (as shown here), the height will be as large as the paragraph. I suggest using either pixels, rems or ems instead.
The way you wrote your image style background did not work in chrome either. I put it in the img class instead and it worked.
If you don't want to add the background image to your img class, you could do this instead:
<div class="img" style="background-image: url('image.jpg')"><p>Testing</p></div>
.img {
width: 100%;
height: 100%;
background-image: url("image.jpg");
}
<div class="img"><p>Testing</p></div>
After more digging, and the suggestion from #Michelle Cantin, I found out that the height: 100% from my CSS is ignored by Safari.
In this great answer, a fix is proposed using position: absolute;. I applied relative position to the parent element (#A) and absolute positioning to the child (.img), which fixed the issue.
The image can be seen covering the entire left column for as heigh as the right column goes in this pen : https://codepen.io/anon/pen/bYPzew
I'm loading into another div with .load('settings.html') function in
The settings.html page being loaded contains:
<div style="text-align: center; border: 1px solid black">
Application Settings: <br>
Reset Application Key
</div>
The problem is that the button is not getting formatted as per jquery mobile button data-role. If I place this on my main page the button is displayed correctly whereas by load function its a simple link.
What am I getting wrong here?
After you load settings.html use enhanceWithin() to enhance the markup and css of the button. Give your div a class and enhance it after load
Read more here -- https://api.jquerymobile.com/enhanceWithin/
Demo Take out the enhance to see that it does not render properly even when you append it
https://jsfiddle.net/5es81kgd/
Code
$('.but').append('Reset Application Key').enhanceWithin();
Here's my fiddle:
*Updated to look nicer: http://jsfiddle.net/fmYpE/1/
<div class="block">
<img src="//placekitten.com/240/240" alt="Kitty" />
<div class="block-overlay">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
.block { position: relative; }
.block-overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.block:hover > .block-overlay { opacity: 1; }
In iOS, and potentially other touch devices, if you tap on the image where a link is hidden the link will be registered as a click and you'll be redirected.
I need a way to prevent this from happening somehow. In my actual code I have a square image and hidden below it you'll see user data from a social sharing website: username, avatar, status update etc.
These are full of links. I'd like to be able to tap the image and have the overlay div transition position:absolute over the image then be able to tap/click the links and not follow them before the transition has completed.
I've tried a combination of pseudo classes, :focus, :active, also tried with Modernizr, .touch, .no-touch.
I stumbled across this article here but they only spoke of static text, not links...http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ (Scroll to the Conclusion paragraph)
Any help is always very much appreciated, thank you.
A colleague made me aware of the CSS property: pointer-events.
I was able to set the overlay div with pointer-events: none. With a few lines of jQuery I set pointer-events back to auto with a slight delay to accomodate the css transition.
Works great.