Is there any possible way this "line" under Custom Fields to be done with css?
Jbutler483's answer is a good method of reducing markup. However, if you have to support a browser older than ie9, use this method. The other method essentially tells the browser to render this.
.inputItem {
padding-top: 5px;
padding-left: 5px;
margin-top: 5px;
position: relative;
}
.inputItem textarea {
margin: 0;
min-height: 50px; /*optional*/
min-width: 200px; /*optional*/
}
.before {
content: "";
position: absolute;
top: -2px;
left: 0;
height: 100%;
width: 30px;
border: 2px solid gray;
border-right: none;
}
Custom Input
<div class="inputItem">
<div class="before"></div>
<textarea placeholder="Enter some text! I'm resizable too!"></textarea>
</div>
You could use a pseudo element on this, reducing markup whilst not having to to use overflow:
.inputItem {
padding-top: 5px;
padding-left: 5px;
margin-top: 5px;
position: relative;
}
.inputItem textarea {
margin: 0;
min-height: 50px; /*optional*/
min-width: 200px; /*optional*/
}
.inputItem:before {
content: "";
position: absolute;
top: -2px;
left: 0;
height: 100%;
width: 30px;
border: 2px solid gray;
border-right: none;
}
Custom Input
<div class="inputItem">
<textarea placeholder="Enter some text! I'm resizable too!"></textarea>
</div>
Related
I have an input and a button in the same div, and want them to be in a single line without any gap in between, regardless of screen size, but cannot get that to happen. The button seems to have a horizontal padding, although I set both padding and margin to none, so % wouldn't be a solution. Also, I would like the button to wrap around its contents, so even if it could work, it wouldn't be the greatest solution. Is there a way to set the location and size of the button and resize the input accordingly with CSS? Or is some JavaScript needed to do this?
Desired Output:
Current Output:
Current code (CSS is insignificant, as it doesn't work)
.chatinp {
height: 10px;
width: 100%;
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
size: fixed;
height: auto;
border-top: solid;
}
#CHAT {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
left: 0;
height: 100%;
width: 95%;
background: none;
border: solid 1px #fff;
padding: none;
margin: none;
}
#SEND {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
right: 0;
height: 100%;
width: 10%;
background-color: #090;
border: solid 1px #fff;
padding: none;
margin: none;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND", id="SEND">SEND</button>
</div>
You can use several tools to achieve that :
CSS property float (example below)
will run even on old browser
doesn't fit for complex use (in your case, that fine)
CSS Grid Layout
CSS Flex element
Float Example
.chatinp {
height: 30px;
width: 100%;
}
#CHAT, #SEND{
box-sizing: border-box; /* permit the use of border and padding without overstepping the width */
height: 100%; /* use all of the avaible height given by the parent */
padding: none;
margin: none;
position: relative; /* needed for float */
float: left; /* make element align from left to right, then top to bottom */
}
#CHAT {
width: 85%;
border: 3px solid grey;
}
#SEND {
width: 15%;
border: 3px solid green;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND" id="SEND">SEND</button>
</div>
You might need to use flexboxes if I understood your demand.
I added display: flex on parent container (.chatnip) and flex : <value> on child elements to tell them how much space they should take.
There's no gap between the boxes.
.chatinp {
height: 10px;
width: 100%;
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
size: fixed;
height: auto;
border-top: solid;
display: flex
}
#CHAT {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
left: 0;
height: 100%;
background: none;
border: solid 1px #fff;
color: white;
flex: 9;
}
#SEND {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
right: 0;
height: 100%;
background-color: #090;
border: solid 1px #fff;
color: white;
padding: none;
margin: none;
flex: 1;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND", id="SEND">SEND</button>
</div>
Since you are making use of flexbox, try to make the most advantage of it. For chatinp class use display: flex and for #CHAT use flex: 1 if needed add a width for #SEND
.chatinp {
width: 100%;
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
border-top: solid;
display: flex;
}
#CHAT {
font-family: monospace;
font-size: 20px;
/* position: relative; */
/* bottom: 0; */
left: 0;
height: 100%;
/* width: 95%; */
background: none;
border: solid 1px #fff;
padding: none;
margin: none;
flex: 1;
}
#SEND {
font-family: monospace;
font-size: 20px;
/* position: relative; */
/* bottom: 0; */
/* right: 0; */
/* height: 100%; */
/* width: 10%; */
background-color: #090;
border: solid 1px #fff;
padding: none;
margin: none;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT" />
<button name="SEND" id="SEND">SEND</button>
</div>
I prefer to use grid where you can specify how much portion and number of elements to be placed in a single row
div{
display:grid;
grid-template-columns:80vw auto;/*auto auto , if you don't need any specific space for the items*/
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND", id="SEND">SEND</button>
</div>
add these to your css: (and get rid of height: 100%; from #CHAT)
.chatinp {
display: flex;
}
#CHAT {
height: auto;
}
I have been struggling with this for two days now, though it looks very simple.
As you see the footer i created in the picture here:
I have two problems:
I cannot seem to apply any css modifications on the footer inside the text ("Capgemini newcomer application")
I cannot add a line separating the rest of the page from the footer without intercepting the logo or applying a margin between the page content and the footer like shown in the next photo:
HTML code
<ion-footer-bar class="bar">
<img src="img/Imag.png" class="test2" />
<div class="text"> Capgemini Newcomer Application </div>
<img src="img/Test3.png" class="test"/>
</ion-footer>
CSS code
.bar {
position: absolute;
margin-top: 20px;
height: 50px;
border-top: 2px solid #FBC02D;
}
.bar .test {
float: right;
clear: left;
position: fixed;
max-width: 130px;
max-height: 100px;
right: 0;
bottom: 2px;
}
.bar .test2 {
width: 40px;
height: 40px;
bottom: 20px;
}
.bar .text {
text-align: center;
font-size: 6;
bottom: 2px;
}
EDIT
After doing the modifications mentioned below, i got this:
<ion-footer-bar ng-class="{'bar': true}">...</ion-footer>
There are a couple of issues with your CSS that don't work like you would expect:
.bar {
position: absolute;
margin-top: 20px; /* doesn't do anything for position: absolute */
height: 50px;
border-top: 2px solid #FBC02D; /* <-- this will always add the border outside the footer */
}
.bar .test {
float: right;
clear: left;
position: fixed; /* <-- either you float it, or you position it fixed - both together don't make sense */
max-width: 130px;
max-height: 100px;
right: 0;
bottom: 2px;
}
.bar .test2 {
width: 40px;
height: 40px;
bottom: 20px; /* <-- "bottom" on a non-positioned element doesn't do anything */
}
.bar .text {
text-align: center;
font-size: 6; /* <-- font size needs a unit like "px" or "pt" */
bottom: 2px; /* same as above, this should probably be margin-bottom instead */
}
Cleaned up, it could look like this:
.bar {
position: absolute;
height: 50px;
}
.bar .test {
position: fixed;
max-width: 130px;
max-height: 100px;
right: 0;
bottom: 2px;
}
.bar .test2 {
width: 40px;
height: 40px;
margin-bottom: 20px;
}
.bar .text {
text-align: center;
font-size: 6pt;
margin-bottom: 2px;
border-top: 2px solid #FBC02D;
}
This will still overlap the logo with the border, but that's a problem that you need to fix in the logo image.
I am trying to create a custom div with input text and two buttons inside it as shown below.
But when i resize the screen it becomes like this
Is there a way to avoid the two buttons to come down ? Instead it should remain inside the original div.
Here's the code i tried:
.searchBar {
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}
.search_field {
display: inline-block;
border-radius:4px ;
background: #FFFFFF;
width: 70%;height: 32px;
position: relative;
left: 60px;
overflow: inherit;
}
.search_field input {
width: 89%;
padding: 0;
border-top-left-radius: 4px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border:1px inset red;
}
.search_field input:focus {
outline-color: transparent;
outline-style: none;
}
.search_field button {
border: none;
background: none;
}
<div id="searchBar" class="searchBar">
<div class="search_field">
<input type="text" id="searchInput" placeholder="Search" oninput="showSearchButtons()"/>
<button id="btn1" hidden="true" onclick="alert()"><img src="assets/images/search.png"></button>
<button id="btn2" hidden="true" onclick="alert()"><img src="assets/images/saveBtn.png"></button>
</div>
</div>
Any help is appreciated. Thanks
You can use calc to calculate the width of your input element relative to your buttons:
width: calc(100% - 100px);
Just make sure the width of your buttons is taken of the 100%. In SASS it could look like this:
$buttons: 50px;
width: calc(100% - #{$buttons * 2});
Below is a simplified implementation. I still have the % values as a fallback for older browsers - but that's more a habit than necessity as every major browser supports calc, even IE9 and onward.
input, button {
float: left;
height: 50px;
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
}
input {
width: 70%;
width: calc(100% - 100px);
padding: 10px;
}
button {
/* Note that this width is equal to 100%
/* minus the percentage width of the input
/* divided by the amount of buttons. */
width: 15%;
width: 50px;
line-height: 50px;
}
/* This rule is just to make sure your images don't decide the buttons width */
button img {
max-width: 100%;
display: inline-block;
}
<input type='text' placeholder='search' />
<button><img src="http://placehold.it/50x50" /></button>
<button><img src="http://placehold.it/50x50" /></button>
Please try this instead of your styles:
.searchBar{
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}
.search_field {
border-radius:4px ;
background: #FFFFFF;
position: relative;
padding-right: 100px; /* You can change as button width */
}
.search_field input {
width: 100%;
padding: 0;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: solid 1px #FF0000;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.search_field button {
border: none;
background: none;
position: absolute;
top: 0;
}
.search_field button#btn1 {
right: 50px; /* Change as your requirement */
}
.search_field button#btn2 {
right: 0; /* Change as your requirement */
}
I am trying to make a file hierarchy in html/css and I can't get these labels or the divs they are in to expand to full width. They only expand to the width of the visible area but I want the width of what they are in. Here is the fiddle to see what I am talking about. The grey area needs to all line up on the right.
a = 3;
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
width: 100%;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file"><label>test.txt</label></div>
<div class="file"><label>readme.txt</label></div>
<div class="file"><label>a really long filename.txt</label></div>
</div>
</div>
</div>
You need to change your div.directory CSS class as follows:
div.directory {
display:inline-block;
padding-left: 20px;
}
I made the following changes:
1) Added display:inline-block;
2) Removed the width:100%; rule.
Here is an example:
http://jsfiddle.net/nnd7jyj1/
(As a side note, it's generally bad practice in CSS to apply both a width and either a padding or margin rule to the same element. The reason for this is that some browsers interpret the width to include the padding/margin and some don't, which leads to inconsistent results)
Simply add display:inline-block; to div.directory
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
/* width: 100%; */
/* added */
display: inline-block;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file">
<label>test.txt</label>
</div>
<div class="file">
<label>readme.txt</label>
</div>
<div class="file">
<label>a really long filename.txt</label>
</div>
</div>
</div>
</div>
I using Twitter's Bootstrap and this color picker: http://bootstrapformhelpers.com/colorpicker/.
And I'm having an issue with these div/span/input created by library.
It uses bootstrap classes the apply display: table to div, display: table-cell to span and display: inline-block to input.
I've overwritten some CSS attributes to get my expected layout, testing it in Chrome.
However, it does not work as expected in IE9 and Firefox. Works as expected in Chrome, Opera, IE10 (and IE9#IE10).
I've reproduced it in jsFiddle, here is the important code:
HTML:
<div>
<span class="btn">
<span></span>
</span>
<input type="text" />
</div>
CSS:
body {
line-height: 20px;
}
div {
display: table;
position: relative;
width: 140px;
}
span.btn {
background: #ccc;
display: table-cell;
padding: 6px 12px;
position: relative;
left: 90px;
}
span.btn > span {
background: #333;
display: block;
height: 16px;
width: 16px;
}
input {
border: 1px solid #ccc;
display: inline-block;
height: 20px;
margin-left: -42px;
padding: 6px 12px;
width: 100%;
}
Why this is exactly happening? Every browser interpreting display: table/table-cell differently?
What is the cross-browser solution?
Because Firefox doesn't support position: relative; on table cells...
Bug Report
The issue is that you are actually having some really weird markup and CSS positioning, you should consider nesting an absolute positioned element under a relative positioned parent.
Demo
Demo 2 (With a center black box)
div {
position: relative;
width: 180px;
border: 1px solid #ddd;
margin: 20px;
height: 30px;
}
div input {
padding: 6px;
}
.btn {
position: absolute;
height: 30px;
width: 30px;
background: #aaa;
right: 0;
top: 0;
}