I'm stuck in a css position, how can I make all alignment button of each column in same row? I'm using wordpress plugin and tried used css to select class name, but class name are specify for all button, please somebody help me out..
Try this
CSS
.vc_gitem_row .vc_gitem-col {
padding: 10px;
min-height: 300px;
}
.vc_btn3-container.vc_btn3-left {
bottom: 0;
position: absolute;
text-align: left;
}
Note: You should scope this changes so they don't affect other sections of the site
Without seeing the code this is a bit difficult to answer, but I would take a look at setting min-height for the description above the buttons. Then it would at least push all the buttons to be aligned in a row. You would have to go even further setting some media queries to improve this styling when it comes to mobile.
Either you need to set height of Text container
max-height: 100px; //as your requirement
or set button wrapper style property
bottom:0px;
Set a min-height value for product text content just above the button in product card.
Related
I want to make the ngx bootstrap datepicker inline instead of it appearing only when you click an input.
ngx datepicker link
Can someone help me achieve this? I've tried to add it in but there is absolute positioning and if I override it with relative positioning it doesn't work properly.
I just want to see this on the page inline without the need of having it inside an input field box:
Thanks
There is a container input in the documentation which says:
container: A selector specifying the element the datepicker should be appended
to. Currently only supports "body".
Any way to get around this?
try this, set the height to 0 with overflow: hidden an leaving it on the page. It'll be there so the picker with position itself correctly but with no height the input will be invisible and still have the picker show up where its supposed to.
And you can set the isOpen property to true so its opened by default
<input bsDatepicker [isOpen]="true" style="height: 0; overflow: hidden; border: none; padding: 0;" />
in you global css style.css file give
bs-datepicker-container {
position: relative !important;
left: 0 !important;
top: 0 !important;
}
!important is required to coz it is having element level style so you need to override it.
Obvious: make toggle disable and show permanently.
I am trying to show bootstrap tooltip in ag-grid cell on hover. Issue is it's showing up partially while part of the tooltip is behind the next column cell. I tried setting z-index for tooltip. But still not able to succeed. Kindly help.
In ngx-bootstrap documentation:
When you have some styles on a parent element that interfere with a tooltip, you’ll want to specify a container="body" so that the tooltip’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with overflow: hidden
You can use the attribute container="body" to solve the problem
You can use CSS tooltips, which will work inside agGrid cells. Please take a look at this plnkr: tooltip in agGrid cell
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: fixed;
margin: 10px 10px 10px 10px;
}
I was able to solve this one by adding the following CSS
[col-id=health].ag-column-hover: {
overflow: visible
}
for angular5+ with ng-bootstrap use container="body"
Try using tooltip-append-to-body="true" option for bootstrap tooltip.
For me this worked, Add below css to your file.
All credit goes to https://stackoverflow.com/a/46007051/16456741
.ag-sparkline-tooltip {
position: fixed;
}
I am having a lot of trouble getting my button in a BigCommerce theme to vertically align to the bottom. Since it is a responsive design, absolute positioning doesn't quite get the work done. Unfortunately it is the only thing that seems to move the buttons at all; I've tried all sorts of methods with relative positions and the vertical position will not budge. It seems that the products are listed within a list that functions as a table.
Here is the css for the button itself. I added the stuff below "border" and have tried many different ways as well as tried changing display to inline-block.
.product-grid .ProductActionAdd .button {
display:block;
background: #424546;
border: 1px solid #303334;
position: relative;
vertical-alignment:bottom;
bottom:0;
}
I can provide css for the other parts as well. Below is basically what I'm trying to fix. Those with 1-line product names would have the "in stock" button moved up.
image of buttons and problem
Without the full HTML/CSS or a jsFiddle it's going to be difficult for me to provide you with the complete HTML/CSS solution, but here's what will fix the problem:
Wrap the button and description inside of an element and set position:relative on that wrapper element
Give the buttons the following style: position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 5px;
Set the description to a fixed height and give the wrappers a fixed height
That should solve your issue. Here's an example
Newbie question here. I have a navigation bar with padding in all of my li's, and I want to be able to target the ahref when you click in the padding. Would this be done with onclick/javascript for each li? or is there a simple CSS method?
Also I have a search bar, that I want to focus by clicking on it's padding as well. I assume this would require a similar method.
First, you must set display:inline-block as a property for your links. Then, remove the padding from your list-item and apply it to the links.
Your CSS should reflect the following:
li a {
display: inline-block;
padding: 10px;
}
Here's a fiddle for a working example.
maybe you could specify:
li.someclass a {
display: inline-block; //or display:block;
width: 100%;
height: 100%;
}
(remember to specify width/height of parent container aswell)
not sure if i got you right though
Set the padding to the anchor instead of to the li.
See http://jsfiddle.net/FBsKH/ and compare.
About the search bar, can you post some code?
If I add padding to a <input type="text" /> and I click it on it's padding, it gets focus (tested on Firefox and Chrome). See it here: http://jsfiddle.net/fnsRu/
Edit:
Ah, now I understand what you want with the search bar.
The problem is that AFAIK with CSS you can't set focus to an element.
Then, you can:
Remove paddings: http://jsfiddle.net/fnsRu/3/
Use JavaScript: http://jsfiddle.net/fnsRu/4/
I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).
For some reason, Drupal adds a panel searator CSS class:
I tried to modify my CSS file as following:
.panel-separator { display: none; }
but it only produced this:
There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.
How do I get the button to align horizontally? Thanks.
Update
I have set a lot of width and I also added float: left;:
.GYPO_social_buttons {
padding-top: 91px;
width: 200px;
float: left;
}
.GYPO_share_this {
width: 90px;
}
.GYPO_google_plus_one {
width: 40px;
}
Here is the enclosing div according to firebug (I am using Firefox):
Update II
Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!
.GYPO_share_this {
width: 90px;
float: left;
}
.GYPO_google_plus_one {
width: 40px;
float: left;
}
You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn't have enough width to accommodate this next to mail icon.
From the portion of html and css you are providing it is a little bit difficult to find out what would be the best way to do this. The question is what generates the break. It could be that the parent element is not wide enough to and the +1 needs to be below. In that case you can simply change the width. It could also be that there is css that generates a break (e.g. display: block and no float for on eof the elements) In that case you might try to change that to display: inline or a float: left for the buttons. There might be a clear somewhere in there which would cause the float to break (although it doesnt look like a clear on the image)
I suppose there are more possibilities than that...
I need to see more of your code. If you have tried to make your container larger to hold all of the icons and that didn't work, I would guess it was another element forcing the icon to the next line. Without more code, all I can do is make a guess...
I was in the same situation once. Here's what solved my problem:
You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.
For more info: https://www.drupal.org/node/579020#comment-8163459