I want to remove this line see below image. I think it's border color but i did try to change color of border but still issue exist.
See this Link for customization of bootstrap navbar
Yeah, you really should include some code.
A typical bootstrap navbar gets the border from .navbar-default
So try the css below:
.navbar-default {
border-color: transparent;}
There are two types of bootstrap menus - default or inverse (light or dark):
<nav class="navbar navbar-default" role="navigation"></nav>
<nav class="navbar navbar-inverse" role="navigation"></nav>
According to your use, do something like this:
.navbar-default {border:none !Important;} or
.navbar-inverse {border:none !important;}
Related
I'm trying to use a CSS transition in a similar manner to https://htmx.org/examples/bulk-update/ to show which row was updated, but I can't get it to work for my example using HTMX 1.3.3
The relevant HTML is:
<div id="replace-me">
<div id="A" hx-get="/A" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">A</div>
<div id="B" hx-get="/B" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">B</div>
</div>
When either div A or div B is clicked, the server returns the above HTML again, but with class="updated" applied to the div in question.
I also have the following CSS:
.htmx-settling .updated {
background: darkseagreen;
}
.updated {
border: 1px solid black;
}
I would expect to see the clicked div show a border and also flash green. However what I observe is:
I click on div A.
div A shows a border but does not flash.
I click on div B.
div B shows a border, but div A flashes.
From then on, the div that I click on shows a border, but the div that was clicked on the previous turn flashed.
I'm guessing this is something to do with the timing of the application/removal of the htmx-settling class combined with when the swapped content gains the new class. I've read https://htmx.org/docs/#request-operations and https://htmx.org/docs/#css_transitions, but can't see where I'm going wrong.
AFIAK you need transition in you CSS, like from https://htmx.org/docs/#css_transitions
.red {
color: red;
transition: all ease-in 1s ; <========= missing?
}
I am using a navigation bar in my Vue/Vuetify app, and added a v-app-bar-title component to display the name of the page the user is currently on. However, when I load certain pages, the title text becomes truncated, and only corrects itself if I reload the page. Here is an example of what I mean, I added a red border to the element to show that the text should have enough room:
If I reload the page, the tile returns to normal:
I tried adding the text-overflow: show property to the element, but this didn't seem to have any effect. I also added a min-width property, but this failed to change the title's behavior.
EDIT: Including a little extra code:
Here's the title component I'm using:
<v-app-bar-title class="title" >{{ title }}</v-app-bar-title>
And here's the CSS for it:
.title {
flex-grow: 10;
color: var(--text-reverse);
text-overflow: show;
// border: 1px solid red;
}
I did find a workaround by just replacing the v-app-bar-title component with a span, but that feels cheap and I'd like to be able to utilize as much of vuetify as possible.
try with this
<v-app-bar-title class="text-no-wrap">{{ title }}</v-app-bar-title>
I found a solution that seemed to work in case it is useful:
<style>
.v-app-bar-title__content{
width: 200px !important;
}
</style>
Try this... It worked for me
<v-app-bar-title class="title" >
<div>{{ title }}</div>
</v-app-bar-title>
I had the truncating issue in Safari. Chrome was working fine. I was able to fix by adding class="grow"
<v-app-bar-title class="grow">
{{ title }}
</v-app-bar-title>
I had the same issue and didn't want to use !important. So I've just replaced v-app-bar-title with v-toolbar-title and had no this truncation issue any more :)
Great question. Could you share the code of your app-bar component, so we can have a look?
Update:
Is your v-app-bar-title directly in the v-app-bar?
Possible fix, I have never had to change flex-grow on Vuetify components. Have you tried removing the flex-grow?
Additionally you could try in your css title class:
text-overflow: clip;
overflow: visible;
We can make use of the v-toolbar-title component.
This worked for me!
Example for toolbar title
if you want to add space between v-app-bar-titles then adding margin is the best i got here
<v-app-bar-title style="color:white" class="title">
Title here
</v-app-bar-title>
<v-app-bar-title style="color:white " class="little ml-4">
</v-app-bar-title>
Had the same problem.
Fixed with this
<style>
v-app-bar-title__placeholder {
text-overflow: clip;
}
</style>
If you show the placeholder and hide the content in the v-app-bar-title, it seems to work.
.v-app-bar-title__placeholder {
visibility: visible !important;
}
.v-app-bar-title__content {
visibility: hidden !important;
}
I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. here's basically how i laid it out:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?
Your answer is right in the docs:
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
and in the Bootstrap 4 docs...
Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements.
As others have stated adding a padding-top to body works great.
But when you make the screen narrower (to cell phone widths) there is a gap between the navbar and the body. Also, a crowded navbar can wrap to a multi-line bar, overwriting some of the content again.
This solved these kinds of issues for me
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
This makes a 40px padding by default and 0px when under 768px width (which according to bootstrap's docs is the cell phone layout cutoff where the gap would be created)
a much more handy solution for your reference, it works perfect in all of my projects:
change your first line from
.navbar.navbar-fixed-top
to
.navbar.navbar-default.navbar-static-top
Just change fixed-top with sticky-top. this way you won't have to calculate the padding.
And it works!!
The solution for Bootstrap 4, it works perfect in all of my projects:
change your first line from
navbar-fixed-top
to
sticky-top
Bootstrap documentation reference
About time they did this right :D
#Ryan, you are right, hard-coding the height will make it work bad in case of custom navbars. This is the code I am using for BS 3.0.0 happily:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
This issue is known and there's a workaround in the twitter bootstrap site:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of padding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
This worked for me:
body { padding-top: 40px; }
I put this before the yield container:
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
I like this approach because it documents the hack needed to get it work, plus it also works for the mobile nav.
EDIT - this works much better:
#media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
As I've posted in a similar question, I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
The spacing works out great on all screen sizes.
The problem is with navbar-fixed-top, which will overlay your content unless specify body-padding. No solution provided here works in 100% cases. The JQuery solution blink/shift the page after the page is loaded, which looks weird.
The real solution for me is not to use navbar-fixed-top, but navbar-static-top.
.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
All the previous solutions hard-code 40 pixels specifically into the html or CSS in one fashion or another. What if the navbar contains a different font-size or an image? What if I have a good reason not to mess with the body padding in the first place? I have been searching for a solution to this problem, and here is what I came up with:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
You can move it up or down by adjusting the '1'. It seems to work for me regardless of the size of the content in the navbar, before and after resizing.
I am curious what others think about this: please share your thoughts. (It will be refactored as not to repeat, btw.) Besides using jQuery, are there any other reasons not to approach the problem this way? I've even got it working with a secondary navbar like this:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Above is on Bootstrap 2.3.2 - will it work in 3.x As long as the generic class names remain... in fact, it should work independent of bootstrap, right?
EDIT: Here is a complete jquery function that handles two stacked, responsive fixed navbars of dynamic size. It requires 3 html classes(or could use id's): user-top, admin-top, and contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});
For handling wrapping lines in menu-bar, apply an id to the navbar, like this:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">
and add this small script in the head after including the jquery, like this:
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
});
});
</script>
That way, the top-padding of the body gets automatically adjusted.
use this class inside nav tag
class="navbar navbar-expand-lg navbar-light bg-light sticky-top"
For bootstrap 4
for Bootstrap 3.+ , I'd use following CSS to fix navbar-fixed-top and the anchor jump overlapped issue based on
https://github.com/twbs/bootstrap/issues/1768
/* fix fixed-bar */
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 40px; }
}
/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
All you have to do is
#media (min-width: 980px) { body { padding-top: 40px; } }
Further to Nick Bisby's answer, if you get this problem using HAML in rails and you have applied Roberto Barros' fix here:
I replaced the require in the "bootstrap_and_overrides.css" to:
=require twitter-bootstrap-static/bootstrap.css.erb
(See https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)
... you need to put the body CSS before the require statement as follows:
#import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
#import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb
If the require statement is before the body CSS, it will not take effect.
I would do this:
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
This should make sure the nav block doesn't stretch downpage and covers the page content.
This works and looks good for me.
<body class="pt-5 mt-4">....</body>
I just wrapped the navbar in a
<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>
No fancy hocus pocus but it worked..
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
I've encountered an odd behavior in a Windows8 app that I'm building with WinJS, javascript, and HTML. In a particular Page that I'm implementing, there are several divs that have CSS rules like this:
.col {
border: 1px solid none;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
margin: 0px;
width: 100%;
}
The problem is when I invoke the main app bar by right clicking, the scrolled content in the div snaps to the top of the div. In other words, the scroll position of the div is lost. I've tried a host of ways to fix, but nothing has come up. How can I prevent the scrolled content from jumping around upon invoking the App Bar.
Thanks!
suggest to use -ms-grid for the page. The app bar will overlap the div in that case, which is ok and likely right behavior that you can see in other apps also.
html:
<div class="test5 fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">test page</span>
</h1>
</header>
<section class="content" aria-label="Main content" role="main">
<div class="test-content">
Text here.
</div>
</section>
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
</div>
css:
.test5.fragment section[role=main] {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}
#Sushil is correct. AppBar is an overlay control, so you should place it next to the fragment div, not inside it. #Sushil's code shows how to do it.
Placing an appbar inside the fragment has performance penalties as it will need to be rendered every time a user navigates to that page. Another undesirable side effect is that all input to the appbar will propagate to the fragment. This is the problem you are facing.
In theory, you can listen to the various input events for mouse, keyboard, touch and call preventDefault on them. But it is not recommended.