I have a fieldset with a legend on it like the following
<fieldset class="fieldsetStyle">
<legend class="fieldsetLegendStyle">
<div>
<h:outputText value="#{msgs.LABEL_AJOUTER_UTILISATEUR}"
rendered="#{gProfilCtrl.newUtilisateur}"/>
<h:outputText value="#{msgs.LABEL_MODIFIER_UTILISATEUR}"
rendered="#{!gProfilCtrl.newUtilisateur}"/>
</div>
</legend>
.
.
.
</fieldset>
when i set overflow property to auto in my CSS file the legend doesn't show properly. the top border disappear and this only in Chrome browser. firefox and IE work perfectly.
this is my css description:
.fieldsetStyle {
height: calc(100% - 2px);
border: 1px solid #bed6f8;
margin-left: 5px;
padding: 0 0 0 30px;
width: calc(100% - 37px);
margin-right: 0px;
overflow: auto;
}
.fieldsetLegendStyle {
border: 1px;
border-style: solid;
border-color: #BED6F8;
min-width: 199px;
height: 25px;
padding-top: 10px;
margin-bottom: 20px;
}
any ideas ?
UPDATE
when i don't set overflow:auto my panel overflows from the fieldset box.
You could try to wrap <fieldset> into a <div> and set the related styles on the div element.
Or perhaps, you can move the <legend> down one pixel to make the top border to appear.
.fieldsetLegendStyle {
position: relative;
top: 1px;
}
Related
Is it possible to automatically adjust the height to the content's height using only css without using javascript?
For Example, When the height of the is 200px, when the text inside is written only as much as 100px in height, I hope that there will be no blank space.
I want the height of the text inside the to affect the height of the itself. There is way to use javascript all over the internet. But I want to implement it using only css and html. I need help!
Here is my code.
.code-wrap {
margin-top: 8px;
border-radius: 8px;
background: #1e1e1e;
max-height: 400px;
}
.code-title {
border-radius: 8px 8px 0 0;
background: #242E64;
padding: 21px 24px;
}
.area-wrap {
padding: 21px 24px;
}
textarea {
border: 0;
resize: none;
width: 100%;
height: 300px;
outline: none;
font-size: 20px;
font-weight: 800;
color: #fff;
background: none;
font-family: 'D2Coding';
}
<div class="code-wrap">
<div class="code-title"><p>Result</p></div>
<div class="area-wrap">
<textarea
rows="15"
cols="50"
name="quiz-editor"
id="mainResultArea"
class="ed-result"
readOnly
>
</textarea>
</div>
</div>
Unfortunately, to the best of my knowledge, there is no great way of doing this using raw CSS or HTML. However, you can stray away from the textarea element and use the contentEditable attribute on a div or text element.
Check out this basic example & write in this sample text box:
div {
border: solid 1px;
padding: 5px;
width: 300px;
min-height: 50px;
overflow: auto;
}
<div contentEditable></div>
I have the following HTML code:
<textarea type="text" class="dlk_q" rows="2" cols="98%" name="q[]">
in a page that has other stylesheets but I added this CSS right before the textarea in my HTML:
textarea, .dlk_q {
width: 98%;
height: 50px !important;
}
however the height of the textarea appears to be much bigger than 50 (ie the height is ignored)
What can I do about this?
Option height will be ignored if there is also min-height that has bigger value, because this is was it was designed for.
Docs: https://www.w3schools.com/cssref/pr_dim_min-height.asp
Based on demo that you provided in comments, you have this block in CSS:
textarea {
font-size: 12px;
line-height: 21px;
color: #444;
border: 1px solid #e1e1e1;
width: 100%;
max-width: 100%;
height: 168px;
min-height: 168px; // HERE
padding: 6px 9px;
}
Like you see, there is min-height: 168px;.
All you have to do is to remove this, or overwrite it if for some reason you cannot do this.
textarea, .dlk_q {
width: 98%;
height: 50px !important;
min-height: 0 !important; // ADD THIS
}
Since there was a min-heigth setting I've reset it like this:
textarea {
min-height:initial; /* resets the value set by theme */
}
I made an input form that has horrible cross browser compatibility. I used browser specific CSS hacks to fix most of my issues but that got really complicated really fast and I don't want to keep going down that path.
The form is an 800px wide text input (785px width + 5px border + 10px padding) and 100px wide submit button, all inside a 900px wide div keeping them together.
The problem is that the text input width varies by 1px from browser to browser which causes the input button, which is located on the right of the text input, to get pushed down by the extra pixel. I fixed this for most browsers with browser specific hacks by changing the width from 785px to 784px but was wondering if there's something else I'm missing that's causing this.
Here is a JSFiddle.
CSS:
div.formdivholder {
width: 100%;
height: 70px;
padding-top: 20px;
}
div.formdiv {
width: 900px;
height: 70px;
margin: 0 auto;
}
input.text {
z-index: 20;
height: 38px;
width: 785px;
float: left;
padding-left: 10px;
border: solid;
border-width: 5px;
border-color: #3374DC;
border-right: 0px;
background-color: #F0F4FA;;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
}
input.submit {
z-index: 1;
height: 50px;
width: 100px;
float: right;
color: #F0F4FA;
font-weight: bold;
background-color: #3374DC;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-width: 0px;
}
HTML
<div class="formdivholder">
<div class="formdiv">
<form class="search" role="search" method="get" action="/searchresults.php">
<input type="text" name="input" class="text" placeholder="Search for">
<input type="submit" class="submit" value="Search">
</form>
</div>
</div>
Just use CSS box-sizing property, it is supported by all browsers and IE>=9. You would need to change the following (only):
input.text {
height: 50px;
width: 800px; /* OR even this: width: calc(100% - 100px) */
box-sizing: border-box;
....
}
Take a look in Fiddle.
Definition of the property value border-box:
The width and height properties include the padding and border, but
not the margin. This is the box model used by Internet Explorer when
the document is in Quirks mode. Note: Padding & border will be inside
of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px
solid black;} RESULT {rendered in the browser} .box {width: 350px;}
You can see these days people drop support to IE8, so at the start of CSS they simply put:
*, *:before, *:after {
box-sizing: border-box;
}
(and make their life easier).
try using % instead of pixel, should do the trick, later on you might have to do some responsive so the % will save you time on that one also
I used the calc property in an answer, but I have some troubles to compute the width % of an element with margins, padding and borders set in px
See this example:
#form {
margin: 200px auto;
width: 360px;
background:green;
padding:0
}
input[type="text"], input[type="password"] {
width: calc(50% - 42px);
margin: 10px;
padding: 10px;
border: solid 1px #000;
}
There is two inputs. I want that they fill completly their parent div.
My calculation is:
100%= (input_width + ( margin_width + padding_width + border_width ) * 2 ) * 2
=> input_width= 50% - 42px
but actually, the max width that I can use is 50% - 45px if I want that the 2 inputs stays at the same line. So What I forgot? http://jsfiddle.net/uL2syf4m/3/
The reason is because of the white space created by your markup and how it's treated by inline-block elements. Remove the line break and tabs between your two input elements and you can then set width: (calc(50% - 42px);. More details HERE
FIDDLE
you need to make them float to make it work.
#form {
margin: 50px auto;
width: 360px;
background:green;
padding:0
}
#form::before, #form::after{
content: " ";
display: table;
clear: both;
}
input[type="text"], input[type="password"] {
float:left;
width: calc(50% - 42px);
margin: 10px;
padding: 10px;
border: solid 1px #000;
}
<div id="form">
<input type="text" id="input1"/>
<input type="text" id="input2" />
</div>
Here is the jsfiddle:
http://jsfiddle.net/uL2syf4m/4/
I am using the hover event over a <div> to make an additional description about the element appear.
The problem is that when you hover on a <div> it shifts the others around. Basically I would like everything else to stay in place and the word blob to just appear over the top of them.
Here is an example of a jsfiddle outlining the problem
How can I change it so the other blocks do not shift?
Your extra_info needs to be positioned absolute to the block div
.link{
position:relative;
margin : 2em 0em 2em 1.5em;
float: left;
width: 10.4em;
min-height: 17em;
max-height: 18.5em;
text-align: center;
padding: 0em 0.1em 0.1em 0.1em;
background-color: #276277;
}
.block { position:relative; float:left; }
.extra_info{
z-index: 900;
position: absolute;
top: 30px;
left: 30px;
display: none;
width: 275px;
background: #FFFFBC;
border-style: inset;
border-width: 5px;
}
Also, I do believe you need to do this with jquery
$('.link').hover(function() {
// show the box
$(this).siblings('.extra_info').toggle();
});
Here is a complete demo
Here is a demo where the extra_info is above each parent div
You're missing an underscore.
<div class="extra info">
should be
<div class="extra_info">