I have a padding that i want to minus on procent based design. The typing area have that padding, but makes the input longer than 100%.
can anybody explain what is wrong with my css:
input[type='text'] {
padding:5px;
width:calc(100% - 10px);
}
<input type="text" name="username" id="username" value="Username" />
Why not just use:
input[type='text'] {
padding:5px;
box-sizing:border-box;
width:100%;
}
See this fiddle and this article about box-sizing
Related
I am automating a web page and can click on the side links to get to the page that I need to send a value to, but I cannot find the input box element in the iFrame or panel or whatever it is on/in. I will include a pic and some HTML for information.
This gets me to the page that i need to send a value to:
Selenium.FindElementById("ROOT/Incident Management", timeOut:=10000).Click
Selenium.FindElementById("ROOT/Incident Management/Search Incidents", timeOut:=10000).Click
I have tried switching frames but I cannot see what part of the layout that textbox is part of. I need the FIND below to find the textbox "Incident ID":
Selenium.FindElementById("X11", timeOut:=2000).SendKeys "IM12345"
HTML
<div class="innerNotebookPage"><div id="X9" class="SubFormat" style="position:absolute; top:0px; left:0.0%; width:100.0%; height:832px; overflow: visible;"><span id="X10" type="label" class="Label" style="position:absolute; top:15px; left:0.0%; width:22.3%; height:22px; height:22px; text-align:right;"><label id="X11_Label" for="X11">Incident ID</label></span><div id="X11Border" myattrib="EditBorder" style="
display:inline;float: left; width: 100%;
position:absolute; top:15px; left:22.3%; width:23.5%; height:22px;" class="Text"><div id="X11Edit" class="mandatoryFieldStyle xEdit" style="height:20px;"><input type="text" id="X11" name="instance/number" dvdvar="" buttonid="" datatype="string" sctype="Text" tabindex="" style="height:18px;margin-top:1px;" maxlength="" onkeyup="
handleOnChange(this, event);
" onfocus="handleOnFocus(this, event);" onblur="handleOnBlur(this, event); applyToSameControl(this);" onclick="handleOnClick(this, event);" onchange="handleOnChange(this, event);" value="" scripttype="text"></div></div><span id="X12" type="label" class="Label" style="position:absolute; top:15px; left:45.800000000000004%; width:22.3%; height:22px; height:22px; color: #000000 ; text-align:right;"><label id="X13_Label" for="X13">Assignment Group</label></span><input type="hidden" id="X13Hidden" value=""><div id="X13Border" class="ComFill oneButton" style="
top:15px;
left:68.2%;
width:23.5%;
height:22px;
"><div id="X13Edit" class="mandatoryFieldStyle xEdit file_probsummary field_assignment" style="height:20px;"><div class="xEditOutter" style="
margin-right:22px;
"><div class="xEditInner "><input type="text" id="X13" idfill="9" for="X13" dvdvar="" scripttype="comfill" tabindex="" buttonid="comfill1425328324649" datachangeevent="" value="" flag="005" name="instance/assignment" style="height:18px;margin-top:1px" autocomplete="off" scautocomplete="1" maxlength="" onfocus="hpsm.widgets.Combo.handleOnFocus(this, event);" onblur="hpsm.widgets.Combo.handleOnBlur(this, event);" onclick="handleOnClick(this, event);" onchange="" onkeydown="" onkeyup="
lockFormOnValueChange(this);
I guess, it is not allowed to put a material grid in a material grid (nesting grids)?
Can someone please confirm my assumption?
(I am using Angular Material 6.)
<mat-grid-list cols="6" gutterSize="32px">
<mat-grid-tile [colspan]="3">
left
<mat-grid-list cols="3" gutterSize="8px">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile [colspan]="2">2</mat-grid-tile>
<mat-grid-tile [colspan]="3">3</mat-grid-tile>
</mat-grid-list>
</mat-grid-tile>
<mat-grid-tile [colspan]="3">
right
<mat-grid-list cols="3" gutterSize="8px">
<mat-grid-tile>4</mat-grid-tile>
<mat-grid-tile [colspan]="2">5</mat-grid-tile>
<mat-grid-tile [colspan]="3">6</mat-grid-tile>
</mat-grid-list>
</mat-grid-tile>
</mat-grid-list>
The result should be look like this (two different gutter sizes):
Why do I want this? The design I have to implement has DIFFERENT GUTTER SIZES between the columns :-/ I thought a grid in a grid would be a clever solution, but it doesn't work.
UPDATE:
The solution suggested here does not work, as this is only possible in the older AngularJS Material.
After trying everything I could think of, I came to the conclusion, that material grid in material grid is not possible and probably conceptually not meant to work (understandably).
I decided to solve my problem by using a CSS grid (https://www.w3schools.com/css/css_grid.asp). This works (so far):
<mat-grid-list cols="2" rowHeight="fit" gutterSize="32px">
<mat-grid-tile>
<div class="css-grid">
<div class="css-grid-tile top-left">
</div>
<div class="css-grid-tile top-right">
</div>
<div class="css-grid-tile bottom">
</div>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="css-grid">
<div class="css-grid-tile top-left">
</div>
<div class="css-grid-tile top-right">
</div>
<div class="css-grid-tile bottom">
</div>
</div>
</mat-grid-tile>
.css-grid {
display: grid;
grid-gap: 8px;
grid-template-columns: 33% 67%; // two columns
grid-template-rows: 33% 67%; // two rows
height: 100%;
width: 100%;
.css-grid-tile {
&.top-left {
grid-column: 1 / 2;
}
&.top-right {
grid-column: 2 / 3;
}
&.bottom {
grid-column: 1 / 3;
}
}
}
I would like to know if there is a way to apply the Material Design Lite button style to a file picker, i.e. a component created on an HTML page via:
<input type="file" id="filePicker" />
I would like the "Browse" button of the component to have the look of a Raised button (with ripple if possible). See http://www.getmdl.io/components/#buttons-section.
Thanks!
Using CSS, do you mean something like this?
<style>#file { display: none }</style>
<input type="file" id="file">
<label for="file" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">+</i>
</label>
https://jsfiddle.net/sj838cLg/
Currently, there's no "official" way of doing that. According to the discussion on this issue, the reason is that there's no Material Design specification for that component, so they don't have a guideline to style it. On that same page, the user kybarg provided a CSS/JavaScript code to style a file picker which kind of matches the Material Design specification, so you can use that code:
HTML:
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" />
<label class="mdl-textfield__label">Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text"/>
<label class="mdl-textfield__label">Position</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
<input class="mdl-textfield__input" placeholder="File" type="text" id="uploadFile" readonly/>
<div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">
<i class="material-icons">attach_file</i><input type="file" id="uploadBtn">
</div>
</div>
</form>
CSS:
html {
width: 100%;
}
body {
background: #f5f5f5;
margin: 50px auto;
width: 512px;
}
.mdl-button--file {
input {
cursor: pointer;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
}
}
.mdl-textfield--file {
.mdl-textfield__input {
box-sizing: border-box;
width: calc(100% - 32px);
}
.mdl-button--file {
right: 0;
}
}
JavaScript:
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.files[0].name;
};
But as there's no official specification, you probably won't find an official implementation from the MDL team for now.
The problem:
I have a div where I will have a list of selections for users to choose. In this div, i have to separate the selections. Please refer to this link for image http://imgur.com/FQub7.
the code is here:
<div id="personal" class="personal"> Personal Details </div>
<div id="menu" class="menu"> Permit </div>
<div id="menulist" class="menulist"> -Apply <br />
-Renew
-Track <br />
-Progress <br />
-Information </div>
<div class="menu2" id="menu2">Records</div>
<div class="menulist2" id="menulist2">-Permits<br />
-Training<br />
-Training Schedule<br />
-Accidents & <br />
Convictions</div>
</div>
And the code for CSS is here:
.personal
{
position:absolute;
color:#fff;
top:210px;
left:20px;
font-size:20px;
font-family:'TrajanProBold';
width:20%;
}
.menu
{
position:absolute;
color:#fff;
top:255px;
left:20px;
font-size:30px;
font-family:'TrajanProBold';
width:289px;
}
.menulist
{
position:absolute;
color:#fff;
top:295px;
left:60px;
font-size:20px;
font-family: 'TrajanProRegular';
width:23%;
}
.menu2
{
position:absolute;
color:#fff;
top:401px;
left:20px;
font-size:30px;
font-family:'TrajanProBold';
width:285px;
}
.menulist2
{
position:absolute;
color:#fff;
top:441px;
left:60px;
font-size:20px;
font-family: 'TrajanProRegular';
width:23%;
}
It might be a character encoding issue. Try opening your source code in NotePad++, switch the encoding to UTF-8, and then repost.
Use http://www.fontsquirrel.com/fontface/generator to generate font, If error still persist, most likely its due to the font file that is corrupted. After changing the font file, the matter is solved.
I'm trying to create a small html fragment (a div element) consisted of three parts: a label, textbox, and a button.
Within that div element the label would be on the left (autosized), the button would be on the right (again, autosized) and the textbox should take up all remaining space within the parent div element.
This is what I've tried (assuming I want my div to be 400 pixels wide):
<div style="width:400px">
<div style="float: left">Label</div>
<input style="width:100%"> <!-- doesn't work -->
<button type='button' style='float: right'>Click</button>
</div>
The trouble is, my textbox does not get resized automatically. Add 'width=100%' to the textbox doesn't work.
What would be the way to make it take up all remaining space between the label and the button? Ideally it should be done just by applying some styles, not by introducing new elements.
(I guess the issue isn't related only to div element, but that just happens to be my work scenario.)
Perhaps something like this will be what you want. Yeah I know it's cheating. And yeah, I agree with #Paul re: label, so i swiped his id. :)
EDIT: Obligatory Self-Referencing Demo
Warning: not tested in all browsers.
CSS:
div {
display: table;
width: 400px;
white-space: nowrap;
}
label {
display: table-cell;
padding-right: 3px;
width: 1em;
}
input {
display: table-cell;
width: 100%;
}
span {
display: table-cell;
padding-left: 6px;
width: 1em;
}
HTML:
<div>
<label for="my-very-special-input">Label</label>
<input id="my-very-special-input"/>
<span><button type="button">Click</button></span>
</div>
The only way I could think of making this work was with percents. I enclosed everything in seperate divs (probably uneccesary) and then assigned percentages to each div. Take a look:
<div style="width=400px">
<div style="float:left; width:10%">Label</div>
<div style="float: left; width:70%"><input style="width:100%"></div> <!-- doesn't work -->
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>
It's by no means a perfect solution, but hopefully it will suit your needs to some extent.
Elliott
Does it help if you wrap the <input> in a <div> with overflow: hidden?
<div style="width: 400px;">
<div style="float: left;">Label</div>
<div style="overflow: hidden;">
<input style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>
See xHTML/CSS: How to make inner div get 100% width minus another div width.
And although it’s off-topic, please note that your label should be, well, a <label>.
<div style="width: 400px;">
<label for="my-very-special-input" style="float: left;">Label</label>
<div style="overflow: hidden;">
<input id="my-very-special-input" style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>