I need a textarea as follows :
You can use linear gradients:
textarea{
background-attachment: local;
background-image:
linear-gradient(to right, white 10px, transparent 10px),
linear-gradient(to left, white 10px, transparent 10px),
repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
line-height: 31px;
padding: 8px 10px;
width: 500px;
}
<textarea></textarea>
Related
I am trying to create a component that I can insert as a vertical line between flex box columns. I need the height to be dynamic. I am setting the height=100% and setting align-self: stretch(because the flexbox is a row). Nothing is happening. The div gets a height of 0
This is the component
import styled from 'styled-components'
export default styled.div`
border-left: 3px solid gray;
height: 100%;
align-self: stretch;
width: 1px;
display: block;
margin-left: 20px;
margin-right: 20px;
`
And this is how I inject it
<VerticalLine></VerticalLine>
If I add some content to the component, then the line is only as tall as the content
<VerticalLine>a</VerticalLine>
You can remove the height, because flex is adjusting the height by themself:
.verticalLine {
border-left: 3px solid gray;
align-self: stretch;
width: 1px;
display: block;
margin-left: 20px;
margin-right: 20px;
}
See my example on jsFiddle
I moved some gradient button styles into a mixin and now the hover styling is incorrect. The hover state should apply a background offset with the gradient over the top but when used as a mixin it is being applied in the reverse order i.e., the offset is applied on top of the gradient, making the button look like it is two different solid colors. What's the correct way to apply these styles using a mixin?
Styles
.btn-primary {
background-color: hsl(98, 35%, 73%) !important;
color: #333 !important;
.btn-gradient(#ebf3e6, #b3d2a2);
}
Mixin
.btn-gradient(#startColor, #endColor) {
border-color: #endColor #endColor hsl(98, 35%, 68%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#startColor, endColorstr=#endColor);
background-image: -khtml-gradient(linear, left top, left bottom, from(#startColor), to(#endColor));
background-image: -moz-linear-gradient(top, #startColor, #endColor);
background-image: -ms-linear-gradient(top, #startColor, #endColor);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #startColor), color-stop(100%, #endColor));
background-image: -webkit-linear-gradient(top, #startColor, #endColor);
background-image: -o-linear-gradient(top, #startColor, #endColor);
background-image: linear-gradient(#startColor, #endColor);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33);
-webkit-font-smoothing: antialiased;
&:hover {
background-position: 0 -15px;
}
}
Mixin hover
No mixin hover
Turns out I was missing background-repeat: repeat-x; from the mixin.
I have a ion modal which i want to show of 60% of my screen, but when keyboard appears the modal resizes to 60% of the screen (including keyboard) so it shrinks a lot. I want the modal to stay the same size (ideally the size of its contents). Pictures explain a lot.
This is the css
.ion-modal.modal {
width: 90%;
min-height: 0 !important;
height: 60% !important;
top: 5%;
left: 5%;
right: 5%;
bottom: 5%;
background-color: #fff;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); }
And this the html
<ion-modal-view id="details_modal" class="ion-modal">
STUFF
</ion-modal-view>
I fixed this issue using <ion-content overflow-scroll="false"></ion-content>
overflow-scroll="false"
fix the issue for me.
These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.
I have a popover in a plnkr that is working, but it's positioning is messed up. It is being cut in half by the page.
When I inspect the popover's CSS, I see some code which doesn't make any sense to me. I understand what it's doing, but where are these element.style properties coming from? They seem to be the problem.
element.style {
top: -139px;
left: 112px;
display: block;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
line-break: auto;
}
There isn't even a scroll option available. Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?
In the element where you whant your popover displayed, add the following directive:
popover-append-to-body="true"
Like this:
<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
[{{form.status}}]
</small>
The element styling is set in the source of UI Bootstrap in the tooltip section.
Tooltips and popovers are not meant to store that much data which is why they just center it over the element that it is attached to.
EDIT
For this specific example you can add this CSS:
.popover-parent + .popover {
top: 0 !important;
}
.popover-parent + .popover .arrow {
top: 15px !important;
}
The most dynamic way would be to hook into the event that shows the tooltip and calculate the position of the popover then.
I have a grid which has long phrases as header texts. These texts are never displayed properly in the available width for the column.
Is there any way these texts can be wrapped and limited to the column width?
Here is an image of the issue:
Give this a shot in your CSS:
.x-grid3-hd-inner {
overflow: hidden;
padding: 3px 3px 3px 5px;
white-space: normal;
}
And additionally, another option if the first doesn't work:
.x-column-header-inner .x-column-header-text {
white-space: normal;
}
.x-column-header-inner {
line-height: normal;
padding-top: 3px !important;
padding-bottom: 3px !important;
text-align: center;
top: 20%;
}