I am playing with the Bootstrap accordion & can't seem to be able to remove the underline/border which is displayed when the heading is open.
The accordion-heading style doesn't seem to specify a border and I can't locate where it's coming from using an element inspector.
The yellow highlighted line is what I am interested in (I have no trouble overriding the other borders.
Any tips?
.accordion-inner (below the header, encapsulates the accordion content) has a border-top property specified. This is probably what you're looking to modify/remove. The following CSS snippet will remove the border you're referencing.
.accordion-inner { border-top: 0 none; }
Related
I am trying to use vuetify menu in a sidebar navigation. I would like for the menu to align perfectly to the left side of the screen. Instead what I am getting is the menu is insisting to be positioned 12px away from the edge of my screen and wrecking my alignment.
Is there a way to disable the shadow or to force the alignment? The left: 12px is specified directly on the element's style so CSS has no effect.
I have tried this but no luck:
<v-menu offset-y nudge-left="-12" flat>
https://codepen.io/RuttyJ/pen/BevNmy?editors=1010
Any ideas?
Update:
Made some progress:
https://codepen.io/anon/pen/WBLMob
This achieves the effect but requires the override of the menu nudge on a global level to 0px !important.
You can use content-class like:
<v-menu content-class="elevation-0">
You can use the elevation directive to remove the shadow.
Just add elevation="0" to your element.
https://vuetifyjs.com/en/styles/elevation
To remove the shadow, you could simply override the styles for .v-menu__content. In some CSS:
.v-menu__content {
box-shadow: none;
}
Aligning to the left can be done setting the styles via javascript.
Having said that, I think it is easier to make a sidebar menu from scratch than trying to transform a component which is not meant to be a sidebar into one. Transitions will be off, and so much on.
I just had a similar issue but with a menu activator less than 12px from the top of the page.
Looking at the source for the VMenu component (via the menuable mixin) you can see that 12px is a hard coded minimum distance. The only way I can see to get around this is to !important override the css only for these specific cases.
Left calculation: left = Math.max(left, 12);
Top calculation: return top < 12 ? 12 : top;
I have created a Vuetify Issue to cover the top case.
This worked for me with a v-navigation-drawer component Vuetify 2.0
<v-menu class="elevation-0" >
You can use $menu-content-elevation: 0;.
SASS variables
Available menu component SASS variables
When I click on the day picker component container or an individual cell within the calendar, a blue border gets added.
I couldn't find the related CSS in style.css, nor do I see any classes being added in DevTools that could be adding the blue border.
How do I get rid of this?
The blue "border" gets added when the DayPicker-wrapper element gets focused. It's actually the outline css property that generally gets added to any focused element unless you specify otherwise.
To remove the outline from the overall DayPicker element, add the following to the .DayPicker-wrapper class in your DayPicker component stylesheet:
.DayPicker-wrapper {
outline: none;
}
You can also remove it from the individual days by adding {outline: none;} to the .DayPicker-Day class.
Mark's solution works perfectly; just fyi, if you want to remove all outline (blue border) without adding multiple classes, try writing:
.DayPicker * {
outline: none;
}
I have a unordered list styled in CSS to create a horizontal navigation. Each list item has a border-left property to create a separator line. The last item in the list does not have this border-left property (override by using border-left:0). It works, however, the <a> link element (as opposed to the <li> element) is showing the border-left property. I cannot for the life of me figure out how to remove it.
Here is the web page in question: http://sa4idev.com/stabilis/buy-lng-here/ -- if you look at the bottom navigation, you'll see "BUY LNG HERE" with a stray vertical border just to the left of the "BUY" -- it is not supposed to be there. Any suggestions on how to remove that?
Thanks!
It seems like that's actually coming from the background image background:url('images/buy_lng_on.png') no-repeat; applied to #menu-item-59.current-menu-item a (inspector said line 659). Double-check that the image doesn't have stray blue lines in it.
EDIT:
It's actually because you're putting the background image on both the li and the a inside it (and on a:hover, incidentally). The blue line at the far left of the image is showing once for the li and once for the a. Removing the background image from the a fixed the issue in my testing.
you can use CSS2 pseudo CSS selector.
in your case you want to remove border from the last li so you can do this by selecting last-child or if you want to remove border from the first li then you can choose first-child CSS selector.
li:first-child{border:0}
li:last-child{border:0}
I'm trying to add a border around my DataGrid GWT element. I've had limited success overriding the default CSS classes defined in the official GWT DataGrid CSS file. I can successfully override the ".dataGridEvenRow" and ".dataGridOddRow" with border-style and border-top attributes and the border becomes visible around those rows, but when I try overriding the ".dataGridWidget" and add border CSS attributes as displayed in the code below no border appears.
.dataGridWidget
{
border-style:ridge;
border-width:5px;
border-color: blue;
}
What can one do to get a blue border around appearing around a DataGrid?
After a few more hours trying to get the styling to work directly on the DataGrid, I decided to just wrap the DataGrid using a SimplePanel and add my border directly to that. It looks exactly like a border around the DataGrid itself, and since the other DataGrid classes seem to override without any problems (like dataGridEvenRow and dataGridOddRow), it's a seamless band-aid to the issue.
Hey I hve made this sample page for me http://jsfiddle.net/9S3a3/12/ , if we have a look at buttons , there is a slight shadow below them , i want to remove those shadows look, i tried resizing margin padding things but not able to do so . Any solution to this ??
----------Edit----------
I was talking about back button and gear button , see this http://i.imgur.com/pgwxr.png
The box-shadows are applied using the .ui-shadow class. So editing that CSS class like below will remove the shadows:
<style>
[data-role="header"] a.ui-shadow {
box-shadow: none ;
}
</style>
This will remove the box-shadow for any link with the .ui-shadow class that is located inside the data-role="header" element.
Here is a link to an updated version of your fiddle: http://jsfiddle.net/9S3a3/14/
On a side note, I remove the text and box shadow for most elements as it helps improve performance on mobile devices quite a lot.
I didn't get which buttons are you asking about, however, correct me if I am wrong. Add
#nav_header {
border-bottom: none;
}
to your CSS (http://jsfiddle.net/9S3a3/13/) to remove the shadow (border) under the Featured, Near, New buttons.