I've been stuck on this one for some time now and would really appreciate some assistance.
I'm developing a superfish horizontal dropdown menu.
I would like to know how to, using supersubs, set the width of the dropdown menu items to that of the largest items width in the drop down.
The default is : $('ul.sf-menu').supersubs({ minWidth: 40, maxWidth: 41, extraWidth: 1 }).superfish();
I would like something like : $('ul.sf-menu').supersubs({ minWidth: 40, **maxWidth: auto or 100%**, extraWidth: 1 }).superfish();
I would appreciate any help at all.
Regards,
Byron
supersubs min and maxwidth are in em's not % or pixels
I was having trouble with supersubs being a little buggy, and I figured out a superior CSS-only alternative. The drop-down <UL> and it's <LI> children should have no width set (or width:auto; if needed, I suppose), and both should be set to display:block;
#nav li ul a { display:block; width:auto; white-space:no-wrap; }
You can see an example at http://epraxadev.com/clcnewport/comp/supersubs.html
Related
My goal is to use ag-grid in an Angular 5 project and have the grid take up all of the available vertical space in a flexbox layout. The grid seems happy to use "height:100%" when it's contained in a div which has a defined pixel height or when the div has a percentage height but isn't in a flexbox layout. But it always seems to have no height when I try to host it in a flex item.
How can I get my grid to expand to take up the height of its flex item container? Here's a plunker with an example of what I'm seeing and trying: https://embed.plnkr.co/D8YgM6/.
Here's how I am creating my layout:
<div style="height:100%;display:flex;flex-direction:column;">
<div style="height:250px;flex-grow:0;">
<h5>Container div with specified height in pixels, ag-grid with percentage height</h5>
<ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
<div style="flex-grow:1;">
<h5 class="red">Container div using flex height, ag-grid with percentage height</h5>
<p>How can I get the grid to be aware of my div's actual height?</p>
<ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
</div>
I want the grid in the second flex item to have an appropriate height. How can I do this?
In your plunker, set the flex-basis of the item containing your grid to 0, this achieves I think what you are after. I've just been wrestling with the same:
.item-1 {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
Plunker Screenshot running in Chrome
I'm not sure why this works, maybe someone with more in depth knowledge of ag-grid can comment?
try setting auto height on grid ready event
this.gridApi.setDomLayout('autoHeight');
details: https://www.ag-grid.com/javascript-grid-width-and-height/
I was wondering if there is any way to add a padding bottom at the end of the list.
I need this because I have a material floating button over the list, at the bottom. So if the user goes to the end of the list, that padding will save the last item to be covered from the button.
thankyou
Its not a padding, but you could put a margin botton to the div that contains all the items
Something like that:
.ReactVirtualized__Grid__innerScrollContainer {
margin-bottom: 100px;
}
.ReactVirtualized__Grid__innerScrollContainer[style] {overflow:visible !important;}
Version 9 of react-select uses inline styles to set overflow. I used this so the tooltip was seen below the end of the grid (when the grid doesn't take the whole screen). See react select library code snippet:
<div
className="ReactVirtualized__Grid__innerScrollContainer"
role={containerRole}
style={{
width: autoContainerWidth ? 'auto' : totalColumnsWidth,
height: totalRowsHeight,
maxWidth: totalColumnsWidth,
maxHeight: totalRowsHeight,
overflow: 'hidden',
pointerEvents: isScrolling ? 'none' : '',
position: 'relative',
...containerStyle,
}}>
And that is in https://github.com/bvaughn/react-virtualized/blob/438b5672e5364cffa91f21656ee2f04003794ca1/source/Grid/Grid.js#L1058
You could set the height of the last item in your list to include your padding, as rowHeight can be passed a function.
Then all you need to do is style your list items such that the extra height on the last item is empty space, margin bottom or a fixed height on the inner contents would work.
https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types.
After you have chosen a field name, then you start typing in the value textbox, the dropdown defaults to a width of 150px which causes lots of things to be cut off. A scrollbar shows up so you can scroll left and right, but I would like to figure out how to set the minimum width of this element.
The css path to the element defining this is:
body > div.gwt-SuggestBoxPopup > div > table > tbody > tr.suggestPopupMiddle > td.suggestPopupMiddleCenter > div > div
It seems to be an inline style in the element
<div class="" style="overflow: auto; position: relative; zoom: 1; height: 322px; width: 150px;">
The field dropdown seems to re-size dynamically, so it does not get scroll bars, the suggest box starts at 150px and resizes sometimes, but it doesn't seem to have any rhyme or reason.
I added the following to my stylesheet:
.suggestPopupMiddleCenter > div > div
{
min-width: 300px; !important
}
But that also affects the field dropdown, which appears to be working properly.
Is this a bug, or is there a configuration that I can use that will allow the value suggestion box dropdown to dynamically resize based on the widest element?
It is hard wired in the tardis branch https://github.com/salk31/RedQueryBuilder/blob/tardis/redquerybuilder-core/src/main/java/com/redspr/redquerybuilder/core/client/expression/SuggestEditorWidget.java#L107
It probably could use some rule to choose the width. Best if you raise a bug and make a suggestion?
I was able to change my homepage so that the images now stretch full width on the screen. Now I just need to fix the text and content so that it has a max-width of 960px. Below is an image of what I am trying to fix.
If I can get the "Mobile Job Search" section/text back to how the rest of the pages are on the website that would be perfect.
The two divs are .myLeftColumn2 and .myrightColumn2
Any help would be great. Thanks so much!
www.jobspark.ca
Just add that CSS to your code, I hope that work for other pages too...
CSS
#content{
max-width: 960px;
margin: 0 auto;
}
Put the whole text inside a new div, then write:
#newdiv{
max-width: 960px;
}
Into your style sheet. This should work perfectly!
You are probably going to have to enclose the content below the image in its own div, and restrict it's width.
Edit I looked at the source html, but it is quite messy.
Just to see if this changes anything, located all the divs like this:
<div class="row sqs-row" id="yui_3_7_3_1_1369586030814_180">
Here's the css :
.sqs-row { width: auto !important; *zoom: 1; }
edit that width to the width you want (960px)
.sqs-row { width: 960px; *zoom: 1; }
Is there any way to achieve this in CSS3?:
height: 100% -110px;
My context:
You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational way to handle this, but you will need to wrap you element in a other one:
body {
height; 100%;
padding: 0 0 20px;
}
div#wrap {
background: #fff;
height: 100%;
padding: 0 0 20px;
margin: 0 0 -20px;
}
div#wrap div { //this would be your actual element
height: 100%;
background: pink;
}
What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon.
As for your example, maybe sticky footer will be some inspiration for you.
Edit
Nowadays it's well supported by major browsers:
http://caniuse.com/calc
Directly like that i'm not aware of any feature widely adopted to do that.
But there is a easy method to achieve the effect.
Put all element inside a container <div> with 'height: 100%', this container should have position relative so you can position the other elements inside it relative to its position. place the header on top and the footer at bottom with absolute positioning and calculate with javascript the height that the content div must have.
You can also subscribe the 'window.onResize' event to recalculate when the window is resized.
I know this is not a clean and prety solution, but is the one the you can make work well in almost any browser.
In the context it was given the 2nd div height value doesn't really matter. Actually it's only important where that div starts and where it ends.
In other words height = vertical end - vertical start:
#div2 {
position:absolute;
top:90px;/*20+50+20*/
bottom:20px;
}
http://jsfiddle.net/cGwrw/3/