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; }
Related
html
<div class="xxx">
<div class="xyz" ng-repeat="item in formList">
<div ng-show="formList.indexOf(app)!= -1" class="added-item">
<img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
</div>
</div>
<div class="abc" ng-hide="formList.length>20">
<button class="btn" ng-click="addItem()">
Add<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
css
.xxx {
width:500px;
height: 80px;
}
.added-item-icon, .abc {
width: 50px;
height: 50px;
}
I'm not good in css, and have only very basic knowledge
I am trying to add some list of items in a horizontal tab of height 80 and width 500 pixels, also an add app button too
As per the code, the add app button disappear when we add the 20th app
what I need to do is, lets say the xxx div(horizontal div) can have 5 items, after which overflow occurs
I want to set the overflow horizontal, not vertical
also at that stage(when 5 items are added), I want to fix the add app button at the very right of the division xxx, and the scroll due to overflow should not affect that button, it should be fixed there
we doesn't need to care more about the size of the item icons or add button,
Please help
For this you'll want to look into using flexbox. To get this working, all you really need to do is add display: flex; flex-direction: column to your container, and then overflow-y: auto to the section you want to scroll.
Heres a Plunker demonstrating it.
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 am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
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 have this html:
<div class="speaker-list">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">
Keith Anderson
</span>
</div>
<div class="views-field views-field-field-job-title">
<div class="field-content">VP, Digital Advisory</div>
</div>
<div class="views-field views-field-field-company">
<div class="field-content">RetailNet Group</div>
</div>
<div class="views-field views-field-title-1">
<span class="field-content">
Store of the Future
</span>
</div>
<div class="views-field views-field-field-headshot">
<div class="field-content">
<div id="file-53" class="file file-image file-image-jpeg contextual-links-region">
<div class="content">
<img typeof="foaf:Image" src="/kanderson.jpg" width="180" height="180" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's dynamically generated by a Drupal view, so I can't change the output html at all. I need to work with what is here. Here's the desired result:
Without any styling on the headshot, this is what it looks like:
I tried to style the image to force it to float to the left of the text:
.view-speaker-list div.view-content div.views-row div.views-field
div.field-content div.file-image div.content img {
border: 1px solid #666;
float: left;
position: relative; /* tried with and without position (inc. absolute) */
left: 30px;
}
Obviously I'm doing something wrong, because this is what I get (with relative position):
and with absolute position:
I've also tried putting the float on the "uppermost" div class that holds the image, with no position on the div:
.view-speaker-list div.view-content div.views-row
div.views-field-field-headshot {
float: left;
}
It gives the same result as the position: relative screenshot.
Where am I going wrong? If I had control over the html I'd do it differently, but I'm not sure how to deal with all of these nested divs.
EDITED TO ADD NEW SCREENSHOT FOR #WEX
Here's what it looks like when I tried to use your code with the html reordered - http://jsfiddle.net/mPa7z/
I'll try to explain the "right" way to use float so that you can see why your way didn't work.
In your post, you try to apply float: left to the <div> surrounding your image, but that technique only works when the element you are floating is above all the elements you want to wrap around it. That "may" solve your problem, but that technique has it's pitfalls if you're trying to use it to create two distinct columns - if the text on the right is taller than the floated element, the text on the right will wrap below it. So then you have to add another container around your non-floated elements to ensure that it won't wrap. This solves your problem, but doesn't really help if you can't even edit your markup!
I'd argue that the technique I've posted below works better, and solves your problem: http://jsfiddle.net/Wexcode/AQQwX/
.view-content {
position: relative;
min-height: 180px;
padding: 0 0 0 180px; }
.views-row { padding: 20px 0 0 20px; }
.views-field-field-headshot {
position: absolute;
top: 0;
left: 0; }
If you have access to the View itself in Drupal, you can reorder the elements. When logged into Drupal, open the View (in Drupal 7: Structure > Views > Viewname), look for "Fields" and click on the triangle next to "add", which will have a popup, then click "rearrange". You can then drag the photo field to be the first item in the View, then adjust your CSS to float the image to the left.
EmmyS,
Instead of trying to get the headshot to float:left, have you considered making the others float:right? This will give the impression that the image is floating left without having to change the markup in any way.
div.speaker-list div.views-row > div.views-field {
float:right;
clear:both;
}
div.speaker-list div.views-row > div.views-field.views-field-field-headshot {
float:none;
clear:none;
}
The above CSS should work with that specific configuration without altering any of your other Drupal generated markup. In order to make sure that other CSS does not interfere, I've applied as much specificity as possible. Since the headshot will be back in the containing <div>, you shouldn't need to alter the size of it unless the store is simply too large (I don't know without looking at your data). Finally the CSS is concise, so you can add any additional styling you need on a per-element basis.
Hope this helps,
FuzzicalLogic
When you can drop somewhere else on the page some code, you can gain control over the HTML by using jQuery. Then you could make modifications to the DOM tree.
But I do not understand why you can not edit the HTML. Isn't Drupal open source? You should be able to find the file using FTP and manipulate it.