2

I understand that input is one line only and only textarea has multiple lines.

However, where I'm styling, I can't control which element to use. So, I simply want that one line to be displayed as a block, visually go to the next line when the width is reached.

I tried display:block and overflow:scroll and simpler approaches, but nothing helped me out. I also tried to follow input with display:block is not a block, why not? but it also didn't work for me.

It's difficult to describe the details of the code, so here's a link and a screenshot to the app I'm styling - I hope that's enough:

HGIS Indiasscreenshot of the app

You'd need to activate "Comentarios/advertencias", open COMENTAR, start editing and click on an existing comment to see the box.

@MarkSchultheiss: My last efforts before writing here were

div.dijitInputContainer:nth-child(1), #widget_dijit_form_TextBox_0 {
    width: 350px;
        display: inline-block;
             box-sizing: border-box; /* css3 rec */
        -moz-box-sizing: border-box; /* ff2 */
        -ms-box-sizing: border-box; /* ie8 */
        -webkit-box-sizing: border-box; /* safari3 */
        -khtml-box-sizing: border-box; /* konqueror */
}
input#dijit_form_TextBox_0 {
    height: 200px;
    display: inline-block;
    width: 350px;
     box-sizing: border-box; /* css3 rec */
        -moz-box-sizing: border-box; /* ff2 */
        -ms-box-sizing: border-box; /* ie8 */
        -webkit-box-sizing: border-box; /* safari3 */
        -khtml-box-sizing: border-box; /* konqueror */

}

The non-alterable HTML markup on the page is rather long, but if it helps, the surrounding is:

<div class="atiAttributes" dojoattachpoint="attributeTable" style=""><table cellspacing="0" cellpadding="0"><tbody><tr><td class="atiLabel">Notas</td><td><div class="dijit dijitReset dijitInline dijitLeft atiField dijitTextBox" id="widget_dijit_form_TextBox_0" role="presentation" widgetid="dijit_form_TextBox_0"><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="0" id="dijit_form_TextBox_0" maxlength="1000" value="" aria-disabled="false" type="text"></div></div></td></tr></tbody></table></div>
10
  • Check this link:-stackoverflow.com/questions/1030793/… Commented Nov 29, 2016 at 13:31
  • 2
    Really? OP has mentioned this in his post. That didn't help him. Commented Nov 29, 2016 at 13:32
  • 1
    Post your markup and current CSS so we don't have to guess perhaps? Commented Nov 29, 2016 at 13:32
  • 1
    Why can't you just use the following selector? .esriAttributeInspector > .atiLayerName + .atiAttributes > table {} ? And you will have issues with styling exactly how you wish because of the table, so I advise you break the table apart using display: block to .esriAttributeInspector > .atiLayerName + .atiAttributes for table, tbody, tr, and td { display: block }. Then use nth-child to select anything you need. Let me know if this helps and I'll post a refined solution for you for at least selecting what you need to select for. Commented Nov 29, 2016 at 14:13
  • And a possible solution to using the input text field is to change it using jQuery: stackoverflow.com/questions/17083229/… Commented Nov 29, 2016 at 14:24

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.