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.
Related
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
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 container-fluid for all my containers. This allows the layout to expand on a large display (good) but causes probs when a user shrinks the layout by grabbing the corner of the browser and dragging (bad).
Is it possible to constrain the ability to shrink the layout. Perhaps using media queries? Something else in the Bootstrap bag of tricks?
This works for me, hope it will resolve your issue.
#media(max-width:767px){
.container-fluid{
padding:0px 10px;
}
}
Apply whicheven properties you want for screen size less that 767, you can change the screen size too.
Long time lurker, first time asker! I'm unable to find what I want after a few nights of searching.
I'm looking for very standard bootstrap behavior.
Greater than/equal to 760px width resolution, I want fixed width.
Below 760px width resolution, I want the two lists to stack and take 100% width.
The problem is that above 1200px there is a different fixed width. I tried to fix this by making setting the .container class a fixed width, but then the sub 760px is also fixed --- no longer fluid. I've also tried using media queries.
Here's the code I'm working on: http://travelprobiotics.com/
Any suggestions?
thank you,
Evan Jerkunica
If you are hosting bootstrap yourself, you can't go wrong using bootstraps customization tool found here.http://getbootstrap.com/customize/
Look under the 'Media Queries Breakpoint' section and changed the screen-sm to 760px. (it is already defaulted to 768px so if you're OK giving away the 8 pixels, skip this step and use the code snippet below by itself.)
After that, add this snippet below in your own stylesheet, set the container to whatever width you want to be 'fixed'
#media screen and (min-width:760px) {
.container {
width: 960px !important;
}
}
I have a background which cycles through images, these images have no fixed sizes.
My problem is that I cannot find a simple responsive frame for re-sizing images which are dedicated background images. There are plenty of plugins for normal images on websites.
The background of my website always has to have the image displayed.
cropping is allowed, is allowed the image must re-position itself in the center of the web browser.
jQuery or #Media is allowed, I don't really mind.
My images and div look like this:
<div style="width:100%; height:100%; background:white; position:absolute; margin-left:0px; margin-top:0px;>
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
A lot of the plugins out there set width to 100% and the height to auto. This will not work as if the browser width is, let's say, 200px and browser height 800px. The image will not cover the entire screen and keep it's aspect ratio. There will be a "gap" under and above the image, so in this case, the height should be 100% and width changed to auto. And of course the other way around if the browser height is 200px and browser length is 800px;
Example of what I want: http://www.martinlogin.se/
You're asking for two different scenarios to be applied depending on screen aspect. This can be done with media queries, but you'll need to settle on some widths and heights.
Start with width-based sizing:
#backgroundDiv {width: 100%; height: auto;}
When the site is narrower than some point, switch to height-based sizing:
#backgroundDiv {width: auto; height: 100%;}
You'll need to decide where the transition takes place based on your expected audience's most likely screen size/aspect scenarios, the images you're using, etc.
To have even more flexibility, say for particular aspect ratios instead of widths, you'll need scripting.