I have a combobox with chips using Vuetify, and I want to disable "overflow", as I don't want the combobox to resize, regardless of how many items it holds.
I tried various forms of allow-overflow="false", :allow-overflow=false etc, I can't find a way to get it to work. I've gone through all the API documentation and I can't see anything else that would be relevant.
Also, is there any way to get the selected items to all appear at the top of the drop-down list?
You could use CSS for this:
Style the selections (.v-select__selections) with flex-wrap:nowrap to prevent the wrapping, and with overflow:scroll to allow scrolling if the selections exceed the width of the container.
Style the chip (.v-chip) with overflow:initial to allow the chip to expand to its full width inside the container (prevents cutting off the chip).
.v-select__selections {
overflow: scroll;
flex-wrap: nowrap;
}
.v-chip {
overflow: initial;
}
demo
Related
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
See this pen:
https://codepen.io/armandsdz/pen/xqGaoe
I have a simple Foundation grid and I set display:flex to "row" element in order to get all columns be the same height.
It all works fine in Chrome, Firefox.
But on Safari, Edge, Yandex browsers (any version) those columns are a pixel or so too wide and it results in them not fitting within one row. Therefore, it wraps to two rows.
See image
Setting flex-wrap: nowrap would be an option in case of only one line but it's often not the case.
And most importantly it doesn't solve the issue at its core.
What am I missing in this flexbox world or is it a bug?
Thanks!
Addition: It happens not only when column width is, for example, 33.33333% but also when it's 25%. So where does that extra pixel come from?
The :before and :after pseudo-elements are part of a clearfix hack to contain floats and prevent margin collapse. (See this SO question about that.) Flexbox essentially disregards floats, but older browsers that don't support flexbox would fall back to using the floats so they would need the clearfix. Based on #DannieVinther and #Armands' comments, there are two possible solutions:
If you want to maintain the clearfix functionality for older browsers that don't support flexbox, you can add a rule to set width: 100%; on the :before and :after pseudo-elements. This will give the pseudo-elements a width of 100% and a height of 0, so they won't mess with the width of the rows of actual content.
.row:before, .row:after {
width: 100%;
}
If you don't need/care to support older browsers, you can simply override the clearfix hack by adding a rule to set content: none; on the :before and :after pseudo-elements.
.row:before, .row:after {
content: none;
}
I am using Pelican for generation of web pages. However I cannot avoid overlapping of code blacks with the menu list this way.
This the concerned code piece
General
Start by reading
The Zen of Python <https://www.python.org/dev/peps/pep-0020/>_
.. sourcecode:: python
import this
For python we have pocket-lint that checks for PEP8 and some other things.
Try the following:
#general .highlight {
display: flex;
}
#general .highlight pre {
width: 100%;
}
The display mode flex allows the contents to rearrange in size and position. By setting this, the bounding box of the surrounding div is pushed to the right, such that background color and border are not overlapping anymore. However, due to the flexible nature of this display mode, the width of the content is reduced to the minimum required. This can be compensated by simply maximizing the width of the element.
In the following code, I have two <div> tags that display different colored columns, one red, one green:
<html>
<body>
<style>
html, body {
height: 100%;
}
#red {
width:50%;
background: #f00;
height: 100%;
}
#green {
width: 250px;
background: #0f0;
height: 100%;
}
</style>
<div id="red">
</div>
<div id="green">
</div>
</body>
</html>
When it is displayed, the red div tag completely covers the green div tag due to the percentage width of the red area being greater than the pixel width of the green. (You can see this on JFiddle)
The problem I'm having is that in Selenium, I can't find a way to programmatically verify whether or not the green div is visible to the user. Trying greenDivWebElement.isDisplayed() returns true with the above code, despite the fact that the user cannot see it.
I did discover that doing greenDivWebElement.click() does reveal that the green div is not visible as the following error is thrown:
org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (133, 361). Other element would receive the click: <div id="red">...</div>
However, this solution won't work for me in the real world because the sort of things I want to check the visibility of do something when clicked and while I want to make sure that they are visible to the user, I don't want for them to be clicked.
So how can I check if a WebElement is visible to the user if it is covered due to CSS?
I ran into a similar requirement recently. I do not have the complete solution implemented yet but at a high level these are the steps I am taking. To verify element A is not overlapped by any other element
Get the element in question, bind the click() event of the element to a function that does nothing.
Click on 9 points of the element - center; top: left, center, right; middle: left, right; bottom: left, center, right. Selenium clicks on an element at the center point by default. The other points can be calculated by DOM positioning of the element and then moving to the respective points.
Wrap the call block in step 2 in a try/catch to check for Element not clickable... exception.
If an exception is thrown, element is overlapped by another at one of the click points.
The challenge here is definitely the bind/unbind of the click event. For my particular case it is straight forward using JQuery to achieve the binding.
One other way I initially thought of handling the click problem is to disable Javascript in the driver before running the test. But of course this approach will only work if there is no JS trickery involved in rendering page elements.
Part two of the challenge is the granularity of the click points. 8 points along the edges usually works but if there is overlap outside of the click points then the number of click points has to be bumped up.
I am having trouble trying to get a jquery ui tab panel's height to grow with floating divs within the panel.
the divs have specific data returning to these divs and I need them to float left and right to save ui real estate.
Does anyone know how i can fix this?
Actually, this is a well-known css issue. A discussion is here:
http://www.quirksmode.org/css/clearing.html
To summarize the article, any <divs> that you wish to function as both a tab pane and a float container should have these styles added to them either in your <style> or css <link> files:
overflow: auto;
width: 100%
This isn't a bug. It's intentional. The floating div literally lifts out of the container, and the container will not be aware of the floating div. At least, that was the goal.
You should do a search on here for "clearing floats" or other related css rules, because using the above will cause issues with certain browsers (in short: 'take care to test this, all the same').