I am using horizontal bootstrap card and I want to align a text at the end of the second column. I tried to use card-footer but it doesn't seems to work example. Is there a way to achieve this.
card-body and card-footer only automatically align themselves properly, and as Bootstrap's example shows when they are directly under the card class. However given your layout, you'd need the col-md-8 to be a flex with column direction.
So add the classes d-flex flex-column to your col-md-8 and your footer will stick to the bottom of the second column. JSFiddle
Related
Is there a way in Vaadin 7 or Vaadin 8 to move the save/cancel buttons to under the last editor column? Or maybe to left justify them? Right now they are right justified under the last column. I would even take left justifying them under this same column. Visually, it is far from the last thing the users edited, so some users get confused. The way I am clarifying it for users right now is by making the Grid as narrow as possible, but it wastes screen real estate.
This will be very difficult in generic case, where column widths can be freely adjusted or their widths are automatically calculated by content. However if you set your columns fixed widths, so that you can make assumptions based on that within your specific application, there is a solution.
Just noting, that the Editor has div, with class name "v-grid-editor-footer", which has the same width as the Grid. So the editor footer does not have logical cells, that would be aligned with Grid's cells. And that is the challenge here. Furthermore the buttons you are refering to are wrapped in a child div of the previous one, with class name "v-grid-editor-buttons"
However you can try to add css rules in your theme in the following way.
.v-grid-editor-buttons {
position: relative;
left: -300px; // Adjust this value experimentally so that it fits your need
}
Below is a screenshot the css applied to Vaadin's Sampler.
I am new to angular material. From angular material doc i can see it can be positioned 'start' or 'end'.
<div style="border:solid 1px red;">
<mat-sidenav-container>
<mat-sidenav class="sidenav"
position="end" <!-- want to position top or bottom here-->
[opened]="sidenavOption.open"
[mode]="sidenavOption.mode">
Sidenav content
</mat-sidenav>
<ng-content></ng-content>
</mat-sidenav-container>
</div>
I would like to position 'top' or 'bottom'
Can anyone help me how to do this?
Thanks
AFAIK the sidenav as the name suggests can only be present on the right (end) or left (start) side of your page. Even though the material design specifications allow a bottom drawer (here).
As stated here there is no other property than position to specify the position other than left or right.
It seems that you would either need to make your own implementation of such a drawer -But for that you can extend from the material design classes and build upon them- or you could use a MatBottomSheet, which is almost the same, but can only be used as a kind of bottom drawer.
I got my parallax effect to work perfectly on my laptop screen size. As soon as I viewed my site on a larger screen I noticed the parallax effect was not finishing because there was not enough room to scroll down. How do I fix this issue? Below is a snippet of my code showing two of the elements moving as I scroll down. I am using data attributes to transform. Should I be using something else? You can view my site here http://nsohail.github.io/Project3-HTML/
<div id="slide-1" class="slide"
data-0="transform:translate(-770px,0px);"
data-10p="transform:translate(-770px,0px);"
data-100p="transform:translate(185px,0px);">
</div>
<div id="slide-1" class="slide"
data-0="transform:translate(770px,0px);"
data-10p="transform:translate(770px,0px);"
data-100p="transform:translate(-220px,0px);">
</div>
Instead of using 100p (percentages) use pixels so it will end at an exact spot no matter what the screen height is. So adjust your percentages to just numbers. For example data-0, data-10, data-100.
I am wondering in MVC(ie 3) + Razor, could we make partial view have the same effect as iframe? For example right side scroll bar, fixed height, etc.
Thanks a lot!
You can make use of CSS overflow, overflow-y and overflow-x properties to achieve the points you gave examples for (right side scroll bar, fixed height), making sure to include a height style or even width if required.
.partial-view-container
{
height:400px;
overflow:scroll;
}
The possible values for the overflow properties are
visible (default)
hidden
scroll
auto
So I guess your Razor markup would look something like this
<div class="partial-view-container">
#Html.Partial("InnerPartialView")
</div>
Further explanation at css tricks or w3schools
I am using jquery-ui draggable. When I drag my box to beyond the bottom of the screen, the body shifts down. How can I prevent this from occurring?
Tried...
I have tried making the draggable to be containment: "*tag*" where tag is html or body.
Still trying containment, I have tried surrounding the layout with a div, however, this breaks the layout scroll-ability of LHS, RHS and center.
The problem is solved by making the body - position: static !important. This then breaks the layout.
For reference, here is the jquery-ui draggable page.
Css Layout
I have a layout which is header, fixed-height-footer, left and right fixed-width-scrollable, fluid center-scrollable. The header and footer is achievable using a large body border hack. See this question for information on the layout. How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?
Reproduction of the problem.
Here is my Fiddle: http://jsfiddle.net/valamas/LrXCA/
Please click and drag the blue box below the footer to see a black band or a further pink band.
Pass scroll: false to your draggable constructor.
By default the auto-scroll option is set to true, if you don't want it, you have to specify scroll: false when creating the draggable. See scroll option on the jQuery draggable page.
Working jsFiddle