I have a problem that I am not finding a solution.
I decided to put clockpicker in position fixed:
.popover.clockpicker-popover{
position:fixed;
padding-top:80px;
}
With this setting, I dont't know why, I have to click 2 time on my input to make clockpicker visibile. I know that there could be problem with z-index but it seems like if I change the z-index from the console of the input-wrap in the first try works but then it stops and the previous behaviour come back.
This is my input field:
<div class=" select eff01 col-50" style="position:relative">
<label>*Orario</label>
<div class="input-wrap" style="border: 1px solid rgb(187, 187, 187);">
<input class="form-control required time" id="TrainManuallyDepartureTime" autocomplete="off" readonly="readonly" type="text">
</div>
</div>
Do you have any suggestions?
I've tried to insert a <br /> tag to break the line after fontello icon and found that it's impossible when div is styled with "display:flex". Adding white space is also disabled. Adding new lines after some character is possible, but new line starts beneath <i> tag. Why and how to fix that?
PS: I've noticed that in Chrome situation is better than in Firefox, but new line still starts beneath <i> tag.
Example:
.with_flexbox{
display:flex;
color:purple;
}
<div class="with_flexbox red">
With flexbox I can't use <br /> tag right after <i><i></i><br /> tag
</div>
<div class="without_flexbox">
Without flexbox break after <i><i></i><br />
tag works fine.
</div>
<div class="with_flexbox">
White space is also disabled right after <i><i></i> tag. <br />And why this new line starts beneath <i> tag?
</div>
In your third example contents of your flex container are split by <i> node into 3 flex items, you get 1 item that consists of:
White space is also disabled right after, second item <i><i></i> and third item tag. <br> And why this new line starts beneath <i> tag?. Everything looks fine, you get 3 nodes displayed horizontaly, there is a line break after word tag, just as you wrote it.
Wrapping text fragments into separate tags not only makes sense semantically but also helps you maintain your code.
If you want to stick to flexbox, you should name each node separately and use flex-direction: column instead of br tags, or you could set flex basis for both elements and use flex-wrap. Example snippet attached below.
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
outline: 1px solid red;
}
.item__icon {
outline: 1px solid blue;
}
.item__intro {
outline: 1px solid green;
}
.item__description{
outline: 1px solid yellow;
}
<figure class="item">
<p class="item__intro">White space is also disabled right after</p>
<i class="item__icon"><i></i>
<figcaption class="item__description">tag. <br />And why this new line starts beneath <i> tag?</figcaption>
</div>
In a Java project we are using PrimeFaces 2.2.1 as a JSF extension. We are implementing in a register form the data of schedule as "Load hours" separated in two fields, hours and minutes. We are using the Spinner (p:spinner component) as input element. However, we need to show the current data (only integers) in the format that show at least two numbers when value is less than 10.
Current input format
Needed input format
The body of the JSF tags look as this:
<div class="form_block">
<div class="form_item">
<h:outputText styleClass="form_item_label" value="Load Hours:"/>
<div class="form_item_field">
<p:spinner id="hora" styleClass="spinnerField" style="height: 12px !important; box-shadow: none !important; border-radius: 4px 0px 0px 4px;"
value="#{hour}" min="00" max="23"><f:convertNumber pattern="00" minIntegerDigits="2" type="number"/></p:spinner>:
<p:spinner id="minutos" styleClass="spinnerField" style="height: 12px !important; box-shadow: none !important; border-radius: 4px 0px 0px 4px;"
value="#{minutes}" min="00" max="59" maxlength="2"><f:convertNumber pattern="00" minIntegerDigits="2" type="number"/></p:spinner>
</div>
<div class="clear"></div>
</div>
</div>
We have also try formatting with f:convertNumber component within Spinner but seems to not work as we expect. Has anybody else had similar problems like this before? Any suggestions you might share? Thanks in advance
Note. We did not implement timepicker due to the fact we precise to handle each field (hours and minutes) separated.
Actually, I had to change the components. Instead of using p:spinner it is know implemented p:inputMask.
The below values represent a combobox / combo-list on a website. I am trying to select item #3 from the drop down using VBA. I have tried several things, but I have had no luck selecting said item. I have tried looking for solutions on Google and the Stack but haven't found anything that seems to work.
<DIV id=ext-gen256 class="x-layer x-combo-list x-combo-list-small" style="FONT-SIZE: 10px; HEIGHT: 92px; WIDTH: 113px; POSITION: absolute; LEFT: 744px; Z-INDEX: 12007; TOP: 235px; VISIBILITY: visible">
<DIV id=ext-gen257 class=x-combo-list-inner style="HEIGHT: 90px; WIDTH: 111px">
<DIV class="x-combo-list-item" _nodup="30829" viewIndex="0">Select</DIV>
<DIV class="x-combo-list-item" _nodup="30829" viewIndex="1">Item 1</DIV>
<DIV class="x-combo-list-item" _nodup="30829" viewIndex="2">Item 2</DIV>
<DIV class=""x-combo-list-item" _nodup="30829" viewIndex="3">Item 3</DIV>
<DIV class="x-combo-list-item" _nodup="30829" viewIndex="4">Item 4</DIV></DIV></DIV>
I have used several variatons of the below code to try and select the item in question (i.e item #3), but keep getting a runtime error
Dim inputE As MSHTML.HTMLHtmlElement
Set inputE = IE.document.getElementsByClassName("x-combo-list-item")
If inputE.innerText = "Item 3" Then
inputE.Select
End If
This doesn't seem to work. Any help is greatly appreciated. Thanks!
I am new to CSS and recently reading the specification and having some problems in understanding the vertical-align property.
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>
Above code creates 3 div, each of them contains 3 empty inline boxes (spans):
In the 1st div, everything seems fine. All the 3 spans are aligned to the baseline of the line box.
In the 2nd div, after I set the vertical-align property to top for the 3rd span, the first two spans are moved up. And I get lost from here, I don't understand why they will be moved up, according to what rule.
The 3rd div is even more wired to me. I set the vertical-align property to bottom for the 1st span, and it causes the 2nd span to move slightly lower than the 3rd span (this will be noticed when zoom in enough).
The thing I can find in the specification says below, but what exactly are the multiple solutions? Could anyone shed more light on this?
In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.
I've also created a fiddle. Please run it in Firefox or Chrome if you are interested.
vertical-align is mostly used for inline element for example img tag, which is commonly set to vertical-align: middle; inorder to align correctly within the text.
Demo (Without the use of vertical-align)
Demo 2 (Using vertical-align)
Ok, so that was a general idea of how vertical-align works with a value of middle.
So, first lets see what are the valid values for vertical-align property.
Credits : Mozilla Developer Network
Now, lets solve your doubt step by step..
In the first example, everything's fine according to you but the answer is no, you are applying line-height to the span which varies, but the fact is line-height is actually not applied as the way you think...
Line height is actually not getting applied
Make it inline-block and it will be applied
You can read this answer for more information, that why using line-height on span is useless.
Moving on to your second doubt, you are having line-height on first span, second span but not the third span so what's happening here? As span is inline with the text and anyways line-height won't play the role there as I previously explained, they are happily aligned vertically with the text, whereas when you use vertical-align: top;, it doesn't move the other two boxes above that, instead it aligns to the top of the text.
See how the vertical-align: top; aligns at the top of the text
Coming to the last example of yours, in here, first span element is aligned to the very bottom as expected, well its correct, moving on to second, you said it's slightly in the lower than the third, because it is not aligned at all, line-height is what it makes that element align vertically center and last, moves a bit to the top, which is infact aligned to the top.
Lets make them inline-block and see how they actually behave..
So I hope you got the difference between all the three examples, but its necessary for you to understand the line-height property and inline-block property as well, also don't forget to refer the answer I shared.