I want to use custom css with twitter bootstrap for features like popover and modal dialogs. But because of the bootstrap css the site has an improper alignment. I tried using a reset css but it didnt help. Is there any way to fix it other than inspecting incorrect elements for the style description which is causing the problem.
You can just add css rules to the classes after the bootstrap css rules.
Be aware that bootstrap uses box-sizing: border-box; for all elements, which might cause your improper alignment.
Under the above border-box mode, width and height includes both border and padding, which are usually don't, be aware of that, or use box-sizing: content-box; for your own elements.
So if the reset stylesheet set the box-sizing to content-box, the origin bootstrap alignment will be destroyed.
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
I'm using bootstrap for most of the page, but I'd like to use custom css in a div.col to get a nicer looking table, but the bootstrap css is affecting some of the styles.
I'd like to reset all the styles for a specific div and it's children.
Are there any ways of dealing with this other than explicitly overloading every style bootstrap uses?
To reset all the styles for a specific div, you can add the 'all: unset;' CSS property.
<div style="all: unset;">...</div>
This will undo ("unset") all the styles currently applied to that div (but not it's children), leaving you to add which ever ones you desire.
See it in action here (including how to apply to all child elements):
http://codepen.io/esr360/pen/kkogwm?editors=1100#0
This is a bootstrap accordion that has been "unstyled".
View browser support here: http://caniuse.com/#feat=css-unset-value
Unsurprisingly this doesn't work in IE.
I have a navbar on my bootstrap3.0 website that works almost perfectly. On large screens, the navbar is fixed to the top. On smaller screens, it is still fixed to the top and the menu shrinks to that little "hamburger icon" for drop down menu on a mobile screen.
However, there is a problem I cannot seem to fix. When the website is viewed on a narrow/mobile screen, bootstrap magically adds the following to my page:
<html lang="en" style="padding-top: 59px;">
I have tried putting setting the html and the body margin to 0 and padding to 0 in my css, the bootstrap css, and even as a style in the index.html page, but this element.style seems to overrides it. I've also searched all my css files, and the 59px magic number appears nowhere, which implies it is calculated on the fly from some variable. I don't know enough about bootstrap or css/less to figure out how/why - which is why i said it is "magically" added :)
Where is it calculating the 59px from, and how can I over-ride this?
I can't tell you where it's coming from but you can override it with your own style by adding !important to the end of the defintion. Embedded styles using the style tag will take precedence over other definitions otherwise.
.someClass{
padding-top : 0px !important;
}
In Chrome and Safari, the following CSS problem occurs:
ul, li and a or link have a default CSS property that pushes everything vertically away. I have fiddled with the following properties:
font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom
And nothing seems to prevent the problem.
I've downloaded the CSS reset by Yahoo, but I'm unsure how to use it properly.
I haven't pursued that because I don't know that it would solve my problem anyway.
I've looked at your Fiddle and I'm slightly confused. You say things are being pushed away vertically, but I don't see that happening at all.
The only thing I see which could even somewhat meet that description is the fact that your links are on separate lines.
If this is the problem, the solution very simple: divs are block-level elements. This means that they default to 100% width and are designed to break onto a new line before they start, and onto a new line after. This is the behavior of display: block; and is built-in to the default styles of a div.
To fix this, apply the following style:
#headernav div{ display: inline; }
This, however, is the least of your problems. The code you copied into the fiddle lacks a closing tag for one of the div elements, which could cause unpredictable behavior in older browsers. You have two divs with the same ID, which is a major no-no.
In this update to your fiddle I have fixed the HTML problems you have. Note that 'tempLink' is now a class, and is targetted by a '.' in CSS, not the '#' that indicates an ID.
I have applied the above CSS to the class tempLink, instead of any div within your headernav.
Note in that fiddle that your two links are now side-by-side. You can control the horizontal spacing between them with margin and padding (target the tempLink class).
As Adrift mentioned it would be a lot easier to diagnose if you use jsFiddle. That being said, have you tried display: inline-block or float: left?
I'm trying to accomplish something specific around platform constraints I'm under.
I created a somewhat self-explanatory jsfiddle of the problem at http://jsfiddle.net/MrV5M/4/
The specific problem:
On Chrome, the right border of the input box is cut off.
On Safari, the width of the content class cell exceeds the container so it spills over the border.
On IE9, the label doesn't float to the left of the content div
The main reason I care about Safari is because I'm working on a JQuery Mobile/PhoneGap app which is also a web app. I'm only supporting modern browsers, but this is driving me nuts. Normally I'd just use a table for the container, but the text-overflow: ellipsis styles on the content div don't work when inside a table. (Basically, I'm trying to keep the content to a single line and have ellipsis without enforcing a fixed width or calculating a width with Javascript)
Anyone have the l33t CSS skills to make this work? I sure don't... :)
Just add this CSS to your Stylesheet, and get peace of mind on your issue :D
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You may not like this answer. I made some adjustments in the css which fixes Chrome and IE9 issues. Take a look,
http://jsfiddle.net/MrV5M/11/
There are many ways to do what you are trying to do, but if you insist on using 'flex' stuff which is largely un-supported (even in the majors see here), you'll need to add the vendor prefixes to flex.
e.g... -webkit-flex, -moz-flex
Also, I don't think you need to be setting widths on elements that have the flex property.. not positive though.
So your browser issues:
-IE doesn't support flex at all so you're label won't float unless you use a float.
-The reason your input/content is spilling over the container and getting cut off is not really anything to do with flex.. but the way css works.. setting an element to 100% width means setting it to the width of its parent. But by default, css doesn't count the padding/border-width as part of that width. So you end up getting 100% width plus the L/R padding and border. But, since you are only supporting modern browsers.. box-sizing:border-box; to the rescue. Google it for details, but putting it on your input element should do the trick.