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>
Community
  • 1
  • 1
Wernazuma
  • 93
  • 7
  • Check this link:-http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not – Razia sultana Nov 29 '16 at 13:31
  • 2
    Really? OP has mentioned this in his post. That didn't help him. – roberrrt-s Nov 29 '16 at 13:32
  • 1
    Post your markup and current CSS so we don't have to guess perhaps? – Mark Schultheiss Nov 29 '16 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. – Pegues Nov 29 '16 at 14:13
  • And a possible solution to using the input text field is to change it using jQuery: http://stackoverflow.com/questions/17083229/how-to-change-an-input-element-to-textarea-using-jquery – Pegues Nov 29 '16 at 14:24
  • Something like this: `$('#dijit_form_TextBox_0').replaceWith('');` – Pegues Nov 29 '16 at 14:29
  • @Pegues. The app is controlled by a lot of js files, I really don't know where I'd enter that jQuery to make it work. Also, I'm not sure I get all the commands you mention (sorry) or what you'd want to make me do. I don't think the following makes a lot of sense (and as it happens, it doesn't work) .esriAttributeInspector > .atiLayerName + .atiAttributes > table , .esriAttributeInspector > .atiLayerName + .atiAttributes > tbody, .esriAttributeInspector > .atiLayerName + .atiAttributes > tr , .atiAttributes > td:nth-child(3) – Wernazuma Nov 29 '16 at 16:12
  • Hi Wernazuma, I cannot give you the full exact code in a comment because of limited characters I can type. Part of what I was explaining is how to go about selecting the item - you had mentioned "I can't control which element to use", which I assumed meant you were having a problem with selecting the right element. Secondy, as for the issue of applying multiple line functionality, it is literally impossible to do this with CSS. Chrome for a limited time had the ability, but no longer does. So the next comment I provided is how you would go about replacing the text input with a `textarea`. – Pegues Nov 29 '16 at 16:25
  • As for injecting your JS into the page, I assume this is a self-hosted application? Or perhaps I'm assuming wrong. If I assume right, then you should be able to add your jQuery code in perhaps in the head or near the footer. You will have to add the suggested jQuery as part of the event that opens your popup. You've provided very very little code, so I cannot help you at all here. But you should add it as a delegated event, such as `$(document).on('click', 'yourelement', function(){});` I see you are using esri, which I've developed a ton of applications with. – Pegues Nov 29 '16 at 16:29
  • Yes, it is self hosted. But I still have to find the .js file the pop-up is triggered with. Adding the script to the head of the wrapping HTML didn't do anything. I'm apparently too unexperienced to find out where in the two dozens of .js files that triggers the popup. Or maybe that's even somehow called from ESRIs API? Maybe my colleague gets it to work tomorrow. If not, I'll cry help again. It just seems so weird that there is no way to make that one line simply APPEAR as several based on css styling... – Wernazuma Nov 29 '16 at 18:42

0 Answers0