I'm using foundation to create three sections of a site. Set up with the following html:
<div class= "row full">
<div class="sidebar large-2 columns">... </div>
<div class="large-8 columns user-navbar">...</div>
<div class="large-2 columns user-activity">...</div>
</div>
I'm also trying to have the sidebar extend the vertical length of the page. I've been trying to do this by doing:
.sidebar {
min-height: 100%;
position: fixed;
}
However when I do this it provides an overlap of the user-navbar to the sidebar. Is there a way I can fix this?
Thanks!
there's no use of position here .So to extend height to window height use:
.sidebar {
height: 100vh;
}
also define class sidebar as:
<div class="large-2 columns sidebar" style="background:red;height:120px">... </div>
I found an older post that had a similar problem:
Using fixed position with a grid layout framework
For Foundation 6 which I'm working with, I added the class "large-offset-2" and it looks great now!
How to set the primeNG dropdown width to stretch 100% inside its container?
It seems to have fixed element.style and the .ui-dropdown{ width: 100% } override
does not work.
In my case I used autoWidth = false and set style attrribute like below
<p-dropdown [options]="educationLevels" [(ngModel)]="selectedEducationLevel"
name="educationlevel" autoWidth="false" [style]="{'width':'100%'}"></p-dropdown>
I found to use the Responsive approach and apply .ui-fluid style with Grid CSS at container while p-dropdown should have the [autoWidth]="false" attribute.
Example:
<div class="ui-grid ui-grid-responsive ui-fluid">
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<p-dropdown [autoWidth]="false"></p-dropdown>
</div>
</div>
</div>
For me,
[style]="{'minWidth':'100%'}"
does the trick!
Then I used like this:
<span style="width: 100%">
<p-dropdown [style]="{'minWidth':'100%'}" [options]="items" [(ngModel)]="selecteditem"></p-dropdown>
</span>
You should be writing in a css file using the mentioned class as below,
.ui-dropdown {
width:100% !important;
}
Set it to be !important
LIVE DEMO
You should be editing a class in a primeng.min.css file as below,
.ui-dropdown .ui-dropdown-panel {
min-width: 100%;
width: max-content;
}
<p-dropdown id="id" [options]="list"></p-dropdown>
then Dropdownlist should take size of biggest option.
For me:
.ui-dropdown {
max-width: 100%;
}
Did the trick, here is my html:
<p-dropdown
[options]="sitBusinessPartner"
[filter]="true"
[(ngModel)]="businessPartner"
(onChange)="changeBusinessPartner()"
[autoWidth]="false"
></p-dropdown>
Edit, I suggest to use this:
.ui-dropdown.ui-dropdown-clearable .ui-dropdown-label {
text-overflow: ellipsis;
}
.ui-dropdown .ui-dropdown-label {
text-overflow: ellipsis;
}
In order to handle a possible text overflow and display a nice ellipsis like this:
This solution was adapted from here.
You can try this
html:
<div class="p-col-10">
<span class="p-fluid">
<p-dropdown></p-dropdown>
</span>
</div>
css:
.p-dropdown-panel {
left: 0 !important;
max-width: 100% !important;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
white-space: inherit;
}
Try this in css file.
:host ::ng-deep .p-dropdown {
width: 100%;
}
What I did and worked for me:
Using the grid system you can choose how many "columns" to display the element. For example, if you want to stretch 100% inside the container, consider that the element is occupying 12 columns, like in the code below:
<div class="p-formgrid p-grid">
<div class="p-field p-col">
<p-dropdown></p-dropdown>
</div>
</div>
But let's say you want to put another element next to it and want them to have the same width, you'd have something like that:
<div class="p-formgrid p-grid">
<div class="p-field p-col">
<p-dropdown></p-dropdown>
</div>
<div class="p-field p-col">
<element></element>
</div>
</div>
You can also have different widths for each element, based on how many columns they are occupying:
<div class="p-formgrid p-grid">
<div class="p-field p-col-7">
<p-dropdown></p-dropdown>
</div>
<div class="p-field p-col">
<element></element>
</div>
</div>
The sum of the columns has to be 12. If you said the first element is 7 columns long, the second will get 5 columns automatically. Try different values and see what works best for you.
The [autoWidth] attr was removed in v7 but I was able to achieve this with >7 version using styleClass="w-100":
<p-dropdown styleClass="w-100" ...>
"autoWidth" did not work for me, I just did this in my CSS:
p-dropdown {
min-width: 80%;
}
.ui-dropdown{
width: 100%;
}
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>
I am using Twitter Bootstrap and I am trying to get the layout as described in the title.
Please advise.
You can try something like this:
<div class="row-fluid">
<div class="span12">
<div class="fixed_width"></div>
<div class="variable_width"></div>
</div>
</div>
And CSS
div.fixed_width {
width: 300px;
// or try with: "float:left;" too
}
div.variable_width {
overflow: hidden;
// if you use float:left in the other, don't use overflow here, but try with: "width:100%;"
}
Here you can find a more general example (http://jsfiddle.net/glee/6Cavr/)
I'm using twitter bootstrap. It has collapse module.
I'm using it like this.
<a class="dropdown" style="float: right;" href="#collpasediv" data-toggle="collapse"> Collapse </a>
This is the collpasediv
<div id="collpasediv" class="collapse in">
<div class"circlecount">
1
</div>
<div class"content">
Some text goes here
</div>
</div>
I would like to move half of the circle of circlecount outside the collapsediv.
By default bootstrap applies overflow:hidden attribute for collapsediv.
I tried by applying overflow:visible for both collpasediv and circlecount. But collapse not working properly. Can anyone help me to fix it? Thanks
PS: Circlecount div is just to display numbers with some circled background image. I want the half of the circle outside collpasediv and half of the circle inside collapsediv.
Thanks
In the stylesheet for the twitter bootstrap there is the following declaration:
.collapse.in { height: auto; }
Add to it like this:
.collapse.in { height: auto; overflow: visible; }
Or overload it by adding a new declaration like this (leave the other declaration untouched in the bootstrap - this makes updating in the future easier):
.collapse.in { overflow: visible; }