Customize an item inside the css for a given view

Navigation
0

I have this view in MVC

View 

@model XXX
@{

}

<link href="/eTeste/Content/AbaDetailsODM.css" rel="stylesheet" type="text/css" />

<div id="consoleAbaDetalhes"></div>

<div id="campos_detail">
    @using (Ajax.BeginForm(
        "xxxx",
        "xxxx",
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "consoleAba",
            HttpMethod = "POST",

        }))
    {
        @Html.Partial("Validation")
        @Html.HiddenFor(i => i.Id)
        @Html.HiddenFor(i => i.IdEmpresa)
        @Html.HiddenFor(i => i.IdModeloVersao)
        [...]

        <div id="campos">
            <div class="CampoRealyOnly">
                @Html.EditorFor(i => i.User)
                <div class="clear"></div>
                @Html.EditorFor(i => i.Gerente)
                <div class="clear"></div>
                <div id="chefesDeProjeto">
                @Html.EditorFor(i => i.Descricao, "TextArea", new { colunas = 30, linhas = 5 })
                </div>

            </div>

            <div class="CampoRealyOnly clear field-middle">

            <h3>@Html.Label(ODMResources.AreaLeader):</h3>
                @Html.TextBoxFor(x => x.ResponsaveisFuncao)
            </div>
            [...] //Vários Campos
        </div>

The system has its own CSS of the fields. I would like to change a part of this CSS, just for this View. This is a generic part of the system.

The css works like I'd like, the problem is that it changes all other tabs, even having referenced it only in that view. I think it's the waterfall mode that causes it to change at all.

What could I do to separate this, being something generic of the system?

CSS 

.CampoRealyOnly
input[type=text], textarea, select
{
    border: 1px solid #888888;
    left: 298px;
    position: relative;
    top: -29px;
}
h3
{
    color: Red;
}
    
asked by anonymous 30.12.2015 / 12:47

2 answers

0

I had to create selectors for the class itself. In the end it looks like this: 

.CampoRealyOnly input[type=text], .CampoRealyOnly textarea, .CampoRealyOnly select
{
    border: 1px solid #888888;
    left: 298px;
    position: relative;
    top: -29px;
}
    
30.12.2015 / 14:06
0

You have to use your own class, preferably by extending the generic selectors, in your case input[type=text], textarea, select etc ...

If you'd like to change the style of a specific tab, create a specific class for this tab, so you know what it's about, for example: 

input[type=text].nomeAba{
  seu estilo aqui
}

Now just wrap your tab inside the nomeAba class, it can be a div

Notice that I mentioned the word "specific", which ends up in this subject: Specifics On Css Specificity where you will find references that help you.

    
30.12.2015 / 14:01
Secure authentication between different systems [closed] sending email with pause of 2 seconds between emails