I'm working with Angular material 1.1.0 and Angular 1.5. I'm trying to put an auto complete next to a multi-select input withing a row which defines an alignment as layout-align="start center"but the elements are not align. Here is a pen where the yellow div shows the issue.
At the bottom of the pen's css there is a commented style that can fix the problem by removing the extra space that the elements create to show error output. But this makes the autocomplete loading bar to be out of place.
I could simply align the elements as the white div as layout-align="start start" but this will left too much space between components as shown in the example.
Is there a workaround?
Use the CSS below - CodePen
CSS
#myAutocomplete {
height: 85px;
}
Markup
<md-autocomplete ... id="myAutocomplete">
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
The problem is (which you can see in the pictures below) that the "doner", "Wallet", and "Amount" aren't centered on the page.
I've tried changing the margin and padding and moving divs around and etc, but nothing seems to be working and I don't understand what is wrong or how to fix it. (it is hard to see in the code snippet because it's not full screen so I'm just going to give a link to the HTML here)
The only issue I can find is when I inspect element on google chrome. When I hover my mouse over <div class="container"> (the one underneath div class="learn-more">) It shows that the div container is wider on the right side, but I can't find why!
Thanks for the help! If you need any clarification please ask, I couldn't find anything to fix my problem online so I came here.
Here's a picture of what I mean as well:
The essential problem with your code is the markup. You're using the Bootstrap & putting some div directly inside the container & then another container inside this div. See what I mean:
Here are the first three rules from the 3rd Bootstrap documentation you should follow when building your HTML:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
So, my suggestion is to revise your HTML layout and use the Bootstrap as it intended instead of applying some hacks.
Start from rearranging containers in the way that the content would be put inside columns and all of the wrappers would be outside of the containers or inside the columns.
put your content that you want to center in a div like
<div class="box">your content...</div>
in your css file just add this :
.box{
display:inline-block;
position:relative;
left:50%;
transform:translateX(-50%);
}
you can also use a float left for your 3 titles and set the same witdh and height for the three with text-center proprety
I am using Bootstrap to create my user interface.
I have a navbar that is relatively tall; the default height of the navbar is 50px and my navbar is 100px. When I render a split button, the menu drop-down doesn't respect the navbar height (the link below illustrates the problem). How do I fix this so that the dropdown renders beneath the button (and not beneath the navbar)?
Also, if anyone has a suggestion on how to get rid of the gap in the middle of the button group, that'd be awesome too!
Clarification
I'm using SASS so I didn't realize that the link that I pasted didn't illustrate the problem. I compiled my CSS and put it in the JSFiddle link. Unfortunately, the CSS file there is huge.
If you're using BootStrap with LESS or SASS, I adjusted the $navbar-height variable to 100px (instead of 50px).
In any case, I'm hoping for some guidance on what the Bootstrap Way™ of adjusting things like the navbar height so this stuff works.
(Old link that doesn't illustrate the problem)
http://www.bootply.com/yOrqxaoM2t
(New link)
http://jsfiddle.net/marvery/VpL9N/1/
ok it looks like the issue is not with the navba height its with the margin you have set margin-bottom:33px on .navbar-btn- that needs to be removed.
.navbar-btn {
margin-bottom:0px;/* should be zero bootstrap default btn margin- remove yours */
}
that is moving the dropdown to be 33px lower than the default
fiddle link
I built a small mobile website with AngularJS & Bootstrap. Please see http://www.quaaoutlodge.com/mobile/
Now I would like to move the text into the center of the <li list items but when I add a padding-bottom or margin-bottom to the #desc element, the text doesn't move up at all but the reserved space seems to just go across the <li border. Why is this? How do I change this so that I achieve above described effect?
Thank you!
edit 1
I changed the <span style from id to class, added display: inline-block; and padding-bottom: 10px;and the padding gets applied right now but, how do I move the text up while the icon on the left stays so that they get aligned centred to each other?
First, you need to fix the problem of having non-unique id elements on the page! You should probably be using a class for #desc, instead of an id.
In regards to the padding on the #desc span, you need to set the display style to inline-block, and then you should be able to use padding to affect the space around it.
I know how to display an icon as such:
<span class='icon-remove'></span>
But If I add padding to the span, extra icon shows up. How to fix it?
span {
padding-right:60px;
}
fiddle
The glyphs are presented using one large image map (or so called CSS sprites), so if you leave enough space on in either side of the element it will show other glyphs as well. Two solutions comes to mind:
1) Put the icon in a containing element:
<span><i class='icon-remove'></i></span>
2) Or use margin:
span { margin-right: 60px }
I figure you just want to have some whitespace to the right of the icon? Have you tried margin:
<span class='icon-remove' style='margin-right:60px'></span>
The reason extra padding displays more icons is that Bootstrap uses CSS sprites to display icons. What you're actually seeing is a background image, more specifically a section of a large background image that includes many available icons. The definition of the class "icon-remove" specifies the background-position property to select the particular icon. If you add padding, you will reveal more of the background image, which will show additional icons.
The solution, then, is to either add margin, as Rid Iculous suggested, or couch your within another element and add padding to that. I'd go with the margin.