I have a header row in a google chart with text wrapping (which i know is the issue with the new api removing it) that is losing the background color when the user scrolls down.
When i have text wrap off, the header row background persists, but the view becomes unpleasant to look at because the table is now so wide and requires a horizontal scroll bar.
this is a good example of the problem. you will see what happens when you scroll down the records in the resulting table
http://jsfiddle.net/asgallant/VTK3g/5/
is there some way to define the css to keep that header row with the background color? Or any other way outside of this construct?
.google-visualization-table-tr-head-nonstrict {
font-weight: bold !important;
text-align: left !important;
font-size: 12px !important;
width: 600px !important;
background-image: white !important;
}
.tableRowGoogle {
border: 1px solid #EEE;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px;
border-width: 1px 0px;
}
.headercellgoogle {
padding: 6px;
width: 150px;
}
.rowcellgoogle {
border: 1px solid #EEE;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px;
border-width: 1px 0px;
width: 100%;
}
.rowNumberCell {
border: 1px solid #EEE;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px;
border-width: 1px 0px;
text-align: right;
width: 15px;
}
and before drawing:
var options=null;
if(data.getNumberOfRows()>7){
options = {
width : 600,
height:235,
sort : 'enable',
sortColumn : 1,
sortAscending : false,
scrollLeftStartPosition : 50,
showRowNumber : true,
chartArea : chartArea,
cssClassNames : cssClassNames
};
}else{
options = {
width : 600,
sort : 'enable',
sortColumn : 1,
sortAscending : false,
scrollLeftStartPosition : 50,
showRowNumber : true,
chartArea : chartArea,
cssClassNames : cssClassNames
};
}
I just stumbled across the answer.
adding background-color to
.headercellgoogle {
padding: 6px;
width: 150px;
background-color: blue !important;
}
within the css has fixed this issue
Related
I am creating some ionic3 small application. I tried to create like as whats app status page. I added ionic text area for that. but text input cursor not in a begin typing in middle. Does anyone know how to do that correctly?
Html
<ion-content>
<textarea #myInput id="myInput" rows="7" maxLength="300" (keyup)="resize()" [(ngModel)]="myStuff" text-center placeholder="Notifictaion here..."></textarea>
</ion-content>
css.
#myInput {
width: calc(100%);
border: 0;textAlignVertical: 'center';
border-radius: 0; font-size: 2rem;
background: #3e50b4; color: white;
}
you can understand my issue look at my attached image
Issue
I want to like this
Finally i do that , i put hsome padding for my css padding: 100px 10px 100px 10px; now its work for me
before
#myInput {
width: calc(100%);
border: 0;textAlignVertical: 'center';
border-radius: 0; font-size: 2rem;
background: #3e50b4; color: white;
}
then
#myInput {
width: calc(100%);
border: 0;textAlignVertical: 'center';
border-radius: 0; font-size: 2rem;
background: #3e50b4; color: white;
padding: 100px 10px 100px 10px;
}
I'm trying to achieve an input field with an underline. As it is visually more appealing to me, I'm trying to make underline as close as possible to the font. I did achieve the closeness, but now, input field cuts tail parts of the letters with tails. Is there a possible workaround for this? Can I cancel input's this behaviour with something like "overflow: visible"? Or may I draw a fake line over the input field, instead of using border-bottom? Thanks in advance.
In short, I'm trying to make text get through the bottom line.
Here is a screenshoot about the problem.
Here is my current class:
.kk_input {
border: 0;
border-bottom: 1px solid #000;
outline: none;
font-size: 20px;
height: 20px;
margin-top: 5px;
}
Without seeing the rest of your markup, this should give you an idea enough to go off of.
.kk_input {
border: 0;
outline: none;
font-size: 20px;
}
div {
position: relative;
}
div:after {
position: absolute;
content: "";
bottom: 4px;
left: 0;
height: 1px;
width: 100%;
background-color: black;
}
<div>
<input class="kk_input" type="text">
</div>
You can use more than one box-shadow to create this effect.
.so49204829_input{
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
box-shadow: inset 0 -11px 0 #fff, inset 0 -12px 0 #000;
}
<input type="text" class="so49204829_input">
& here's another approach using a second element. Unfortunately, you can't add an :after pseudo-element to input elements (at the time of posting).
.so49204829_input {
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
width: 200px;
display:block;
}
.so49204829_input_accent {
margin-top: -14px;
height: 1px;
width: 208px;
background-color: #000;
pointer-events: none; /* this makes sure click events aren't intercepted by the accent-line element */
}
<input type="text" class="so49204829_input"><div class="so49204829_input_accent"></div>
TLDR;
I have a CSS input form which consists of 4 number inputs for each direction and it sets margins. When I submit auto, auto margins make element positioned in center horizontally. When I give 0px, It sets it to 0px which is really a value of "0px", and it doesn't provide an auto like untouched property. Is this possible?
I wondered if there is something like this: For example I have a CSS definition like this:
border-width: 4px;
and on some case I want to change the width of only left and right borders:
border-left-width: 2px;
border-right-width: 2px;
Instead of writing this, I can't write these:
border-width: initial 2px;
border-width: inherit 2px;
border-width: unset 2px;
because they seem to be invalid values in chrome developer tools.
Is there anything else I can use to do this?
function toggleClasses(){
document.querySelectorAll(".div").forEach(function(elem){
elem.classList.toggle("toggled");
});
}
.div {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
background: #eee;
border-color: #333;
border-width: 4px;
border-style: solid;
}
.div.div-1.toggled {
border-width: initial 2px;
margin: initial 10px;
}
.div.div-2.toggled {
border-width: inherit 2px;
margin: inherit 10px;
}
.div.div-3.toggled {
border-width: unset 2px;
margin: unset 10px;
}
<div class="div div-1"></div>
<div class="div div-2"></div>
<div class="div div-3"></div>
<input type="button" onclick="toggleClasses();" value="Togggle" />
I am trying to build a login form, however the submit button, remember me checkbox, and remember me label are not being properly formatted. Currently, the label is on the left, and then the submit button and checkbox. I would like it so that the label and checkbox appear after the submit button. I am using Jade for the template engine. I would also like the solution to work properly on mobile browsers.
Jade
doctype html
html
head
title
| Log In
meta(charset = "UTF-8")
meta(name = "viewport" content = "width = device-width, initial-scale = 1.0")
link(rel = "stylesheet", href="/stylesheets/login.css")
body
form#logIn(name = "logIn", method = "post", action = "/login")
p#loginMessage Title
label(for = "handle") Username:
input#handle(type = "text", required = "required", name = "handle" maxlength = "20" value = handle)
br
br
label(for="pass") Password:
input#password(type = "password", required = "required", maxlength = "60" name = "pass")
br
br
div#submitDiv
button#submit(name = "submit") SUBMIT!
label#rememberMe(for = "rememberMeCheckbox") Remember Me:
input#rememberMeCheckbox(type = "checkbox", name = "remember")
br
br
div#errorMessage #{errorMessage}
CSS
#loginMessage {
font-size: 30px;
text-align: center;
color: #FFFFFF;
}
form {
font-weight: bold;
font-family: courier;
font-size: .875em; /*14*/
margin: auto;
width: 90%;
height: 80%;
border: 1px solid #FBFF06;
background: #EFBA00;
-webkit-border-radius: 3.125em; /*50*/
-moz-border-radius: 3.125em;
border-radius: 3.125em;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
}
label {
display: block;
float: left;
width: 15%;
padding-left: 3%;
padding-right: 3%;
}
input[type="text"], input[type="password"] {
width: 50%;
}
#errorMessage {
font-weight: bold;
font-family: courier;
font-size: 1em;
text-align: center;
}
div#submitDiv {
text-align: center;
display: inline;
}
button#submit {
width: 10%;
background: #FBFF06;
color: #000000;
border: 2px solid #BC8507;
height: 25px;
font-weight: bold;
}
label#rememberMe {
width: 15%;
}
input#rememberMeCheckbox {
width: 10px;
margin: 0 auto;
}
Your label has a float: left style applied to it which is why it's not displaying in the same order as your HTML.
You need to remove the float for just that label and display it as inline to keep everything all on the same line.
label#rememberMe {
width: 10%;
float: none;
display: inline;
}
Check this fiddle: http://jsfiddle.net/ap68p5zg/1/
I also added a min-width to your Submit button so it won't cut off the text and a margin for alignment.
button#submit {
width: 10%;
background: #FBFF06;
color: #000000;
border: 2px solid #BC8507;
height: 25px;
font-weight: bold;
margin-left: 3%;
min-width: 75px;
}
I'm try to display two rows of six columns and have them shrink when the browser window shrinks. The original css displays number of columns depending on the image size, each image floating left, so for different screen sizes I end up with large spaces.
.ngg-albumoverview {
overflow: hidden;
margin-top: 1px;
margin-left: 0px;
width: 100%;
clear:both;
display:block !important;
}
.ngg-album {
float:left;
height: 100%;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #fff;
}
/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
overflow:hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-album {
overflow: hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-albumtitle {
text-align: left;
font-weight: bold;
margin:0px;
padding:0px;
font-size: 1.4em;
margin-bottom: 0px;
}
.ngg-thumbnail {
float: left;
margin-bottom: 10px;
margin-right: 2px;
text-align: center;
font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}
.ngg-thumbnail img {
background-color:#A9A9A9;
border:0px solid #1D1D1D;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}
.more {
width: 100%;
background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.ngg-thumbnail:hover {
background-color: #333333;
}
.ngg-thumbnail img:hover {
background-color: #FFFFFF;
}
.more:hover {
background-color: #333333;
}
.ngg-description {
text-align: center;
}
When I add this css to .ngg-albumoverview it displays six columns ok and shrinks them, but the second image is placed under the first, instead of alongside, with the third image alongside the first.
columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
CSS columns are just segregations of the page and flow the same as the rest of the page. Your images are laid out like this:
[1][3][5]
[2][4][6]
because the flow of a page goes top to bottom and expands as necessary depending on element widths.
Your images will not be in the order you want unless you remove the columns and replace it with a responsive grid. If you want the images to appear like:
[1][2][3]
[4][5][6]
you need to adjust your .ngg-thumbnail widths to be a percentage (that incorporates the margin, border and padding spacing in between and adds up close to 100% between 3 of them), float them to the left and give your .ngg-thumbnail img a max-width: 100%; and height: auto;. Be sure to float the .ngg-thumbnail parent element and not the img or they will be removed from the document flow and not line up with the grid unless you perfectly size everything (and you don't want that).
Almost forgot - make sure you add a clear: left; on the 4th image if your widths don't add up to 100% so it starts on a new line by default. You can select the 4th image with:
.ngg-thumbnail img:nth-of-type(4);
Here is a good resource for you if you'd like an enjoyable way to learn more about this.