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?
Related
How can I fix the width of text so that it remains splitted in two columns
<div class="container">
<div class="row">
<div class="col-lg-6"><ol id="AllMessages"></ol></div>
<div class="col-lg-6">
<h1>Last Broadcasted Message:</h1>
<h3
id="output"
class="float-left"
style="
margin-top: 35px;
border-top: 1px solid #dedbdb;
padding: 15px;
width: 120px;
"
></h3>
</div>
</div>
</div>
A few observations
It looks like the text in the image is put in without any space, this will usually break the layout - see the portion width:width:width etc.
Your Markup is also incorrect as it contains ol elements without li
Using inline styles on top of bootstrap is probably not a good idea as it breaks margins etc.
Most likely it's the text without non breaking text characters that is breaking your layout.
I try to automate some manual processes by using VBA automation. One of them is to click on a element that has an empty content and at the moment I am not able to figure out how to deal with it
The HTML code that I am trying to click on:
<div id="searchcombobox-1077-triggerWrap" data-ref="triggerWrap" class="x-form-trigger-wrap x-form-trigger-wrap-toolbar">
<div id="searchcombobox-1077-inputWrap" data-ref="inputWrap" class="x-form-text-wrap x-form-text-wrap-toolbar">
<input id="searchcombobox-1077-inputEl" data-ref="inputEl" type="text" role="combobox" size="1" name="searchcombobox-1077-inputEl" placeholder="Account Number" tabindex="-1" class="x-form-field x-form-text x-form-text-toolbar " autocomplete="off" componentid="searchcombobox-1077">
</div>
<div id="searchcombobox-1077-trigger-picker" class="x-form-trigger x-form-trigger-toolbar x-form-search-trigger x-form-search-trigger-toolbar "></div>
</div>
The VBA code used is:
HTMLDoc.getElementById("searchcombobox-1077-inputEl").Value = '11xx111'
Set click_el = HTMLDoc.querySelector("#searchcombobox-1077-trigger-picker")
With click_el
.Focus
.FireEvent "onclick"
End With
What should be the approach that I need to take into consideration since the div element that I need to click on is empty?
Thanks,
I'm new to flexbox and it seems really complex compared to bootstrap. I have a splash screen where I am required to vertically and horizontally center a content:
<div layout="row" layout-align="center center">
<div layout="row" layout-wrap>
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
</div>
however it doesn't center till I add a height to it:
style="height:500px"
Why does it behave this way? Is my code wrong? This doesn't seem like the right way of doing it.
Also with the items in my second row with the layout-wrap the last div with flex=25 overlaps the second div with flex=45.
Basically what I want to do this vertically and horizontally center a div and be able to split that div into as many columns as I like while maintaining a responsive width that adjusts depending on screen size.
Maybe this can point you in the right direction - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center">
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
I read How can I get two form fields side-by-side, with each field’s label above the field, in CSS? which seems to be close to what I need. Unfortunately, I am too new to this to understand most of it. My page used to work with tables, but somehow it got changed and mow it is based in form.
I can only center the labels with position:absolute but that seems to not work in smaller screens. Besides I wanted to use overflow:auto and with the fixed labels it does not make sense when you scroll down the page. The autoflow is not so important, as the ability to keep things in place in smaller screens.
Any ideas that could help, please?
This is the page: http://pintotours.net/coding/form.php
An example for current code:
> <form method="post" action="./database.php">
> <DIV style="position: absolute; left:590px; width:40px; height:25px">Username</DIV> <DIV style="position: absolute;
> right:545px; width:150px; height:25px">Repeat username</DIV> <br>
>
> <center> <p><label for="Username"> </label><input type="text"
> name="username" />
> <label for="Repeat Username"></label><input type="text" name="repeat-username" /></p>
>
> <DIV style="position: absolute; left:590px; width:40px;
> height:25px">Password</DIV> <DIV style="position: absolute;
> right:557px; width:150px; height:25px">Repeat password</DIV> <br>
>
> <p><label for="Password"> </label><input type="text" name="password" />
> <label for="Repeat Password"></label><input type="text" name="repeat-password" /></p><br>
>
>
> </center>
Use tables for simple and speedy form design else use div with css property 'float:left'. Don't use 'absolute' and 'left' 'right' css properties. Check some other websites learn how they designed forms.
<div style="display:inline;">
<textarea rows="10" cols="50"></textarea><br />
<div style="float:right;">remaining characters: 300</div>
It is not working in either firefox or IE. The text remaining characters is not within the "inline" bounds instead goes 100% out of the containing div.
what is the best way of accomplish something like this where text is aligned right in parent div with textarea before that?
Try this.
<div style="display:inline; text-align:right; float:left;">
<textarea cols="50" rows="10"></textarea><br />
remaining characters: 300
</div>