EDIT: I'm not sure what the issue was, but it seems to have resolved itself. Perhaps I forgot to update my manifest file. I have no idea what the problem was, but it is working now. :/
Here is an example of my html code:
<div id="well_comments_container" class="element_container" name='well_comments' type="textarea" require="0">
<label for="well_comment">What did we do really well?</label><br />
<textarea id="well_comment" name="well_comment" rows="4"></textarea>
</div>
Here is an example of my css code:
.element_container{
display: inline-block;
padding: .5em .5em;
}
.element_container[type="textarea"]{
width: 100%;
}
This works on a laptop just fine, but when I look at it on a touchpad it doesn't seem to work. It's width is clearly not 100% of the parent like it is in chrome.
Warmth.
Are you really sure it is working?
Try this CSS:
.element_container textarea {
width: 100%;
}
Now it depends on the width of your parent element.
JSFiddle
Related
I'm following a tutorial on youtube to create a replica of LinkedIn with CSS + ReactJS. I've been following the tutorial exactly (using it as more of a learning opportunity than anything) yet sometimes when the tutorial adds certain code, it doesn't appear on my environment when I try to add it. I found a work around for one case, but when I try to add a border-bottom to css it just won't show up.
CSS:
.header{
position: sticky;
top: 0;
display: flex;
justify-content: space-evenly;
border-bottom: thin solid lightgray; /*this is a vscode shortcut*/
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
z-index: 999;
}
JS:
function Header() {
return (
<div className ='Header'>
<div className="header__left">
<img src="https://www.flaticon.com/svg/static/icons/svg/174/174857.svg" alt=""/>
<div className="header__search">
<SearchIcon/>
<input type="text"/>
</div>
<div className="header__right">
<HeaderOption Icon= {HomeIcon} title="Home"/>
<HeaderOption Icon={SupervisorAccountIcon} title="My Network"/>
</div>
</div>
</div>
);
}
*HeaderOption is an imported JS function I created. It isn't conflicting with the CSS I believe because I have removed it and the border still won't appear.
Thank you in advance.
CSS is case insensitive.
But in HTML the class and ID are case sensitive
change
<div className ='Header'>
to
<div className ='header'>
First off, you might wanna check your classNames' spelling for case-sensitivity.
If that's not the issue, your divs are probably collapsing with each other, so it renders the pixels through approximation. This is usually the case if you try zooming in your page and the missing border magically appears.
I suggest setting a height for your header where the borders don't collapse with the other divs' borders. Also, I prefer setting a fixed measurement unit rather like px,rem,%, etc. rathen than using thin.
I have a div contains following CSS.
HTML
<div class="fixed-bottom pull-right" id="supdiv" onClick="myfunction()">Support</div>
CSS
#supdiv
{
left: unset !Important;
z-index: 999999999;
display:none
}
In Chrome
In IE
Its working fine on Chrome but expand div width in IE.
So is there any solution to this problem.
Thanks All of you guys.
I found a simple solution to my problem.
Its very simple infect. I just change the following code.
OLD CODE:
left: unset !Important;
NEW CODE:
left: auto;
I'm having a problem with border-radius on iPhone and iPad. I'm trying to generate a round googlemap, which is working fine in every browser and on every system except ios.
What I've done so far is, I've got a map-canvas
<div class="col-sm-4"><div id="map_canvas"></div></div>
and my css
#map_canvas {
height:474px;
width:474px;
border-radius:237px;
margin-bottom:73px;
display: block;
overflow:hidden !important;
position: relative !important;
}
after this wasn't working, i tried to add more border-radius:
.gm-style {
height:474px;
width:474px;
border-radius:237px;
overflow:hidden !important;
}
#map_canvas .gm-style > div {
border-radius:237px;
}
but still no success. Here's a live example:
http://kristinwalzer.at/website/kontakt.php
Anyone knows this problem? And a solution perhaps?
Add one more div for round box and add properties to that round box
<div class="col-sm-4">
<div class="roundBox">
<div id="map_canvas"></div>
</div>
</div>
.roundBox{
height:474px;
width:474px;
border-radius:237px;
overflow:hidden !important;
position: relative !important;
z-index: 999;
}
#map_canvas {
height:474px;
width:474px;
display: block;
border-radius:237px;
}
I've found this In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?
All fiddles in this post won't work on safari (windows and ios).
But even if they said in that question that it is solved, it is not. Looks like a Googlemap V3 Bug.
I want to fix the size of empty image to 150px. On Firefox, I can use float: left, but it doesn't work on Google Chrome.
HTML:
<div>
<img src='some broken url' alt='no image'>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
CSS:
div {
width: 450px;
height: 500px;
background: cyan;
}
img {
display: block;
max-width: 100%;
min-height: 150px;
min-width: 150px;
background: grey;
}
Is there a CSS solution for this?
I think there is some misunderstanding. The srcs are supposed to be random urls that I wouldn't know in advanced.
Ideally, use an empty placeholder <div> for this:
<div>
<div><!----></div>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
... and give it the dimensions you need. This will allow you to do stuff like show a background placeholder image in its place etc.
If you want to style an empty image-tag:
img[src=""] { width: 150px; }
Should work, expect for IE6.
If you want to get it cross browser compatible, the solution from #Tom would be your best choice.
Or jQuery solution (because CSS can't check for broken URLs):
$('img').error(function(){
$(this).css('width', '150px');
});
I'm trying to set an input button's image in a jsp. My code for the button is like so:
<input type="button" name="Unassign" class="btnUnassignHandlerRule" style="width:50px;" />
//setting width inline because it's not working in the CSS
And the CSS code is like so:
.btnUnassignHandlerRule{
background: url(../Images/leftarrow.png) no-repeat;
height: 50px;
margin-top: 15px;
}
My file hierarchy looks like this:
jsp: web/WEB-INF/jsp/myJspPage.jsp
Image: web/Images/leftarrow.png
Please let me know if my code if correct and if my paths are correct as well? Otherwise I don't know why it's not working.
Works for me, made a jsfiddle: http://jsfiddle.net/g5zKz/
Could you show the path to the css File ? So we can look if your in the wrong path !
Change ../Images/leftarrow.png to ../../Images/leftarrow.png if the page and image URLs are as described. By the way, in my test, width: 50px works fine even when placed in the same CSS rule as the other settings.
Please use this css.
input.btnUnassignHandlerRule{
background: url(../Images/leftarrow.png) no-repeat;
height: 50px;
margin-top: 15px;
}