I'm using clarity ui framework for building the website. I have added some additional padding on top of the clarity ui input field. It's seems working in all browsers except in IE11 where I'm unable to see the entered text. What changes do I have to make in order for the text to appear in the input field?
Here is the stackblitz link to get access to the code
https://stackblitz.com/edit/clarity-forms-test-ea75jb?file=src%2Fapp%2Fapp.component.css
<div class="clr-control-container">
<div class="clr-input-wrapper">
<input type="text" id="example" placeholder="Example Input" class="clr-input">
</div>
</div>
Styles
input[type] {
background-color: grey;
padding: 21px 6px; //Adding padding is the reason causing the issue
color:white;
width: 100%;
margin-top: 5px;
}
Is there any workaround for this issue?
I try to check the code using developer tools and and I find that _ngcontent-c0 causing this issue.
If you remove it from the code than you can able to see the test in the text box in IE.
Related
I feel like a beginner. I just don't manage to address the datepicker icon with CSS. There is simply nothing for this in the DOM. I've already tried a few approaches, but without success.
I use the WordPress theme "Bridge" and have already looked for this icon in the Qode Options. Unfortunately I can't find anything.
I copied this out of the chrome dev tools. It is practically the complete container in which the datepicker is located. No: :before, :after or similar to be found:
<div class="column1">
<div class="column_inner">
<div class="qode-cf-date-holder">
<span class="wpcf7-form-control-wrap your-date">
<input type="date" name="your-date" value="2020-10-17" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date required" min="2020-10-17" max="2035-12-31" aria-invalid="false">
</span>
</div>
</div>
</div>
I just want to set the cursor to pointer :D. The icon is placed inside the input element (but I can't see how) that gets generated by contact form 7.
Here is a screenshot of the input field:
You must use CSS Pseudo-elements. Unfortunately, currently the input fields in html do not support this feature.
But you can use this feature in the field's parent. Your code looks something like this. (If you use Font Awesome).
.qode-cf-date-holder {
position: relative;
padding-left: 40px;
}
.qode-cf-date-holder:after {
position: absolute;
font-family: 'Font Awesome 5 Pro';
content: '\f073';
left: 0;
top: 0;
font-size: 16px;
z-index: 999;
}
You can style Pseudo-Elements almost like any other DOM Element, for example you can assign an image to its background.
Without a visual reference a bit hard to answer but have you tried:
input[name="your-date"] {
//css here
}
I have the following code:
<html>
<head>
<style>
input {
/* line-height: 1.6em; */ /* doesn't seem to make any difference */
height: 1.6em;
}
</style>
</head>
<body>
<form action="foo" method="POST" enctype="multipart/form-data">
<label>First Name:</label> <input type="text" value=""/>
</form>
</body>
</html>
When I place the code in a file in my filesystem or in a JBoss server and I navigate to it, Firefox 57.0.3 does not rendered the text input field tall enough resulting in the descenders of all letters being clipped:
Chrome renders it just fine.
Curiously, the jsfiddle is rendered properly from both Chrome and Firefox.
What am I doing wrong and why can't I reproduce this in the jsfiddle?
I would assume that height of even 1em should be sufficient, let alone 1.6em.
This is probably due to a combination of the font, and a smaller-than-default height value. On my system, the default font size is 13.3333px and the default (computed) height is 23px. This is a ratio of ~1.725, which is slightly higher than your 1.6em.
1em height isn't enough, because there is a border and padding involved to draw the input field. See the box model below:
You're not able to reproduce it in jsfiddle due to the CSS normalisation that is active by default.
Pretty sure its a dumb question but after a long search i didnt find anything.
While browsing the League of Legends page i noticed something i would like to replicate on my own page.
link:http://na.leagueoflegends.com/en/page/champion-reveal-illaoi-kraken-priestess
In the middle of the page there is a video and text beneath, it also shows 5 buttons everyone of them represents another video and a text. If you press one of the buttons the text and video changes smoothly but it doesn't load a new page or anything. How is this achieved iam not getting it out of the source code. I hope somebody can help. Is this achievable without Javascript?
Does somebody know a tutorial which deals with that?
Thanks for help.
Edit: Maybe if this question is inapproriate for this forum is there some kind of webdesign forum for stupid beginner questions?
There are a variety of ways.
The link you provided does so with Javascript.
While Javascript likely provides the most robust method / functionality - and since you asked if there is a pure CSS way, I wanted to share with you this pure CSS / HTML way. Here is an example: Fiddle Example
HTML:
<div>
<label for="content1">First Button Text Here</label>
<input id="content1" type="radio" name="content">
<div>
This is my content.
</div>
</div>
<div>
<label for="content2">Second Button Text Here</label>
<input id="content2" type="radio" name="content">
<div>
This is my alternate content.
</div>
</div>
<div>
<label for="content3">Third Button Text Here</label>
<input id="content3" type="radio" name="content">
<div>
This is my third set of content.
</div>
</label>
</div>
CSS:
label {
display: inline-block;
color: white;
background: #009;
padding: 5px 10px;
border: 1px solid black;
margin: 10px 0 0 0;
}
input {
display: none;
}
input + div {
display: none;
border: 1px solid blue;
padding: 20px;
}
input:checked + div {
display: block;
}
IMPORTANT THINGS to watch for
This markup will not work unless the following items are in place:
1. The labels for the radio button has a for attribute that matches exactly the id attribute of the radio buttons. The label does not have to be next to the button, but could be separate as needed to get the layout desired.
2. The div that contains the content must be immediately after the input. There cannot be any elements between them.
And, as a side-note, the div that contains the content can, if you like, contain a variety of rich markup to display sophisticated html such as images, tables, video embeds, etc.
IT would be nice if you could provide a link as an example (or at least images). But what you are describing can be achieved pretty simply by using jQuery and it's .show() and .hide() functions. Doing so, you can just create DOM elements you want (e.g. divs, videos, images, ...) and hide or show themn through jQuery.
Here a little example (to be honest, it's not the most fanciest one, but it works).
https://jsfiddle.net/fuzkoewj/
I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}
Please help to correctly layout two forms. I use position approach but it fails when the browser Zoom level is changed. The second button is moved slightly up or down. Here is my code:
<div id="container">
<form id="form1">
<p>Some text here</p>
<p><input name="submitName1" class="button" id="input1_id" value="Submit1" type="submit" /></p>
</form>
<form id="form2"><input id="input2_id" value="Submit2" disabled="disabled" type="submit" /></form>
</div>
#form1
{
bottom: 15px;
position: relative;
}
#form2
{
bottom: 50px;
left: 73px;
position: relative;
}
Again, all is OK when user's browser has the same zoom level as mine, but if not user get wrong arranged button for the second form.
UPDATE: See this example. Even in JSFiddle rendering environment buttons positions are changed while Zoom level is changed at Firefox.
The actual problem is with the button, which is a browser/OS dependent element. And you do not supply a certain height/width to it in pixels.
Since your problem is specifically concerning the vertical placement, you will need to specify a height to your input elements: height: 24px;.
Thus my conclusion is that the more properties (border-width, height/width etc) you specify in specific amounts, thus percentages or pixels, the more consistent your layout will be for different zoom-levels in browsers.
You can specify a default height for all your inputs in CSS by using (as matter of an example):
input
{
height: 24px;
}
Of course you should add more properties here.
When doing forms try using Monospace fonts, otherwise zooming may do some elements go crazy.