I would like to make the width larger of the input[type=file] if an image has not yet been uploaded. Here is what I've been trying:
input[type=file] img[src=""] {
width: 300px;
}
The input[type=file] and img[src=""] work when alone but I can't get them to work together.
Please try below code:
input[type="file"] {
border: 1px solid #ccc;
border-radius: 4px;
width: 300px;
}
Related
I may be missing something simple but I cannot change the background color of the chart using chartist.js
.ct-grid {
background: black;
background-color: black;
stroke:black;
fill:black;
}
I am trying to change just the grid area, not the entire area hence I am not using ct-chart ct-golden-section
Any ideas?
The below might give you an idea of how to proceed .. maybe use some css like the calc() to find the right sizes so that you don't set them statically
.ct-golden-section:before {
display: block;
float: left;
content: "";
width: 100%;
height: 413px; //set as the size of the container
padding-bottom: 449px; //set as the size of the container
background: yellow; // set the bg color wanted for the container
border-style: solid;
border-top-width: 15px;
border-left-width: 49px;
border-color: orange; // choose the color of the page u have
border-bottom-width: 25px;
border-right-width: 39px;
}
Check the screenshot to see the result of the above:
https://drive.google.com/file/d/15-vuRMXn2NspkNWfIuvcEZ8xxOEUeEgd/view?usp=sharing
Please anyone feel free to edit my temporary solution
From version 0.11.4 you can use option showGridBackground: true and then set from css.For example
.ct-grid-background {
fill: aliceblue;
}
You can read more information there
I have simple css and html code and i wondering why last vertical image not working. I mean it border and margin should be added to last element not first.
Is anyone knows why this not work?
See in https://jsfiddle.net/st2Lwrgj/
* {margin: 0; padding: 0;}
.wrap {width: 250px; border: 1px solid red;overflow:hidden;}
img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
img.vertical {
width: 45%;
float: left;
margin-right: 10px;
}
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
:nth-child(even) will apply to every second image (second, fourth and so on). When you insert a horizontal image without the .vertical class you will break this order.
The following is a bit of a workaround, but the logic is pretty simple.
First we select every second image using img.vertical:nth-child(even)
We then find images without the .vertical class using:not(.vertical)
We then use the general sibling selector to select the following images and revert the order using img.vertical:nth-child(odd) instead of even.
As we have now applied borders to both odd and even ocurances of img.vertical, we need to remove the styling from the images we selected at point 1. We do this with a selector as set in point 3, but with even instead of odd: img:not(.vertical) ~ img.vertical:nth-child(even)
TLDR; change this part:
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
Into the following:
img.vertical:nth-child(even),
img:not(.vertical) ~ img.vertical:nth-child(odd) {
margin-right: 0px;
border: 2px solid blue;
}
img:not(.vertical) ~ img.vertical:nth-child(even) {
margin-right: 10px;
border: 0;
}
You can see how this works in this fiddle.
I need to create this kind of divider (the vertical line before browse and avatar). I don't want to use images, so is there a way to make in css?
I have tried:
.hr_v {
width: 1px;
height: 80px;
border: 0;
border-left: 1px solid;
color: gray;
background-color: gray;
}
The css shall be applied on the floated div, not a hr tag.
hr cannot be applied vertically Is there a vr (vertical rule) in html?.
You need to only set the border-left and add the border color since it was missing in your code, you can also add a left padding for better view :
#floatingAvatarDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
or create a class since you need it for both divs :
.leftBorderDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
and add it to your menu container and the avatar container divisions
You could use :before
.avatar {
position: relative;
height: 80px;
border-left: 1px solid gray;
}
.avatar:before {
position: absolute;
top: 0;
bottom: 0;
left: 1px;
content: '';
width: 1px;
background-color: #333; /* different gray */
}
In case your "Browse" button's container is bigger, you may get longer borders. In such case, you may simply try a "|" (a pipe) in a span before the "Browse" button and style to however you want. In this case, you wont have to use a lot of css styling.
If I define the following CSS rule:
img {
max-width: 200px;
max-height: 200px;
border: 1px solid black;
}
Is there a pure-CSS way of detecting those image objects that would have been larger without the size constraints? Something that semantically matches:
img:resized {
border-color: green;
}
Alternatively: is there a way of only detecting large images in the first place? For example:
img {
border: 1px solid black;
}
img[width>200px], img[height>200px] {
max-width: 200px;
max-height: 200px;
border-color: green;
}
Thanks!
No, there are no CSS selectors that can query style properties, whether declared or computed, as rendering of DOM elements has no relation to the DOM hierarchy.
I am writing a web application (While learning JSF from scratch, and thanks to this site I was able to do this).
I have managed to get pretty far but there is something I can't figure how to approach to.
Currently I have this:
Link to full size screenshot
As you can see, I don't know how to place things where I want them.
At this point just stacking the buttons (sleep timer and message text) and the input-spinner at the top of each panel would suffice, but I would like to learn how to control this better. (Place each component at a chosen location inside the panel)
The JSP code:
<h:panelGrid id="ActionsPanel" styleClass="leftcol"
binding="#{actions.actionPanel}">
</h:panelGrid>
<h:panelGrid id="EditPanel" styleClass="rightcol"
binding="#{actions.editorPanel}">
</h:panelGrid>
And the CSS:
.leftcol {
display: block; width : 20%;
height: 300px;
float: left;
border: 1px solid #000;
width: 20%; height : 300px; float : left; border : 1px solid #000;
border-top: 0;
}
.rightcol {
width: 70%;
height: 300px;
float: left;
border: 1px solid #000;
border-top: 0;
border-left: 0;
}
Thanks!
Ben.
When writing CSS, don't look at JSF source code, but at its generated HTML output. The h:panelGrid renders a HTML table. You need to vertical-align the contents of the table cells td to top.
.leftcol td {
vertical-align: top;
}
.rightcol td {
vertical-align: top;
}