I have a form and I'm using CSS to layout the fields on the screen.
This is working as I'd like and can be seen here :
FIDDLE
I'm now trying to apply the same layout to a form within a CSS Accordion layout and it's getting messed up. This FIDDLE shows what going wrong.
This is the HTML I'm using :
<div class='block'><label> Text 1</label><input type="text" name="text1" /></div>
<div class='block'><label> Text 2</label><input type="text" name="text2" /></div>
and the CSS:
div.block {overflow:hidden; }
div.block label {width:325px; display:block; float:left; text-align:left; vertical-align:middle; }
I'm assuming this is messing up as accordion is using the <lable> tag to create the sections.. and I'm using it to layout the fields.
So how do I layout my form fields neatly and keep the accordion working ?
This is the final result I'm after:
Thanks
Some of your form styles are being overridden by the accordion's CSS. Neither have very impressive specificity. You can fix this particular problem by moving your CSS to the end and adding an ancestor selector to increase rank:
.horizontal div.block {
overflow:hidden;
}
.horizontal div.block label {
width:325px;
display:block;
float:left;
text-align:left;
vertical-align:middle;
}
Demo
Updated demo to remove border & background from interior labels.
I haven't added all necessary reset styles on your elements. A better approach might be to add classes to the outer labels, and modify the accordion CSS to target that class, or use a child selector (.horizontal > ul > li > label). That would prevent you from needing to reset so many properties.
A best-practice approach for situations like this is to load a third-party product like this in its own CSS file, along with any others in their respective files, and then load your custom CSS file that includes any overrides. This makes it easier to get your styles to trump the others, which is normally what you'd want.
<link rel="stylesheet" href="accordion.css" />
<link rel="stylesheet" href="menu.css" />
<link rel="stylesheet" href="widget.css" />
<link rel="stylesheet" href="custom.css" />
Related
I have some nested elements that I need to apply styles in a project that uses Vue.js and Element-UI.
<div slot="left">
<ul class="other">
<li class="disabledText">
<el-input v-model="data.other" type="textarea" :autosize="{ minRows: 4}" :maxlength="3999" :disabled="disSendButton" #change="updateSite('other', data.other)" #blur="data.other=$event.target.value.trim()" />
</li>
</ul>
</div>
In this instance I will be dynamically applying the class "disabledText" to the li element to color the text in the nested textarea, however I am unable to get the rule in the disabledText class to apply to the text area.
The CSS that I have tried:
.disabledText textarea{
color:red !important;
{
li.disabledText textarea{
color:red !important;
{
ul.other li.disabledText textarea{
color:red !important;
{
Even applying a class name directly to the textarea element and referencing that in the CSS class does not have any effect.
The rendered HTML looks like:
HTML
Maybe something like that is gonna work:
.disabledText .el-textarea
or
.disabledText .el-textarea .el-textarea__inner
Although it's kinda hard to solve this problem without any reproduction. Could you provide an example in CodeSandbox?
I have a webpage that is a template from a company that design it for us and we have an admin panel which we can add content to the page.
This normally works fine but there is a specific page that doesn't look great. It has a lot of text on it and we want the background to be a dark brown colour, a gold border around it and the text in bold.
When we are adding content we create a content block and in this, we can add html, I have recently done a very basic course in html. I know normally the page will link to a CSS file which will provide the page style. But I also know you can add the <style> tag in and then add CSS directly into the HTML.
This is maybe a long shot but does anyone with any knowledge of template website know if it would work to add the css in this way just to change the background colour and give it a border? I presume I would need to use something like google dev tools to find out what the section names are to identify them in the CSS? According to dev tools the section I want to modify looks like this.
<div id="content">
<div class="cs-content-row">
Thanks
If you have very limited control, e.g. you can't add a <style> tag to the <head> or use a custom stylesheet, you can also resort to using inline style, and style individual elements using the style attribute.
See example of use;
<div style="background:brown; border:1px solid yellow; color:white; font-weight:bold; padding:30px;">Your text here</div>
The pros are it overrides the default styling easily, but the downside is you have to re-write code for every element you want to custom style, and if you changed your mind about the colour, you'll have to edit every instance it was used..
You mean normal css into html like this?
<html lang="en">
<head>
<style>
body{
background:red;
}
#content{
width:200px;
height:200px;
background:blue;
}
.cs-content-row{
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div id="content">
<div class="cs-content-row">
</body>
</html>
You can use the style tag but you have to add it between the <head> tags of your page.
If your admin panel allows you to update that part of HTML you can do something like that :
According to your HTML description
<head>
<style>
#content{
/* css targeting the div with id attribute equals to 'content' */
}
.cs-content-row{
/* css targeting the div with class attribute equals to 'cs-content-row' */
}
</style>
</head>
I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.
Problem :
Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).
So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.
Looks like a perfect example usage of a grid system.
Without using a grid system, you can just use float: left for each of the div and it should be OK.
Here is simple example for doing so,
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<style type="text/css">
.content{
width:150px;
height:100px;
border:1px solid blue;
}
.content .text{
display:block;
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
text here
</div>
<div class="text">
another text here
</div>
<div class="text">
yet another text here
</div>
</div>
</body>
</html>
Code Explanation
What i did is wrap text div inside content parent div and assign fixed width and height to parent div.
Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.
Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.
By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started:
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
I want to put a textarea on my webpage, but it has to be inside a div tag in order to keep my layout. I don't want the users to be able to re-size the textarea until it's out of the div tag I put it in, it messes up the hole layout. Is there a way to set the max size on the textarea?
Thanks for help!
CSS:
textarea {
width:400px;
height:200px;
resize:none; /* disable resize functionality */
}
The easiest way (although it is a little sloppy) is to style the textarea in-line. If you define a width and resize:none, your users will not be able to resize the textarea and ruin your design.
<div>
<textarea name="yourtextarea" style="width:300px;height:200px;resize:none;" /></textarea>
</div>
I would however recommend that you style your textarea similarly to how Xander has answered as it is much cleaner. I would change one thing though, and that is to add a less generic selector.
<head> // place in your header
<style type="text/css">
#textAreaId {
width:300px;
height:200px;
resize:none;
}
</style>
</head>
<body> // place inside of your div, within the body tag
<div>
<textarea id="textAreaId" name="yourtextarea" /></textarea>
</div>
<body>
I am working with a django setup HTML and I want the first part of my html page to be determine by the first CSS stylesheet. The rest I want to be controlled by a different one. Is this possible. I put an HTML CSS link (below) above the code I want it to control. It doesn't seem to work and it looks like it gets applied to all the HTML. Is there a way to specify the CSS link to just the code I want.
<link href="folder/to/css/style.css" rel="stylesheet" type="text/css" />
Why don't you use different classes for the elements below? Also make sure you understand CSS specifity
No, you can't do that. You could use an iframe that has its own CSS.
You could use a specific section class, and link to both css stylesheets, for example:
<!-- Represents a first CSS file. -->
<style>
.section1.customclass
{
background-color: red;
}
</style>
<!-- Represents a second CSS file. -->
<style>
.section2.customclass
{
background-color: blue;
}
</style>
<div class="section1">
<input type="text" class="customclass" />
</div>
<div class="section2">
<input type="text" class="customclass" />
</div>